我在对象周围用orbitControls
旋转PerspectiveCamera
。现在,我想将摄像机移近对象,但要保持实际旋转。
我的坐标设置到对象的距离为[0,0,100]。
但是我的摄影机是[-500,96,1772]。我该如何保持"旋转",但将相机更靠近物体移至100的距离。
我需要使用getAzimuthalAngle()
或getPolarAngle()
?
例如,如果您对象不在场景的中心:
camera.position.sub(obj.position).setLength(100).add(obj.position);
如果对象在中心:
camera.position.setLength(100);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(25, 0, 100);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(100, 100));
var obj = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10), new THREE.MeshBasicMaterial({
color: "red",
wireframe: true
}));
obj.position.set(25, 0, 0);
scene.add(obj);
controls.target.copy(obj.position);
controls.update();
stepCloser.addEventListener("click", onClick, false);
function onClick() {
camera.position.sub(obj.position).setLength(100).add(obj.position);
}
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<button id="stepCloser" style="position: absolute;">
100 units to the object
</button>
这将起作用。我试图通过此代码段加载GLTF模型。
loader.load('./demo-models/model-1/scene.gltf', function (gltf) {
gltf.position.x -= 60
scene.add(gltf.scene);
});
但这没有解决。因此,在调试一段时间后,我意识到我可以使用透视摄像机的某些参数来玩耍。最初,第一个论点是75个单位,这使我的对象离屏幕过远,我不得不放大直到可以清晰的视图。一些代码调整,当我将其设置为1时,它的作用最好。
var camera = new THREE.PerspectiveCamera(1, window.innerWidth / window.innerHeight, 0.1, 1000);