三个JS中的“方位魔方”答案

【问题标题】："Orientation cube" in three JS三个JS中的“方位魔方”
【发布时间】：2023-03-15 15:30:01
【问题描述】：

我想用三个 JS 做一个方向视图立方体。

"View Cube" 正在使用 Orthographic Camera 和 OrthographicTrackballControls 的场景中。

我实际上做的是创建一个视图立方体：

gizmoBox = new THREE.Object3D();

for (var x = -1; x <= 1; x+=1) {
    for (var y = -1; y <= 1; y+=1) {
        for (var z = -1; z <= 1; z+=1) {
            if (/* is a corner coordinate */) {
                corner = new THREE.Mesh(...);
                ...
                gizmoBox.add(corner);
            } else if (/*is a border coordinate*/) {
                edge = new THREE.Mesh( ... );
                ...
                gizmoBox.add(edge);
            } else if (/*is a side coordinate */) {
                side = new THREE.Mesh(...)
                ...
                gizmoBox.add(side);
                /*here, i added some text : FRONT, BACK, ...*/
            }
        }   
    }
}

并将其缩放到相机的右上角：

function render() {
    ...
    var vec = new THREE.Vector3( 0.0145 / camera.zoom, 0.012 / camera.zoom, 0.01 / camera.zoom );
    vec.applyQuaternion( camera.quaternion );
    gizmoBox.position.copy( vec );
    gizmoBox.scale.set(0.0015 / camera.zoom, 0.0015 / camera.zoom, 0.0015 / camera.zoom);
    ...
    renderer.render( scene, camera );
}

然后我想使用视图立方体每个部分的位置（缩放之前）作为场景中的“参考点”来进行旋转。所以我在OrthographicTrackballControls中添加了这个功能。

this.rotateViewCube = function (refPoint) {
    _rotateEnd.copy(refPoint);
    _this.rotateCamera();
};

但它不能正常工作，相机移动但不像我预期的那样。有人作为一个想法？

【问题讨论】：

标签： camera three.js

【解决方案1】：

我自己找到了解决办法。

我从 View Cube 的点击部分获取“参考点”，然后修改 OrthographicTrackballControls 中的默认相机位置（由 position0 引用）。最后我重置了它。

var position = intersects[0].object.refPoint;
controls.position0.copy(position);
controls.reset();

【讨论】：