如何在Three.js中绕立方体旋转球体

天文小姐

我不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>

煞车箱

在这种情况下，我建议使用一个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);
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。