ThreeJS入门（十一）相机动画
（一）相机位置动画
现实生活中摄影者或者摄影设备可以绕着拍摄对象绕圈进行拍摄，得到的录像好比被拍摄对象在自转。ThreeJS 可以完成此类拍摄方式而且做的更好，方法是令相机在XYZ相应轴上改变位置，例如，在 XOZ 平面上绕Y轴做圆周运动，只需引入一个角度递增机制、再简单地通过正余弦函数计算出 position.x 和 position.z 坐标值，如此便可驱动相机绕着拍摄对象旋转。以下是完整实现代码：
<div style="margin: 10px; position: absolute;">点击页面可暂停/继续动画</div>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';
var scene = new THREE.Scene;
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 绘制拍摄对象 ：一个立方体
// 先定义颜色colors和立方体六个面faces
var colors = ['red', 'orange', 'purple', 'green', 'cyan', 'blue'], faces = [];
var geometry = new THREE.BoxGeometry(); // 创建立方体
// 再依据颜色数组构建六个面并储存到faces数组中
colors.forEach(color => faces.push( new THREE.MeshBasicMaterial({ color: color })));
var mesh = new THREE.Mesh(geometry, faces); // 创建立方体实例
// 立方体在XYZ轴上的初始姿势
mesh.rotateX(Math.PI / 4); // X轴
mesh.rotateY(Math.PI / 1.5); // Y轴
mesh.rotateZ(Math.PI / 3); // Z轴
scene.add(mesh); // 立方体加入到场景
var angle = 0; // 相机初始角度
// 创建相机动画
var animate = () => {
requestAnimationFrame(animate); // 动画循环
var delta = clock.getDelta(); // 获取动画时钟上下帧时间差
angle = (angle + delta) % 360; // 角度由时间差驱动并取360的余数
camera.position.x = 5 * Math.sin(angle);
camera.position.z = 5 * Math.cos(angle); // 相机在Z轴上的位置
camera.lookAt(0,0,0); // 相机始终聚焦场景中央
renderer.render(scene, camera); // 渲染效果
};
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
document.onclick = () => clock.running ? clock.stop() : clock.start();
animate();
</script>
相机在XYZ轴上的单轴或双轴或三轴位置的动态改变都会得到不同的拍摄效果，但若创建更强大的相机动画，还得借用第三方库，例如 ThreeJS 自己封装的 OrbitControls 模块 ——
（二）相机轨道动画
我们在ThreeJS精灵章节中的一个演示实例使用过相机轨道控制器。需要导入 OrbitControls.js 模块，导入方式需要做额外的结构封装。相机轨道控制器一旦成功导入，我们就可以真正全方位地查看场景的每一个点 —— 实际上是以极大自由度的方式变换相机的位置。下例将演示这一点：
<div style="margin: 10px; position: absolute;">可以手动翻转场景</div>
<!-- 标准化模块系统 ：创建可靠的模块导入结构 -->
<script type="importmap">
{
"imports": {
"three": "https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js",
"three/examples/jsm/": "https://unpkg.ihwx.cn/three@0.176.0/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three'; // 导入ThreeJS核心库
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // 导入相机轨道控制库
const scene = new THREE.Scene;
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器
controls.autoRotate = true; // 启用轨道自转
// 圆球 ：半径0.5，法线网格材质
const ball = new THREE.Mesh(
new THREE.SphereGeometry(0.5),
new THREE.MeshNormalMaterial()
);
// 圆盘 ：半径2、16边，法线网格材质（线框化、双面渲染）
const pan = new THREE.Mesh(
new THREE.CircleGeometry(2, 16),
new THREE.MeshNormalMaterial({ wireframe: true, side: THREE.DoubleSide })
);
scene.add(ball, pan); // 图像都加入到场景中
const animate = () => {
requestAnimationFrame(animate);
controls.update(); // 更新轨道控制器令其自转
renderer.render(scene, camera);
};
window.onresize = () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
animate();
</script>
相机轨道控制器还可以有更多的操作，相关内容可参阅 相机控件OrbitControls 并可在其上查找 OrbitControls 更多的资料。而相机位置动画，可点击 ThreeJS中文网·相机动画（Sprite） 查看。另外，相机动画还有更多的实现手段，有余力的朋友可以自行扩展。
前一篇: ThreeJS入门（十）精灵
下一篇: ThreeJS后期处理
发表评论:
评论列表 [1条]
#1 | 小白 于 2025-5-31 16:32 发布: 相机有两种运动方式，这个圆球和圆盘的组合与众不同，非常好看，帅气。。
