当我们踏入Three.js的奇妙世界，仿佛打开了一扇通往无限可能的大门。在这里，我们可以赋予静止的模型以生命，让它们在虚拟空间中自由地舞动。而这一切，都始于我们对相机动画的掌控。
想象一下，你正站在一片广阔的工厂之上，脚下是错落有致的建筑群。你的目光如同飞鸟，自由地在天空中翱翔，时而盘旋上升，时而俯冲下降。这就是Three.js带给我们的魔法——通过相机动画，我们能够创造出令人叹为观止的视觉体验。
相机直线运动：穿越虚拟空间
设想你正驾驶着一辆未来的飞行器，穿梭在城市的高楼大厦之间。随着你的前进，眼前的景象不断变换，这就是相机直线运动的魅力。在Three.js中，我们可以通过简单地改变相机的.position属性，实现这种效果。
javascript
function render() {
camera.position.z -= 0.1; // 相机沿Z轴移动
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();相机圆周运动：环绕观察
现在，让我们换个角度，想象自己正围绕着一座高塔旋转。随着你的视线转动，塔的每一面都逐渐展现在你的眼前。这就是相机圆周运动带来的魔力。
javascript
let angle = 0;
const R = 100;
function render() {
angle += 0.01;
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();.lookAt()：凝视的艺术
但是，仅仅移动相机是不够的。我们还需要控制相机的视线，让它始终指向我们感兴趣的点。这就是.lookAt()方法的神奇之处。它让我们的相机不仅仅是一个冷冰冰的观察者，而是一个有情感、有焦点的艺术家。
javascript
function render() {
angle += 0.01;
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
camera.lookAt(scene.position); // 相机始终指向原点
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();完整示例：创造你的魔法
将这些魔法组合在一起，我们就可以创造出一个完整的动画效果。想象一下，你正站在一个巨大的舞台之上，而这个舞台正缓缓地旋转，让你能够从每一个角度欣赏到它的美丽。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Camera Animation Magic</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "https://threejs.org/build/three.module.js",
"three/addons/": "https://threejs.org/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
let angle = 0;
const R = 100;
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);
scene.add(new THREE.AxisHelper(200)); // 添加坐标轴辅助线
function render() {
angle += 0.01;
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
camera.lookAt(scene.position); // 相机始终指向原点
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>