如何在Three.js中繞立方體旋轉球體

Question

我ve seen different options to rotate objects but I don知道如何應用它們。 我對javascript很陌生。 我創建了立方體和球體，並設法使球體繞其自身的軸旋轉，但是我需要它繞立方體旋轉。歡迎任何幫助。 這是我的代碼：

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 100,    window.innerWidth/window.innerHeight, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            camera.position.z = 25;

            var loader = new THREE.TextureLoader();
            var texture = loader.load('crate.jpg');
            var geometry = new THREE.BoxGeometry( 7, 7, 7 );
            var material = new THREE.MeshBasicMaterial({map: texture});
            var cube = new THREE.Mesh(geometry, material);

            cube.rotation.x += 0.6;
            cube.rotation.y += 0.6;

            scene.add( cube );

            var loader = new THREE.TextureLoader();
            var texture = loader.load('earth.jpg');
            var geometry = new THREE.SphereGeometry( 1, 50, 50 );
            var material = new THREE.MeshBasicMaterial( {map: texture} );
            var sphere = new THREE.Mesh( geometry, material );

            scene.add( sphere );

            var render = function () {
                requestAnimationFrame( render );
                sphere.position.set(6, 0, 15);
                sphere.rotation.y += 0.01;
                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

Answer 1

在這種情況下，我建議使用Object3D作為球體的容器。 然后將此容器放置在立方體的位置/中央並旋轉它。

...
var cube = new THREE.Mesh(geometry, material);

cube.rotation.x += 0.6;
cube.rotation.y += 0.6;

scene.add( cube );

...
var sphere = new THREE.Mesh( geometry, material );

sphere.position.set(0,0,15); // offset from center

var sphereContainer = new THREE.Object3D();
sphereContainer.add( sphere );

sphereContainer.position.copy( cube.position ); // optional, in case you've set the position of the cube

scene.add( sphereContainer );

var render = function () {
    requestAnimationFrame( render );

    sphere.rotation.y += 0.01; // rotate around its own axis
    sphereContainer.rotation.y += 0.01; // rotate around cube

    renderer.render(scene, camera);
};

Answer 2

我找到了使之工作的方法。 我使用了rotateAboutWorldAxis函數，它看起來像這樣：

...
sphere.position.set(0,0,15); // offset from center

function rotateAboutWorldAxis(object, axis, angle) {
            var rotationMatrix = new THREE.Matrix4();
            rotationMatrix.makeRotationAxis( axis.normalize(), angle );
            var currentPos = new THREE.Vector4(object.position.x, object.position.y, object.position.z, 1.5);
            var newPos = currentPos.applyMatrix4(rotationMatrix);
            object.position.x = newPos.x;
            object.position.y = newPos.y;
            object.position.z = newPos.z;
            }

並在render函數中輸入：

var yAxis = new THREE.Vector3(0,50,0);
rotateAboutWorldAxis(sphere,yAxis,Math.PI / 180);

如何在Three.js中繞立方體旋轉球體

問題描述

2 個解決方案

解決方案1
0 已采納 2016-10-14 20:04:17

解決方案2
0 2016-10-15 10:27:42

如何在Three.js中繞立方體旋轉球體

問題描述

2 個解決方案

解決方案1 0 已采納 2016-10-14 20:04:17

解決方案2 0 2016-10-15 10:27:42

解決方案1
0 已采納 2016-10-14 20:04:17

解決方案2
0 2016-10-15 10:27:42