function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ranjeet Kumar 16Ranjeet Kumar 16 

rendering 3d image in a lightning component

I have a requirement where a 3d image of .fbx format needs to be displayed in lightning component.
Did anyone work on 3d image display on lightning. Any help will be Acknowledged.
Nubes Elite Technologies Pvt. LtdNubes Elite Technologies Pvt. Ltd
Hello Ranjeet,

You can try below code for Controller -
 
({
    setup : function(component, event, helper) {        
        alert('loaded');
        var container;    
        var camera, controls, scene, renderer;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = 1000 / 2;
        var windowHalfY = 700 / 2;

        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
        camera.position.z = 100;

        scene = new THREE.Scene();

        var ambientLight = new THREE.AmbientLight( 0xd3d3d3, 0.4 );
        scene.add( ambientLight );

        var pointLight = new THREE.PointLight( 0xd3d3d3, 0.6 );
        camera.add( pointLight );
        scene.add( camera );

        var onProgress = function ( xhr ) {
            if ( xhr.lengthComputable ) {
                var percentComplete = xhr.loaded / xhr.total * 100;
                console.log( Math.round(percentComplete, 2) + '% downloaded' );
            }
        };
        // model
        var onError = function ( xhr ) {
        };
        var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );

        var loader = new THREE.FBXLoader();
        //loader.load( 'https://rjeet-dev-ed--c.ap5.visual.force.com/resource/1573646962000/threed', function ( object ) {

        loader.load( "{!URLFOR($Resource.threed)}", function ( object ) {
            object.traverse( function ( child ) {
                if ( child instanceof THREE.Mesh ) {
                    //child.material.map = texture;
                }
            } );
            object.scale.set(1,1,1);
            object.position.y = 0;
            object.position.z = 0;
            object.position.x = 0;
            scene.add( object );                

        }, onProgress, onError );
        //alert('init 4');
        renderer = new THREE.WebGLRenderer({            
            alpha: true
        });
        //controls = new THREE.OrbitControls( camera );
        //controls.addEventListener( 'change', render );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMap.enabled = true;
        container.appendChild( renderer.domElement );

        //window.addEventListener( 'resize', onWindowResize, false );

        //alert('hi');


        function onWindowResize() {
            windowHalfX = 1000 / 2;
            windowHalfY = 700 / 2;
            camera.aspect = 1000 / 700;
            camera.updateProjectionMatrix();
            renderer.setSize( 1000, 700 );
        }
        function render() {

            renderer.render( scene, camera );
        }
        function animate() {                
            requestAnimationFrame( animate );                
            var delta = clock.getDelta();                
            if ( mixer ) mixer.update( delta );
            renderer.render( scene, camera );
            stats.update();

        }
        //stats.update();
    }
})
and for Component you can use this -
 
<ltng:require scripts="{!join(',',$Resource.three , $Resource.WebGL ,
                           $Resource.FBXLoader,$Resource.inflate, 
                           $Resource.OrbitControls , $Resource.stats)}"  
                  afterScriptsLoaded="{!c.setup}"/>

Thank You,
www.nubeselite.com
Development | Training | Consulting

Please mark this as solution if your problem is solved.

 
Dylan LynskyDylan Lynsky
In general, the task is not trivial. Rendering images has long since ceased to be a simple matter. There are now regular 3D rendering competitions (https://hum3d.com/3d-artist-competitions/), where the best 3D artists show the painstaking and labor-intensive process of 3D rendering.
bros incetaxbros incetax
Aimir CG is an architectural visualization company based in China, delivering consistent art quality 3D renderings and animations worldwide. We are fast, efficient and always deliver on time. Our professionalism and communication skills make us easy to work with and the end product was nothing short of impressive!