1

我是three.js 和计算机图形学的新手。所以我面临着非常简单的问题。我只想旋转立方体和轴设置为静态。如何实现它，因为现在立方体和轴正在旋转？也许我必须使用另一种类型的旋转？

我的代码：

<html>
    <body>
        <script type="text/javascript" src="../libs/three.js"></script>
        <script type="text/javascript" src="../libs/TrackBallControls.js"></script>

        <script>
            var camera, controls, secene, render;

            init();
            animate();

            function init() {
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
                camera.position.z = 500;

                var debugaxis = function(axisLength){
                    //Shorten the vertex function
                    function v(x,y,z){ 
                            return new THREE.Vector3(x,y,z); 
                    }

                    //Create axis (point1, point2, colour)
                    function createAxis(p1, p2, color){
                            var line, lineGeometry = new THREE.Geometry(),
                            lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
                            lineGeometry.vertices.push(p1, p2);
                            line = new THREE.Line(lineGeometry, lineMat);
                            scene.add(line);
                    }

                    createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000);
                    createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00);
                    createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
                };

                controls = new THREE.TrackballControls(camera);
                controls.addEventListener('change', render);

                scene = new THREE.Scene();

                debugaxis(200);

                var geometry = new THREE.CubeGeometry(100,100,100);
                var material = new THREE.MeshNormalMaterial({ wireFrame: false, transparent: true, opacity: 0.5});

                var mesh = new THREE.Mesh( geometry, material);
                scene.add(mesh);

                for (var f = 0, fl = mesh.geometry.faces.length; f < fl; f++) {
                var face = mesh.geometry.faces[f];
                var centroid = new THREE.Vector3(0, 0, 0);
                centroid.add(mesh.geometry.vertices[face.a]);
                centroid.add(mesh.geometry.vertices[face.b]);
                centroid.add(mesh.geometry.vertices[face.c]);
                centroid.divideScalar(3);


                var arrow = new THREE.ArrowHelper(
                        face.normal,
                        centroid,
                        25,
                        0x3333FF,
                        5,
                        5);
                mesh.add(arrow);

            }

                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight)
                document.body.appendChild(renderer.domElement);           
            }

            function animate(){
                requestAnimationFrame(animate);
                controls.update();
            }

            function render(){
                renderer.render(scene, camera);
            }
        </script>    
    </body>
</html>
4

1 回答 1

0

我通过只旋转一个立方体解决了这个问题。在这个例子中，我可以用鼠标旋转立方体。使用轨迹球动画是不可能实现的，因为你正在旋转相机（正如 HenryHey 所说）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - geometry - cube</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="../libs/three.js"></script>

        <script src="../libs/Projector.js"></script>
        <script src="../libs/CanvasRenderer.js"></script>

        <script src="../libs/stats.js"></script>

        <script>

            var container, stats;

            var camera, scene, renderer;

            var cube;

            var targetRotation = 0;
            var targetRotationOnMouseDown = 0;

            var mouseX = 0;
            var mouseXOnMouseDown = 0;

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

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                var info = document.createElement( 'div' );
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';
                info.innerHTML = 'Drag to spin the cube';
                container.appendChild( info );

                var debugaxis = function(axisLength){
                    //Shorten the vertex function
                    function v(x,y,z){ 
                            return new THREE.Vector3(x,y,z); 
                    }

                    //Create axis (point1, point2, colour)
                    function createAxis(p1, p2, color){
                            var line, lineGeometry = new THREE.Geometry(),
                            lineMat = new THREE.LineBasicMaterial({color: color, lineWidth: 1});
                            lineGeometry.vertices.push(p1, p2);
                            line = new THREE.Line(lineGeometry, lineMat);
                            scene.add(line);
                    }

                    createAxis(v(-axisLength, 0, 0), v(axisLength, 0, 0), 0xFF0000);
                    createAxis(v(0, -axisLength, 0), v(0, axisLength, 0), 0x00FF00);
                    createAxis(v(0, 0, -axisLength), v(0, 0, axisLength), 0x0000FF);
                };

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
                camera.position.y = 100;
                camera.position.z = 500;
                camera.position.x = 100;

                scene = new THREE.Scene();
                debugaxis(200);
                // Cube

                var geometry = new THREE.CubeGeometry( 100, 100, 100 );


                var material = new THREE.MeshNormalMaterial( { wireFrame: false, transparent: true, opacity: 0.5 } );

                cube = new THREE.Mesh( geometry, material );
                cube.position.y = 0;
                cube.position.x = 0;

                 for (var f = 0, fl = cube.geometry.faces.length; f < fl; f++) {
                    var face = cube.geometry.faces[f];
                    var centroid = new THREE.Vector3(0, 0, 0);
                    centroid.add(cube.geometry.vertices[face.a]);
                    centroid.add(cube.geometry.vertices[face.b]);
                    centroid.add(cube.geometry.vertices[face.c]);
                    centroid.divideScalar(3);


                    var arrow = new THREE.ArrowHelper(
                            face.normal,
                            centroid,
                            30,
                            0x3333FF,
                            7,
                            7);
                    cube.add(arrow);
                }

                scene.add( cube );

                // Plane

                var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
                geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

                var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );

                //plane = new THREE.Mesh( geometry, material );
                //scene.add( plane );

                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor( 0xf0f0f0 );
                //renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

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

                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );

                //

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

            }

            function onWindowResize() {

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

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

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

            }

            //

            function onDocumentMouseDown( event ) {

                event.preventDefault();

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );

                mouseXOnMouseDown = event.clientX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;

            }

            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;

                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;

            }

            function onDocumentMouseUp( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentMouseOut( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );

            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;

                }

            }

            function onDocumentTouchMove( event ) {

                if ( event.touches.length === 1 ) {

                    event.preventDefault();

                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

                }

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
                renderer.render( scene, camera );

            }

        </script>

    </body>
</html>
于 2015-05-09T07:47:02.910 回答