Three.js-圍繞點旋轉球體，同時保持球體的傾斜軸固定

Question

為了模擬球體同時繞某個點和其自身的軸旋轉，我創建了一個所謂的軸心（Object3D），並將球體作為其子對象添加，並使它們均繞其自身的軸旋轉。 這是我從網絡中某個地方得到的一個想法。

但是，鑒於球體代表地球，並且地球具有固定的軸向傾斜度，因此這種方法被證明是有缺陷的。 軸向傾斜只是基於圍繞樞軸的旋轉而改變。

我做了一些繪圖以可視化問題：

錯誤：

正確：

這是我使用的代碼：

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 ），然后通過向容器的位置添加方向向量來設置容器的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 個解決方案

解決方案1
0 2016-11-09 11:30:17

Three.js-圍繞點旋轉球體，同時保持球體的傾斜軸固定

問題描述

1 個解決方案

解決方案1 0 2016-11-09 11:30:17

解決方案1
0 2016-11-09 11:30:17