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