在three.js中旋转对象

debugcn 发表于 Dev

开发资源

我的物体和照明的小问题。当我旋转我的物体时，光会随着我的物体一起移动。我希望光线是静态的。灯光是否因为我向渲染器添加了场景而移动？我不知道如何将我的对象添加到渲染器，所以我尝试将场景添加到渲染器。那是导致问题的原因吗？

            <!DOCTYPE html>
            <html>
                <head>
                    <meta charset=utf-8>
                    <title>THEE JS BOX APP</title>
                    <style>
                        body {
                            margin: 0;
                            width: 100%;
                            height: 100%;
                            font-size: 0;
                            overflow: hidden;
                            display: flex;
                        }

                    </style>
                </head>
                <body>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                    <script src="js/three.js"></script>
                    <script src="js/OrbitControls.js"></script>
                    <script src="js/OBJloader.js"></script>
                    <script>

                    $(document).ready(function() {


                        // CREATING AN EMPTY SCENE
                        var scene = new THREE.Scene();
                        // CAMERA
                        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
                        camera.position.z = 150;

                        // ORBIT CONTROL
                        var controls = new THREE.OrbitControls( camera );


                        // RENDERER
                        var renderer = new THREE.WebGLRenderer();
                        renderer.setClearColor("#000000");

                        //************** SETTING SIZE FOR RENDERER *******************//

                        renderer.setSize( window.innerWidth ,window.innerHeight );
                        //renderer.setSize( 550, 297);

                        //************** END-OF-SETTING SIZE FOR RENDERER *******************//
                        renderer.shadowMap.enabled = true;
                        renderer.shadowMap.type = THREE.PCFShadowMap;


                        // APPEND RENDERER TO DOM
                        document.body.appendChild( renderer.domElement );

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

                        function onWindowResize(){

                            camera.aspect = window.innerWidth / window.innerHeight;
                            camera.updateProjectionMatrix();

                            renderer.setSize( window.innerWidth, window.innerHeight );

                        }

                        // instantiate a loader
                        var loader = new THREE.OBJLoader();

                        // load a resource
                        loader.load(
                            // resource URL
                            'img/logovoivode1.obj',
                            // called when resource is loaded
                            function ( object ) {

                                scene.add( object );

                            },
                            // called when loading is in progresses
                            function ( xhr ) {

                                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                            },
                            // called when loading has errors
                            function ( error ) {

                                console.log( 'An error happened' );

                            }
                        );

                        // ***************************** LIGHTING **********************************//

                        var ambientlight = new THREE.AmbientLight( 0xa6a6a6, 0.25 );
                        scene.add( ambientlight );


                        var dirlight = new THREE.DirectionalLight( 0xfffff, 0.8, 500 );
                        dirlight.target = scene;
                        scene.add(dirlight);
                        scene.add(dirlight.target);

                        var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
                        pointLight.position.set( 0, 100, 50 );
                        scene.add( pointLight );

                        var sphereSize = 1;
                        var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
                        scene.add( pointLightHelper );







                        // ************************ END-OF-LIGHTING *****************************//



                        // CREATING A BOX
                        //var geometry = new THREE.BoxGeometry(1, 1, 1);
                        //var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
                        //var cube = new THREE.Mesh( geometry, material);


                        // ADD CUBE TO THE SCENE
                        //scene.add(cube);
                        // ANIMATION LOOP

                        function animate() {
                            requestAnimationFrame( animate );
                            //scene.rotation.x += 0.01;
                            scene.rotation.y += 0.01;
                            renderer.render( scene, camera );
                        }
                        animate();

                    }); 

                    </script>
                </body>
            </html>

摩西·拉古齐尼

注意：您正在旋转场景（其中包含光点），而不是对象。您需要做的是旋转对象，您将获得预期的结果。

编辑：

 // instantiate a loader
var loader = new THREE.OBJLoader();
var myObj;

// load a resource
loader.load(
    // resource URL
    'img/logovoivode1.obj',
    // called when resource is loaded
    function ( object ) {
        myObj = object
        // code;

    },
    //code
);

// ***************************** LIGHTING**********************************//

// code

function animate() {
    requestAnimationFrame( animate );
    myObj.rotation.y += 0.01;
    renderer.render( scene, camera );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。