Question

我遇到的情况是，我使用OrbitControls在房间/空间中只能看到有限的视图。 OrbitControls获取方位角和极角的最小值/最大值以控制视图。与“全景/立方体”示例（https://threejs.org/examples/?q=cube#webgl_panorama_cube）相比，OrbitControls的目标靠近相机以实现正确的视图。

在一种情况下，这可以正常工作。在其他情况下，这不起作用。原因是由于对象的放置，起始方位角为-179.999度。我还没有找到一种方法来告诉orbitcontrol在-179.999 +/- 20度之间的方位角。

我已经对@Αλέκος（Is angle in between two angles）算法进行了一些实验，看来我可以计算出正确的角度（尚未完全实现）。为此，我将设置一个方位角和一个增量来代替min / max（并更改OrbitControls代码）。

是否有更简单的解决方案建议？谢谢！

测试代码：

var scene = new THREE.Scene();
var orbitControls;
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
});

var geometry = new THREE.BoxGeometry(1, 1, 1);

// colors
red = new THREE.Color(1, 0, 0);
green = new THREE.Color(0, 1, 0);
blue = new THREE.Color(0, 0, 1);
var colors = [red, green, blue];

console.log("FACES", geometry.faces.length)

for (var i = 0; i < 3; i++) {
    geometry.faces[4 * i].color = colors[i];
    geometry.faces[4 * i + 1].color = colors[i];
    geometry.faces[4 * i + 2].color = colors[i];
    geometry.faces[4 * i + 3].color = colors[i];
}

geometry.faces[0].color = new THREE.Color(1, 1, 1);
geometry.faces[4].color = new THREE.Color(1, 1, 1);
geometry.faces[8].color = new THREE.Color(1, 1, 1);

var cube = new THREE.Mesh(geometry, material);
cube.position.x = 0;
cube.position.y = 4;
cube.position.z = 44;
console.log("CUBE", cube.position);
var cubeAxis = new THREE.AxesHelper(20);
cube.add(cubeAxis);
scene.add(cube);

camera.position.x = 0.8;
camera.position.y = 4.5;
camera.position.z = 33;

orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.enablePan = false;
orbitControls.enableZoom = false;
orbitControls.minPolarAngle = (90 - 10) * Math.PI / 180;
orbitControls.maxPolarAngle = (90 + 10) * Math.PI / 180;

// These values do not work:
orbitControls.maxAzimuthAngle = 200 * Math.PI / 180;
orbitControls.minAzimuthAngle = 160 * Math.PI / 180;

orbitControls.target.x = 0.8;
orbitControls.target.y = 4.5;
orbitControls.target.z = 33.1;

orbitControls.enabled = true;

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

    if (orbitControls) {

        orbitControls.update();
    }

    renderer.render(scene, camera);
    // console.log("orbitControls", "azi", orbitControls.getAzimuthalAngle() * 180 / Math.PI);
};

animate();

Three.js OrbitControls，方位角接近+/- 180度

0 个答案: