three.js - 在three.js中旋转对象

问题描述

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

            <!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>

标签： three.js

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

编辑：

 // 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 );
}

three.js - 在three.js中旋转对象

问题描述

解决方案

推荐阅读