分享threejs实现掉落甜甜圈的动画效果。通常，首先是最终效果：这样的效果是如何实现的？首先，你需要有一个模型。可以从一些模型网站下载模型，用blender修改成想要的形状。这里我使用了熊猫先生的预制模型。模型长这样：那么如何让它在网页上显示和移动呢？跟着我一步步来~首先最重要的就是场景的三个基本部分：scene、camera、rendererconstscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10);constrenderer=newTHREE.WebGLRenderer({antialias:true});二、加载glb模型newGLTLoader().load('../resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene);}这个时候是黑色的，并且nothingcanbesee添加一个灯：constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.4);scene.add(directionLight);看到Spooky,scary，然后加载一个环境光HDR图像：newRGBELoader().load('../resources/sky.hdr',function(texture){scene.background=texture;texture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(场景,相机);});这样就好多了~然后就是动画，播放所有动画：mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.Loop一次;action.play();});嗯？怎么又回去了？添加一行代码控制播放停在最后一帧：//停在最后一帧action.clampWhenFinished=true;完毕！欢迎大家一起交流学习，共同进步
