请用threejs写一段网页代码,2个物体ab,a缓慢旋转60度停止,然后b缓慢旋转60度停止,然后静止1秒。然后b反向缓慢旋转60度停止,然后a反向缓慢旋转60度,然后静止1秒。然后再重复上述动作,循环往复
时间: 2024-04-30 07:25:15 浏览: 10
以下是使用Three.js实现该动画的代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js Animation</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer;
let a, b;
let angle = 0;
let isForward = true;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
a = new THREE.Mesh(geometry, material);
b = new THREE.Mesh(geometry, material);
a.position.x = -1.5;
b.position.x = 1.5;
scene.add(a);
scene.add(b);
}
function animate() {
requestAnimationFrame(animate);
if (angle >= 60 || angle <= -60) {
isForward = !isForward;
angle = 0;
setTimeout(() => {
a.rotation.y = 0;
b.rotation.y = 0;
}, 1000);
}
angle += isForward ? 0.5 : -0.5;
a.rotation.y = angle * Math.PI / 180;
b.rotation.y = -angle * Math.PI / 180;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
```
该代码使用了Three.js库来创建场景、相机、渲染器以及两个方块物体a、b。在动画循环中,我们将物体a和b的旋转角度根据时间逐渐变化,并且添加了一个判断条件,当旋转角度超过60度或者小于-60度时,将标记isForward反转,并将旋转角度恢复为0度,同时让物体a和b停止旋转1秒钟后再开始下一轮旋转。