那匹马

马黑黑 · 发表于 2025-7-4 07:23

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

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

x

运动模式：

马黑黑 · 发表于 2025-7-4 07:24

代码：

<div id="tz" style="margin:auto;width:740px;height:560px;position:relative;">
<div id="msgDiv" style="margin:8px auto;padding:6px;position:absolute;z-index:3;">
<span>运动模式：</span>
</div>
</div>
<script type="importmap">
{
"imports": {
"three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
"three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
}
}
</script>
<script type="module">
import { THREE, scene, camera, renderer, clock, basic3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
basic3(tz); // 启动ThreeJS运行环境
renderer.outputEncoding = THREE.sRGBEncoding; // 渲染器启用sRGB编码
const controls = new OrbitControls(camera, renderer.domElement); // 启用轨道控制器
let mixer, actions = [], btns = []; // 混合器、动画数组、按钮
const url = 'https://638183.freep.cn/638183/web/3models/Horse.glb'; // 模型路径
//const url = '/three.js-dev/examples/models/gltf/RobotExpressive/RobotExpressive.glb'
scene.add(new THREE.AmbientLight()); // 环境光
// 加载模型：gltf为模型对象
new GLTFLoader().load(url, gltf => {
const model = gltf.scene; // 模型场景
const scale = 0.01; // 缩放系数
model.scale.set(scale, scale, scale); // 缩放
model.rotateY(Math.PI / 5); // 旋转
model.position.y -= 1; // 下移
scene.add(model); // 添加模型场景到ThreeJS场景
mixer = new THREE.AnimationMixer(model); // 混合器赋值
// 若模型集成有动画：添加到数组、创建交互按钮
if (gltf.animations.length > 0) {
gltf.animations.forEach( (a, k) => {
actions.push(a); // 加到数组
//创建按钮
const btn = document.createElement('button');
btn.style.cssText += 'margin: 4px; padding: 6px;';
btn.value = k;
btn.textContent = a.name;
btn.onclick = () => playModel(k); // 播放指定动画
btns.push(btn);
msgDiv.appendChild(btn);
});
playModel(); // 随机播放动画
}
animate();
});
// 循环播放ThreeJS动画
function animate() {
requestAnimationFrame(animate);
camera.lookAt(0, 0, 0); // 相机总是对准场景中央
const delta = clock.getDelta();
mixer.update(delta);
renderer.render(scene, camera);
}
// 播放模型动画：不指定索引则随机播放
function playModel(idx = null) {
const playIdx = idx !== null ? idx : Math.floor(Math.random() * actions.length);
for (let k = 0; k < actions.length; k ++) {
const clip = mixer.clipAction(actions[k]);
k === playIdx ? (clip.play(), btns[k].disabled = true) : (clip.stop(), btns[k].disabled = false);
}
}
</script>

复制代码

马黑黑 · 发表于 2025-7-4 07:42

本帖最后由马黑黑于 2025-7-4 07:52 编辑

代码中相应的地方已有说明。

需要注意的是：不同的模型其内部机制有所不同，模型场景的缩放系数需要调整，模型场景在ThreeJS场景中的初始位置、初始旋转角度则根据模型的具体情况和展现模型需求而定。

另外，如果是静态模型，左上角运动模式后面的按钮不会出现，反之，如果是动态模型，则，模型中集成的全部动画名称均以按钮的方式罗列出来、点击按钮会运行对应动画。一楼的马，只有一个动画，所以按钮是灰色不可点的。

可以将代码存为自己电脑里的 .html 文档，并将外层div宽高设为更大（例如 1600 * 900），然后用浏览器打开，观感可能更好。但是若替换模型文件，请确保URL源支持跨域，若是本地资源，则请确保你的电脑已经启动了虚拟Web服务且 .html 文档和模型均在Web服务器虚拟目录内。

下面是一个多动画模型的演示例子：ThreeJS：罗列并运行GLTF模型所有动画