机器人发福利

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%);  width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: snow url('https://638183.freep.cn/638183/t24/6/stage.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
   
3.     #btnFs { bottom: 30px; color: cyan; border-color: cyan !important; }
   
4.     #player { position: absolute; left: -1000px; }
   
5.     #vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .6; pointer-events: none; }
   
6. </style>
   
7. 
   
8. <div id="papa">
   
9.     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2077537719" autoplay loop></audio>
   
10.     <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/14/51/00/video636364d43e50d.mp4" autoplay loop muted></video>
    
11.     <div id="player"></div>
    
12. </div>
    
13. 
    
14. <script type="importmap">
    
15.     {
    
16.         "imports": {
    
17.             "three": "https://638183.freep.cn/638183/3dev/build/three.module.min.js",
    
18.             "three/addons/": "https://638183.freep.cn/638183/3dev/examples/jsm/"
    
19.         }
    
20.     }
    
21. </script>
    
22. <script type="module">
    
23.     import { THREE, scene, camera, renderer, clock, basic3, click3 } from 'https://638183.freep.cn/638183/3dev/3/3basic.js?v=1.0';
    
24.     import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    
25.     import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
    
26.     import { FS } from 'https://638183.freep.cn/638183/web/ku/FS.js';
    
27.     basic3(papa);
    
28. 
    
29.     renderer.outputEncoding = THREE.sRGBEncoding;
    
30.     const controls = new OrbitControls(camera, renderer.domElement);
    
31. 
    
32.     let mixer, model, startTime = 0, actions = [];
    
33.     const url = 'https://638183.freep.cn/638183/web/3models/RobotExpressive.glb';
    
34. 
    
35.     scene.add(new THREE.AmbientLight());
    
36. 
    
37.     new GLTFLoader().load(url, gltf => {
    
38.         model = gltf.scene;
    
39.         const scale = 0.5;
    
40.         model.scale.set(scale, scale, scale);
    
41.         model.position.y -= 2;
    
42.         scene.add(model);
    
43.         mixer = new THREE.AnimationMixer(model);
    
44.         if (gltf.animations.length > 0) {
    
45.             gltf.animations.forEach(a => actions.push(a));
    
46.             playModel();
    
47.         }
    
48.         animate();
    
49.      });
    
50. 
    
51.     function animate() {
    
52.         requestAnimationFrame(animate);
    
53.         camera.lookAt(0, 0, 0);
    
54.         const delta = clock.getDelta();
    
55.         mixer.update(delta);
    
56.         renderer.render(scene, camera);
    
57.     }
    
58. 
    
59.     function playModel(idx = null) {
    
60.         const playIdx = idx !== null ? idx : Math.floor(Math.random() * actions.length);
    
61.         for (let k = 0; k < actions.length; k ++) {
    
62.             const clip = mixer.clipAction(actions[k]);
    
63.             k === playIdx ? clip.play() : clip.stop();
    
64.         }
    
65.     }
    
66. 
    
67.     aud.onplaying = aud.onpause = () => {
    
68.         aud.paused ? clock.stop() : clock.start();
    
69.     };
    
70. 
    
71.     papa.onmousedown = () => startTime = Date.now();
    
72. 
    
73.     papa.onmouseup = (e) => {
    
74.         if (!click3(model, e)) return;
    
75.             if (Date.now() - startTime < 300) player.click();
    
76.      };
    
77. 
    
78.     papa.onmousemove = (e) => {
    
79.         papa.title = click3(model, e) ? '播放/暂停(Alt+X)' : '';
    
80.         papa.style.cursor = click3(model, e) ? 'pointer' : 'default';
    
81.     };
    
82. 
    
83.     setInterval(playModel, 10000);
    
84. 
    
85.     FS(papa, player);
    
86. </script>

复制代码

马黑黑

本帖：

ThreeJS 动画特效由 GLTF 模型自带，帖子JS代码中检索模型所带的全部动画，每隔十秒随机播放其中的一个动画（可能有重复上一个动画的现象），音乐暂停时动画间隔机制不改变。

播放 .glb 模型动画的相关介绍请查看 《那匹马》 ：https://www.huachaowang.com/foru ... &extra=page%3D1

马黑黑

本帖所使用的机器人模型集成有很多动画，详情请查阅：


    ThreeJS：罗列并运行GLTF模型所有动画

在上述页面运行代码，可以看到页面上方有很多按钮，按钮上面的名称即为模型自带动画的名称

寻梦花园

问好黑黑
欣赏你的精彩

愤怒的葡萄

现在AI有很高的智能啊，阿法尔狗电脑竟然下赢围棋世界冠军柯洁了。

花飞飞

马黑黑 发表于 2025-7-4 13:05
本帖：

ThreeJS 动画特效由 GLTF 模型自带，帖子JS代码中检索模型所带的全部动画，每隔十秒随机播放其中 ...

模型之前有两个贴子里曾出现过，比如万马奔腾，还有飞鸟。。。
这个机器人模型所带的运动更加复杂，动作更多。。。
它舞跳得不错，非常协调，也有难度，应该跟名师学习过。

花飞飞

右键机器人转动滚轮，可以变大或者变小。。。更厉害的是无论大小都一样清晰。。。这就是模型的优势所在吧

花飞飞

马黑黑 发表于 2025-7-4 13:10
本帖所使用的机器人模型集成有很多动画，详情请查阅：

看了一下，很壮观的一排按纽。。。
这么多分开的动作，在贴子里合并集为一体了。。。
原来是JS代码检索出所有动画，再按10秒进行播放。。效果完美

梦江南

太厉害了，这机器人是用代码画出来，不可思议！

梦江南

点击机器人还会缩小，跳舞，打招呼，

杨帆

效果独特，内涵丰富，谢谢马老师经典示范

杨帆

实现了：模型 + 动画 = 精彩无限

杨帆

机器人会跳舞，还发红包，赞一个

杨帆

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

杨帆

请教马老师，“ @keyframes rot { to { transform: rotate(360deg); } }”起什么作用呀

马黑黑

杨帆 发表于 2025-7-4 17:34
请教马老师，“ @keyframes rot { to { transform: rotate(360deg); } }”起什么作用呀

这是多余代码：原理设计有一个旋转的图片，后面拿掉了，CSS对应语句没有拿掉。

马黑黑

杨帆 发表于 2025-7-4 17:31
“不同的模型其内部机制有所不同，模型场景的缩放系数需要调整，模型场景在ThreeJS场景中的初始位置、初 ...

就是位置、旋转、缩放相关

马黑黑

梦江南 发表于 2025-7-4 15:49
点击机器人还会缩小，跳舞，打招呼，

它有很多个动作，都集成在模型里

马黑黑

花飞飞 发表于 2025-7-4 13:57
看了一下，很壮观的一排按纽。。。
这么多分开的动作，在贴子里合并集为一体了。。。
原来是J ...