在同一个页面同时运行两个Three.js对象并进行动画处理,可以通过以下步骤实现:
下面是一个示例代码:
// 引入Three.js库
// <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
// 创建场景和渲染器
const scene1 = new THREE.Scene();
const renderer1 = new THREE.WebGLRenderer({ antialias: true });
renderer1.setSize(window.innerWidth / 2, window.innerHeight);
document.body.appendChild(renderer1.domElement);
const scene2 = new THREE.Scene();
const renderer2 = new THREE.WebGLRenderer({ antialias: true });
renderer2.setSize(window.innerWidth / 2, window.innerHeight);
document.body.appendChild(renderer2.domElement);
// 创建相机
const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / 2 / window.innerHeight, 0.1, 1000);
camera1.position.z = 5;
const camera2 = new THREE.PerspectiveCamera(75, window.innerWidth / 2 / window.innerHeight, 0.1, 1000);
camera2.position.z = 5;
// 创建对象
const geometry1 = new THREE.BoxGeometry();
const material1 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube1 = new THREE.Mesh(geometry1, material1);
scene1.add(cube1);
const geometry2 = new THREE.SphereGeometry();
const material2 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const sphere2 = new THREE.Mesh(geometry2, material2);
scene2.add(sphere2);
// 添加动画
function animate() {
requestAnimationFrame(animate);
// 对象1的动画处理
cube1.rotation.x += 0.01;
cube1.rotation.y += 0.01;
// 对象2的动画处理
sphere2.rotation.x += 0.01;
sphere2.rotation.y += 0.01;
// 渲染场景和相机
renderer1.render(scene1, camera1);
renderer2.render(scene2, camera2);
}
// 启动渲染循环
animate();
这段代码创建了两个场景和渲染器,分别渲染两个Three.js对象(一个立方体和一个球体),并为它们添加了旋转动画。最后,通过渲染循环实时更新场景和相机,实现了在同一个页面同时运行两个Three.js对象并进行动画处理。
请注意,以上示例代码仅为演示目的,具体的实现方式可能因项目需求而有所不同。对于更复杂的场景和动画效果,可能需要更多的代码和配置。
领取专属 10元无门槛券
手把手带您无忧上云