使用THREEJS实现一个可调节档位、可摇头的电风扇

余中越

夏天到了，用Three.js实现一个可以摇头和调节档位的电风扇。主要使用到Blender处理3D模型，用Vite+Typescript搭建项目框架。效果演示：
一、处理模型

1、从爱(bai)给(gei)网下载一个风扇的3D模型，在Blender中打开，给模型贴上图。

2、拆解模型。将风扇模型拆解成按钮、底座、扇叶、头部四个部分，其中按钮共五个，包括四个档位和一个摇头的开关。

3、导出模型。导出GLTF格式模型。

二、场景搭建

1、初始化场景

1. this.scene = new THREE.Scene();
3. /** 摄像机 */
4. this.camera = new THREE.PerspectiveCamera(75, this.sizes.width / this.sizes.height, 0.1, 100);
5. this.camera.position.set(0, 0.8, 1.8);
7. /** 灯光 */
8. this.lightPoint = new THREE.HemisphereLight(0xffffff, 0xffffff, 1 );
9. this.lightPoint.position.set(0, 500, 0);
10. this.scene.add(this.lightPoint);
12. /** 控制器 */
13. this.controls = new OrbitControls(this.camera, this.renderer.domElement);
14. this.controls.enableKeys = false;    // 禁用按键
15. this.controls.enableZoom = false;    // 禁用缩放
16. this.controls.enablePan = false;     // 禁用拖拽
17. this.controls.maxPolarAngle = 1.3;   // 最大垂直旋转角度
18. this.controls.minPolarAngle = 1.3;   // 最小垂直旋转角度
19. this.controls.target = new THREE.Vector3(0, 0.8, 0);

复制代码

2、加载模型

1. import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
3. var gltf: GLTF = await new Promise((resolve, _) => new GLTFLoader().load('./fan.glb', gltf => resolve(gltf)));
4. this.scene.add(gltf.scene);

复制代码

3、绑定风扇按钮

1. this.fan = new Fan(gltf);
3. /** 档位调节按钮 */
4. let btns: Array<[string, Level]> = [
5.         ['Btn_1', Level.one],
6.         ['Btn_2', Level.two],
7.         ['Btn_3', Level.three],
8.         ['Btn_4', Level.zero],
9. ];
10. btns.forEach(([name, level]) => {
11.         let btn = gltf.scene.getObjectByName(name);
12.         if (btn) this.fan.btns.push(new LevelBtn(btn, level));
13. });
15. /** 摇头按钮 */
16. let btn = gltf.scene.getObjectByName("Shake");
17. if (btn) this.fan.btns.push(new ShakeBtn(btn));

复制代码

三、功能实现

1、扇叶旋转

1. function update() {
2.         let leaf = this.obj.scene.getObjectByName("Leaf");
3.         let rotationY = leaf!.rotation.y + Math.PI/10 * this.speed;
4.         while(rotationY > Math.PI * 2) rotationY = rotationY - Math.PI * 2;
5.         leaf!.rotation.y = rotationY;
6.         requestAnimationFrame(() => update());
7. }

复制代码

2、档位调节

1. import { gsap } from 'gsap';
3. function turnLevel(btn: LevelBtn) {
4.         if(btn.state == BtnState.down) return;
5.         this.btns.filter(item => item instanceof LevelBtn).forEach(item => item.up());
6.         btn.down();
7.         if(btn.level !== Level.zero) this.state = State.on;
8.         this.level = btn.level;
9.         gsap.to(this, 3, { speed: this.level });
10. }

复制代码

3、左右摇头

1. let head = this.obj.scene.getObjectByName("Head");
2. let shake = this.obj.scene.getObjectByName("Shake");
3. let leaf = this.obj.scene.getObjectByName("Leaf");
4. let rotationZ = head!.rotation.z + Math.PI / 1000 * this.shakeDir;
5. if(Math.abs(rotationZ) > Math.abs(this.shakeRange)) {
6.         let shakeDir = this.shakeDir;
7.         setTimeout(() => {
8.                 if(shakeDir == ShakeDir.left) this.shakeDir = ShakeDir.right;
9.                 else if(shakeDir == ShakeDir.right) this.shakeDir = ShakeDir.left;
10.         }, 1000)
11.         this.shakeDir = ShakeDir.wait;
12.         rotationZ = Math.abs(this.shakeRange) * Math.abs(rotationZ) / rotationZ;
13. }
14. head!.rotation.z = rotationZ;
15. leaf!.rotation.z = rotationZ;
16. shake!.rotation.z = rotationZ;

复制代码

四、最后

项目代码和演示地址：https://codesandbox.io/p/sandbox/threejs-mini-fans-dx6nm6

来源:https://www.cnblogs.com/one-yutian/p/17461954.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！