Threejs幼儿园几何体喷泉动画代码

马黑黑 · 发表于 2025-5-7 20:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ThreeJS示例：方块体和球体运动</title>
</head>
<body style="margin: 0;">
<script type="importmap">
{
"imports": {
"three": "https://esm.sh/three@0.176.0?target=es2022",
"three/addons/": "https://esm.sh/three@0.176.0/addons/"
}
}
</script>
<script type="module">
// 导入 three 相关模块
import * as THREE from 'three'; // 主库
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 相机控制库
import { RapierPhysics } from 'three/addons/physics/RapierPhysics.js'; // 物理引擎库
let camera, scene, renderer; // 相机、场景、渲染器变量
let physics, position; // 物理模拟对象实例话对象、位置向量变量
let boxes, spheres; // 方块体、球体变量
init(); // 运行程序主函数
// 主函数：异步运行
async function init() {
// 引入RapierPhysics库并初始化
physics = await RapierPhysics();
// 用于设置物体位置的向量
position = new THREE.Vector3();
// 初始化场景、相机和渲染器
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(- 1, 1.5, 2);
camera.lookAt(0, 0.5, 0);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x666666); // 场景背景色
// 添加光源
const hemiLight = new THREE.HemisphereLight(); // 半球光
scene.add(hemiLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 3); // 方向光
dirLight.position.set(5, 5, 5); // 方向光位置
dirLight.castShadow = true; // 允许产生阴影
dirLight.shadow.camera.zoom = 2; // 阴影缩放
scene.add(dirLight);
// 添加地板
const floor = new THREE.Mesh(
new THREE.BoxGeometry(10, 5, 10),
new THREE.ShadowMaterial({color: 0x444444})
);
floor.position.y = - 2.5;
floor.receiveShadow = true;
floor.userData.physics = {mass: 0}; // 质量为 0
scene.add(floor);
// 初始化材质
const material = new THREE.MeshLambertMaterial();
const matrix = new THREE.Matrix4();
const color = new THREE.Color();
// 初始化盒子实例化网格
const geometryBox = new THREE.BoxGeometry(0.075, 0.075, 0.075);
boxes = new THREE.InstancedMesh(geometryBox, material, 400);
boxes.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // 每帧更新
boxes.castShadow = true;
boxes.receiveShadow = true;
boxes.userData.physics = {mass: 1}; // 质量为 1
scene.add(boxes);
// 随机生成盒子的位置和颜色
for (let i = 0; i < boxes.count; i ++) {
matrix.setPosition( Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5 );
boxes.setMatrixAt(i, matrix);
boxes.setColorAt(i, color.setHex( 0xffffff * Math.random() ));
}
// 初始化球体实例化网格
const geometrySphere = new THREE.IcosahedronGeometry(0.05, 4);
spheres = new THREE.InstancedMesh(geometrySphere, material, 400);
spheres.instanceMatrix.setUsage(THREE.DynamicDrawUsage); // 每帧更新
spheres.castShadow = true;
spheres.receiveShadow = true;
spheres.userData.physics = {mass: 1}; // 质量为 1
scene.add(spheres);
// 随机生成球体的位置和颜色
for (let i = 0; i < spheres.count; i ++ ) {
matrix.setPosition(Math.random() - 0.5, Math.random() * 2, Math.random() - 0.5);
spheres.setMatrixAt(i, matrix);
spheres.setColorAt(i, color.setHex( 0xffffff * Math.random() ));
}
// 将场景添加到物理引擎
physics.addScene(scene);
// 初始化渲染器和性能监控
renderer = new THREE.WebGLRenderer({antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate); // 循环调用动画函数
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement );
// 初始化控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.y = 0.5;
controls.update();
// 每隔1/60秒随机改变盒子和球体的位置
setInterval( () => {
let index = Math.floor(Math.random() * boxes.count);
position.set(0, Math.random() + 1, 0);
physics.setMeshPosition(boxes, position, index);
index = Math.floor(Math.random() * spheres.count);
position.set(0, Math.random() + 1, 0);
physics.setMeshPosition(spheres, position, index);
}, 1000 / 60);
}
// 运行动画函数
function animate() {
renderer.render(scene, camera);
}
</script>
</body>
</html>