在Three.js中，.up属性定义了相机的上方向，这个属性对于确定相机的旋转和场景的渲染至关重要。通过改变.up属性，我们可以控制相机的倾斜角度，从而改变渲染结果。以下是关于如何使用.up属性以及如何通过它实现相机旋转的详细教程和示例代码。
探索Three.js中的.up属性：控制相机的上方向
在Three.js的世界中，相机是我们观察场景的窗口。.up属性，即相机的上方向，决定了相机的姿态和渲染结果。默认情况下，.up沿着Y轴正方向，指向天空。
.up属性的默认值
.up属性的默认值是new THREE.Vector3(0, 1, 0)，意味着相机的顶部指向Y轴正方向。
javascript
console.log('.up默认值', camera.up);改变上方向.up
通过改变.up属性的值，我们可以模拟相机在不同方向上的旋转，从而观察到不同的渲染效果。
示例代码：改变上方向
javascript
// 相机上方向改为沿着Y轴负方向
camera.up.set(0, -1, 0);
// 渲染效果：红色X轴向上
camera.up.set(1, 0, 0);
// 渲染效果：蓝色Z轴向上
camera.up.set(0, 0, 1);注意执行顺序
改变.up属性后，如果相机已经执行了.lookAt()方法，需要重新执行.lookAt()以重新计算相机的姿态。
示例代码：重新计算相机姿态
javascript
camera.lookAt(0, 0, 0);
camera.up.set(0, 0, 1); // 改变up
camera.lookAt(0, 0, 0); // 重新执行lookAt完整示例代码
以下是一个完整的示例，展示如何在Three.js中通过改变.up属性实现相机的旋转。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Camera Up Direction</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const cube = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cube);
camera.position.set(0, 0, 500);
scene.add(camera);
// 改变相机的上方向
camera.up.set(0, 0, 1); // 蓝色Z轴向上
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>在这个示例中，我们创建了一个立方体，并设置了相机的初始位置。通过改变.up属性，我们可以控制相机的旋转方向，实现不同的渲染效果。