Question

我今天一直在尝试使用Three.js，例如我使用mesh.rotation.x += 10;来改变我的网格时遇到了麻烦。

下面的代码渲染一个三角形，相机在onMouseMove左右移动，但在render（）函数内，它无法缩放或旋转网格obj。

欣赏指示。

 <body>
        <div id="container" style="border: #0f0 solid;">

        </div>
        <script type="text/javascript">

            var mouseX = 0, mouseY = 0;

            windowHalfX = window.innerWidth / 2,
            windowHalfY = window.innerHeight / 2;

             // get the DOM element to attach to
            var container = document.getElementById("container");

            // create a WebGL renderer, camera
            // and a scene
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 50, 1e7  );
            var scene = new THREE.Scene();
            var obj;
            var geom = new THREE.Geometry();
            var stats;
            init();
            animate();
            function init(){

                // the camera starts at 0,0,0 so pull it back
                camera.position.z = 400;

                // start the renderer


                // attach the render-supplied DOM element
                container.appendChild(renderer.domElement);


                // create a new mesh with triangle geometry

                // create the sphere's material
                var material = new THREE.MeshLambertMaterial(
                {
                    color: 0x00FF00
                });



                var v1 = new THREE.Vector3(50,0,0);
                var v2 = new THREE.Vector3(50,100,0);
                var v3 = new THREE.Vector3(0, 50, 0);


                geom.vertices.push(new THREE.Vertex(v1));
                geom.vertices.push(new THREE.Vertex(v2));
                geom.vertices.push(new THREE.Vertex(v3));


                geom.faces.push(new THREE.Face3(0,1,2));

                geom.computeFaceNormals();

                obj = new THREE.Mesh(geom, material);


                obj.doubleSided = true;
                obj.rotation.x = 0.1;

                // add the obj to the scene
                scene.addObject(obj);

                // create a point light
                var pointLight = new THREE.PointLight( 0xFFFFFF );

                // set its position
                pointLight.position.x = 0;
                pointLight.position.y = 0;
                pointLight.position.z = 600;
                //pointLight.lookAt(obj);

                // add to the scene
                scene.add(pointLight);
                ambientLight = new THREE.AmbientLight( 0xbbbbbb );
                scene.add(ambientLight);
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                stats.domElement.style.zIndex = 100;
                container.appendChild( stats.domElement );

                // draw!
                renderer.render(scene, camera);
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
                stats.update();
            }

            function onDocumentMouseMove(event) {
                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;
            }

            function render() {
                camera.position.x += ( mouseX - camera.position.x ) * .05;
                camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;

                camera.lookAt( scene.position );

                var time = Date.now() * 0.0015;

                for ( var i = 0; i < scene.objects.length; i ++ ) {
                        scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1 );
                }


                obj.rotation.x += 20;
                renderer.clear();
                renderer.render( scene, camera );
            }

        </script>
    </body>

Answer 1

从r45 scene.addObject(obj);现在必须scene.add(obj);

请参阅Three.js提交日志：

2011 10 06 - r45 - Object / Scene.add *（）和Object / Scene.remove *（）现在是Object / Scene.add（）和Object / Scene.remove（）

Three.js不在渲染（）上缩放或旋转网格

1 个答案: