使用 ThreeJs 制作一个旋转的立方体，然后录制它沿着Z轴旋转一圈。代码如下：
<html>
<head>
<meta charset="UTF-8">
<!-- <script src="http://threejs.org/build/three.js"></script>-->
<!-- <script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
<script src="ThreeJS/three.js"></script>
<script src="ThreeJS/jquery.js"></script>
<script src="CCapture//CCapture.all.min.js"></script>
</head>
<body>
<script>
// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true
});
// 设置渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建红色立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
transparent: true,
opacity: 0.8
});
const cube = new THREE.Mesh(geometry, material);
// 添加绿色边框
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
color: 0x00ff00
}));
// 组合对象
const cubeWithEdges = new THREE.Group();
cubeWithEdges.add(cube);
cubeWithEdges.add(line);
scene.add(cubeWithEdges);
// 设置相机角度
camera.position.set(5, 5, 5); // 45°倾斜视角[^1]
camera.lookAt(0, 0, 0);
// 初始化捕获器（以 WebM 格式为例）
const capturer = new CCapture({
format: 'webm',
framerate: 30,
verbose: true
});
// 开始捕获
capturer.start();
let cap=true;
console.log("start");
animate();
// 动画循环
function animate() {
if (cubeWithEdges.rotation.z<Math.PI * 2) {
requestAnimationFrame(animate);
// Z轴旋转
cubeWithEdges.rotation.z += 0.01;
renderer.render(scene, camera);
// 捕获当前帧
capturer.capture(renderer.domElement);
} else {
if (cap==true) {
capturer.stop();
capturer.save();
cap=false;
}
}
}
</script>
</body>
</html>
上述代码生成的视频：
完整的代码和JS文件下载：