我对更改camera.lookAt和camera.up向量对three.js有什么影响感到困惑。 在这个jsfiddle中,我有camera.up = new THREE.Vector3(0,0,1); ,但是当我更新控件时,对象的旋转发生了怪异的变化。 那么,相机的LookAt和向上方向有什么区别?
var camera, scene, renderer, geometry, material, mesh;
init();
render();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 10;
camera.position.y = 5;
// What effect does this have?
camera.up = new THREE.Vector3(0, -1, 0);
camera.lookAt(0,0,0);
scene.add(camera);
var axisHelper = new THREE.AxisHelper(5);
scene.add(axisHelper);
var gridHelper = new THREE.GridHelper(10, 1);
scene.add(gridHelper);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function render() {
renderer.render(scene, camera);
}
答案 0 :(得分:1)
查看相机在特定方向上的指向。向上旋转照相机,同时仍朝该方向看。默认的向上值为0,1,0,这是正常的(相机的向上与天空相同)。但是,如果要旋转摄像机,则可以向上更改,例如up = 1,0,0会将摄像机向右旋转90度
html, body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
}
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 10, 20);
class UpGUIHelper {
constructor(camera) {
this.camera = camera;
this.angle = 0;
}
get value() {
return this.angle;
}
set value(v) {
this.angle = v;
const r = THREE.Math.degToRad(v);
this.camera.up.set(Math.sin(r), Math.cos(r), 0);
}
}
function updateCamera() {
camera.lookAt(0,0,0);
camera.updateProjectionMatrix();
}
const gui = new GUI();
const upGUIHelper = new UpGUIHelper(camera);
gui.add(upGUIHelper, 'value', -180, 180).name('angle').onChange(updateCamera);
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();
const scene = new THREE.Scene();
scene.background = new THREE.Color('black');
{
const planeSize = 40;
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
const repeats = planeSize / 2;
texture.repeat.set(repeats, repeats);
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
map: texture,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.rotation.x = Math.PI * -.5;
scene.add(mesh);
}
{
const cubeSize = 4;
const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
const mesh = new THREE.Mesh(cubeGeo, cubeMat);
mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
scene.add(mesh);
}
{
const sphereRadius = 3;
const sphereWidthDivisions = 32;
const sphereHeightDivisions = 16;
const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
const mesh = new THREE.Mesh(sphereGeo, sphereMat);
mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
scene.add(mesh);
}
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>
注意:向上位于世界空间中,因此(1,0,0)仅当您向下看Z轴时才将摄像机向右旋转。若要查看此问题,请在场景上拖动鼠标,直到摄像机向左或向右看90度,然后拖动滑块。您会注意到所有发生的都是相机翻转。
如果您希望能够按照外观的方式控制相机的旋转,则将相机作为其他对象的子对象可能更容易。然后,您可以与该其他对象一起调用lookAt
,只需调整相机上的rotation.z即可。
const cameraMount = new THREE.Object3D()
scene.add(cameraMount);
cameraMount.add(camera);
cameraMount.position.set(0, 10, 20);
// point camera backward because `lookAt` has inconstant
// behavior. For Cameras it looks toward -Z. For non
// cameras it looks toward +Z
camera.rotation.y = Math.PI;
const controls = new OrbitControls(cameraMount, canvas);
controls.target.set(0, 5, 0);
controls.update();
现在,让OrbitControls移动cameraMount,而不是摄像机。这使我们可以相对于底座旋转摄像机。我们还可以调用cameraMount.lookAt
对准相机。
html, body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
}
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
class DegRadHelper {
constructor(obj, prop) {
this.obj = obj;
this.prop = prop;
}
get value() {
return THREE.Math.radToDeg(this.obj[this.prop]);
}
set value(v) {
this.obj[this.prop] = THREE.Math.degToRad(v);
}
}
const gui = new GUI();
gui.add(new DegRadHelper(camera.rotation, 'z'), 'value', -180, 180).name('cam.rot.z');
const scene = new THREE.Scene();
scene.background = new THREE.Color('black');
const cameraMount = new THREE.Object3D()
scene.add(cameraMount);
cameraMount.add(camera);
cameraMount.position.set(0, 10, 20);
// point camera backward because `lookAt` has inconstant
// behavior. For Cameras it looks toward -Z. For non
// cameras it looks toward +Z
camera.rotation.y = Math.PI;
const controls = new OrbitControls(cameraMount, canvas);
controls.target.set(0, 5, 0);
controls.update();
{
const planeSize = 40;
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejsfundamentals.org/threejs/resources/images/checker.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
const repeats = planeSize / 2;
texture.repeat.set(repeats, repeats);
const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
const planeMat = new THREE.MeshPhongMaterial({
map: texture,
side: THREE.DoubleSide,
});
const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.rotation.x = Math.PI * -.5;
scene.add(mesh);
}
{
const cubeSize = 4;
const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
const cubeMat = new THREE.MeshPhongMaterial({color: '#8AC'});
const mesh = new THREE.Mesh(cubeGeo, cubeMat);
mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
scene.add(mesh);
}
{
const sphereRadius = 3;
const sphereWidthDivisions = 32;
const sphereHeightDivisions = 16;
const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
const sphereMat = new THREE.MeshPhongMaterial({color: '#CA8'});
const mesh = new THREE.Mesh(sphereGeo, sphereMat);
mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
scene.add(mesh);
}
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render() {
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>