var%20texLoader%20=%20new%20THREE.TextureLoader();loader.load('assets/models/meta.fbx',%20function%20(mesh)%20{%20%20mesh.traverse(function%20(child)%20{%20%20%20%20if%20(child.isMesh)%20{%20%20%20%20%20%20if%20(child.name%20===%20'贝塞尔圆')%20{%20%20%20%20%20%20%20%20child.material%20=%20new%20THREE.MeshPhysicalMaterial({%20%20%20%20%20%20%20%20%20%20map:%20texLoader.load("./assets/images/metal.png"), metalness: .2, roughness: 0.1, exposure: 0.4 }); } } });})

添加动画

loader.load('assets/models/meta.fbx', function (mesh) { mesh.animations.map(item => { mesh.traverse(child => { // 因为模型中有多个物体，并且各自有不同动画，示例中只为贝塞尔圆这个网格添加动画 if (child.name === '贝塞尔圆') { let mixer = new THREE.AnimationMixer(child); mixerArr.push(mixer); let animationClip = item; animationClip.duration = 8; let clipAction = mixer.clipAction(animationClip).play(); animationClip = clipAction.getClip(); } }) })});

添加动画之后，不要忘了要在 requestAnimationFrame 中更新动画。

function animate() { renderer.render(scene, camera); // 获得前后两次执行该方法的时间间隔 let time = clock.getDelta(); // 更新logo动画 mixerArr.map(mixer => { mixer && mixer.update(time); }); // 更新人物动画 manMixer && manMixer.update(time); stats.update(); requestAnimationFrame(animate);}

展示加载进度

FBXLoader 同时返回两个回调函数，可以像下面这样使用，用来展示模型加载进程展示以及加载失败的逻辑实现。

<div class="loading" id="loading"> <p class="text">加载进度<span id="progress">0%</span></p><div>

var loader = new THREE.FBXLoader();loader.load('assets/models/meta.fbx', mesh => {}, res => { // 加载进程 let progress = (res.loaded / res.total * 100).toFixed(0); document.getElementById('progress').innerText = progress; if (progress === 100) { document.getElementById('loading').style.display = 'none'; }}, err => { // 加载失败 console.log(err)});

实现效果

点击更换材质

监听页面的点击事件，通过 HREE.Raycaster 拿到当前点击对象，为了展示例子，我为点击对象更换了一种材质 THREE.MeshStandardMaterial，并赋予它随机的 color 颜色、metalness 金属质感以及 roughness 粗糙程度。

//声明raycaster和mouse变量var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2();function onMouseClick(event) { // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1. mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = - (event.clientY / window.innerHeight) * 2 + 1; // 通过鼠标点的位置和当前相机的矩阵计算出raycaster raycaster.setFromCamera(mouse, camera); // 获取raycaster直线和所有模型相交的数组集合 let intersects = raycaster.intersectObjects(clickableObjects); if (intersects.length > 0) { console.log(intersects[0].object) let selectedObj = intersects[0].object; selectedObj.material = new THREE.MeshStandardMaterial({ color: `#${Math.random().toString(16).slice(-6)}`, metalness: Math.random(), roughness: Math.random() }) }}window.addEventListener('click', onMouseClick, false);

更多关于网格材质的知识，可参考文章末尾的链接。

加载人物模型

人物模型的加载流程和 Logo 模型加载流程是一样的。我添加了一个正在施展龟派气功的人物，没想到与 Logo 模型的旋转动画非常契合 。

loader.load('assets/models/man.fbx', function (mesh) { mesh.traverse(function (child) { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); mesh.rotation.y = Math.PI / 2; mesh.position.set(-14, -8.4, -3); mesh.scale.set(0.085, 0.085, 0.085); scene.add(mesh); manMixer = new THREE.AnimationMixer(mesh); let animationClip = mesh.animations[0]; let clipAction = manMixer.clipAction(animationClip).play(); animationClip = clipAction.getClip();}, res => { let progress = (res.loaded / res.total * 100).toFixed(0); document.getElementById('progress').innerText = progress + '%'; if (Number(progress) === 100) { document.getElementById('loading').style.display = 'none'; }}, err => { console.log(err)});

本文示例人物模型来源于mixamo.com，该网站有有上百种人物和上千种动作可自由组合，免费 下载。大家可以挑选自己喜欢的人物和动画动作来练习 Three.js。

总结

本文中涉及到的主要知识点包括：

如果你对源码感兴趣，请点赞+转发+关注+私信【logo】。

欢迎点赞+转发+关注！大家的支持是我分享最大的动力！！！

版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除