THREE.js设置背景图和播放动画学习如何设置全景背景图和播放动画，本文用到的模型和图片都提前提供了，我们只需要实现加载背景图、加载模型和播放动画的效果cameraandrendererletscene,camera,rendererfunctioninit(){scene=newTHREE.Scene()camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.内部高度,0.01,10);renderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);camera.position.set(0.6,0.6,1);document.body.appendChild(renderer.domElement);}init()加载模型函数loadModel(){constgltfLoader=newGLTFLoader()gltfLoader.load('../resources/models/donuts.glb',gltf=>{scene.add(gltf.scene);});}loadmodel()初始化控制函数initControls(){controls=newOrbitControls(camera,renderer.domElement);}initControls()渲染函数animate(){renderer.render(scene,相机)controls.update()requestAnimationFrame(animate)}模拟阳光，此时整个场景都是黑色的，我们添加一个directionLight来模拟阳光functioninit(){...constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.4);scene.add(directionLight);}加载背景图像functionloadBackground(){constrgbeLoader=newRGBELoader()rgbeLoader.load('../resources/hdr/sky.hdr',function(texture){scene.background=texture;});}loadModel()loadBackground()这里首先使用了hdr。相较于普通的jpg和png，hdr在亮处或暗处可以显示更多的细节，而普通的jpg和png只能显示白色或黑色。简单地为场景设置背景就是固定背景。如果我们想成为全景图的背景，我们需要设置几个值。这些值的含义如下：三.EquirectangularReflectionMapping称为经纬度贴图贴图。实现图片全景显示scene.environment=texture;如果该值不为空，纹理贴图将被设置为场景中所有物理材质的环境贴图。但是，此属性不能覆盖已分配给MeshStandardMaterial的现有属性。envMap的纹理。默认为空。renderer.outputEncoding属性控制输出渲染编码。默认情况下，outputEncoding的值为THREE.LinearEncoding，看起来还可以，但不真实。将值改为THREE.sRGBEncoding后，效果会更真实。functionloadBackground(){...rgbeLoader.load('../resources/hdr/sky.hdr',function(texture){scene.background=texture;texture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;});Point：我们在使用软件制作模型的时候，动画制作通常有两种模式：变形动画和骨骼动画。我们这里用的是变形动画，所以就不展开骨骼动画了。要使用变形动画，需要定义网格变形后的状态，或者关键位置。对于变形目标，存储所有顶点位置。您需要做的就是将所有顶点从一个位置移动到另一个定义的关键位置并重复该过程。变形动画的优点是可以获得更好的效果，因为它存储了每个动作的每个顶点的位置，所以相应的缺点是文件会变大。AnimationMixer对象是场景中特定对象的动画播放器。当场景中的多个对象独立设置动画时，您可以为每个对象使用一个AnimationMixer。我们需要通过这个对象来实现动画。然后使用AnimationMixer对象的clipAction方法生成一个可以控制动画执行的实例。我们的动画只需要执行一次，所以设置action.loop=THREE.LoopOnce我们需要在动画结束后保持结束动画的状态，我们需要设置action.clampWhenFinished=truegltfLoader.load('../resources/models/donuts.glb',gltf=>{scene.add(gltf.scene);mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;clips.forEach(clip=>{constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;action.clampWhenFinished=trueaction.play()})});自动旋转因为它是一个装饰品，所以我们给甜甜圈添加一个自动旋转功能loadModel(){...gltfLoader.load('../resources/models/donuts.glb',gltf=>{donuts=gltf.scene;scene.add(甜甜圈);mixer=newTHREE.AnimationMixer(donuts);...});}functionanimate(){...if(donuts){donuts.rotation.y+=0.01;}...}到最后，我们的基本功能就全部实现了，我觉得重点是加载背景图片和播放动画时有两个重点要学习。代码虽然简单，但要理解的地方还是很多的。附上github地址：https://github.com/luch1994/t...
