Three.js перемещает расстояние камеры до объекта на z

Question

Three.js перемещает расстояние камеры до объекта на z

1

Я orbitControls PerspectiveCamera с orbitControls вокруг объекта. Теперь я хочу переместить камеру ближе к объекту, но сохранить фактическое вращение.

Моя координата для задания расстояния до объектов выводится как [0,0,100].

Но моя CameraPosition - [-500, 96, 1772]. Как я могу сохранить "поворот", но переместите камеру ближе к объекту на расстояние 100.

Нужно ли использовать getAzimuthalAngle() или getPolarAngle()?

vinni 06 дек. 2017, в 13:46

Источник

Теги:

javascript

three.js

1 ответ

Ещё вопросы

prisoner849 · Accepted Answer · 2017-12-06T12-04-00.000Z

Например, например, если объект объекта находится не в центре сцены:

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>