Question

为了模拟球体同时围绕某个点和它自己的轴旋转，我创建了一个所谓的枢轴，一个Object3D，并将球体添加为它的子节点，让它们围绕它们自己的轴旋转。这是我从网络某处得到的一个想法。

然而，看到球体代表地球和地球有一个固定的轴向倾斜，这种方法结果证明是有缺陷的。轴向倾斜只是根据枢轴周围的旋转而改变。

我制作了一些图纸来形象化问题：

WRONG：

正确：

这是我使用的代码：

index.php

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <title></title>
        <?php include_once ('php/includes.php'); ?>
    </head>
    <body>
        <section id="container"></section>
        <script>
        $(document).ready(function () {
            new Space();
        });
        </script>
    </body>
</html>

includes.php

<script type="text/javascript" src="js/libs/jquery/jquery.js" ></script>

<script type="text/javascript" src="js/libs/three/three.js" ></script>
<script type="text/javascript" src="js/libs/orbitcontrols/orbitcontrols.js" ></script>

<script type="text/javascript" src="js/shape/Sphere.js" ></script>
<script type="text/javascript" src="js/shape/Plane.js" ></script>
<script type="text/javascript" src="js/Space.js" ></script>

Space.js

var Space = function() {
    this.init();
    this.animate();

    Space.instance = this;
};

Space.instance;

Space.prototype.getInstance = function() {
    return Space.instance;
};

Space.prototype.init = function() {
    this.scene = new THREE.Scene();

    this.width = window.innerWidth;
    this.height = window.innerHeight;

    this.renderer = new THREE.WebGLRenderer({antialias:true});
    this.renderer.setSize(this.width, this.height);
    this.renderer.setClearColor(0x000000);

    this.camera = new THREE.PerspectiveCamera(45, this.width/this.height, 0.1, 10000);
    this.camera.position.set(0, 30, 40);
    this.scene.add(this.camera);

    //this.light = new THREE.PointLight();
    //this.light.position.set(0, 0, 0);
    //this.scene.add(this.light);

    this.pivot = new THREE.Object3D();
    this.scene.add(this.pivot);

    var sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
    var sphereMaterial = new THREE.MeshBasicMaterial();
    sphereMaterial.wireframe = true;
    this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    this.sphere.position.x = 10;
    this.sphere.quaternion.setFromAxisAngle(new THREE.Vector3(0, 0, 1), 23.5*Math.PI/180);
    this.pivot.add(this.sphere);

    var planeGeometry = new THREE.PlaneGeometry(50, 50, 100, 100);
    var planeMaterial = new THREE.MeshBasicMaterial();
    planeMaterial.wireframe = true;
    this.plane = new THREE.Mesh(planeGeometry, planeMaterial);
    this.plane.rotateOnAxis(new THREE.Vector3(0, 1, 1).normalize(), Math.PI);
    this.plane.position.y = -10;
    this.scene.add(this.plane);

    this.axisHelper = new THREE.AxisHelper(5);
    this.scene.add(this.axisHelper);

    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

    $('#container').append(this.renderer.domElement);
    window.addEventListener('resize', this.resize());
};

Space.prototype.resize = function() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;

    this.renderer.setSize(this.width, this.height);
    this.camera.aspect = this.width/this.height;
    this.camera.updateProjectionMatrix();
};

Space.prototype.animate = function() {
    window.requestAnimationFrame(this.animate.bind(this));

    this.pivot.rotation.y += 0.5*(Math.PI/180);

    this.renderer.render(this.scene, this.camera);
    this.controls.update();
};

如何解决这个问题？

Answer 1

作为选项，将带有倾斜轴的球体（例如earth）添加到THREE.Group()对象（earth_container），然后通过添加a设置容器的lookAt（）方向向量到容器的位置。像这样：

earth_container.position.x = -Math.cos(time) * 10;
earth_container.position.z = -Math.sin(time) * 10;
lookAtPos = earth_container.position.clone().add(new THREE.Vector3(0,0,1));
earth_container.lookAt(lookAtPos);

jsfiddle示例

Three.js - 围绕点旋转球体，同时保持球体的倾斜轴固定

1 个答案: