渲染页面预览链接（服务器配置比较低，加载视频会比较慢，请耐心等待）：https://static-8f957b23-c692-...相关链接整理熊猫老师threejs、blender搭建metauniverse基础互动直播教学回放链接。大帅老师的代码仓库。Threejs官方文档。本文完整代码中需要实现的功能点1.使用blender3d建模导出一个亭子模型和人物模型。2、使用threejs技术导入展馆模型，将视频粘贴到模型集上进行展示。3.导入角色模型，监听键盘事件使角色动作。4.碰撞检测。Blender导出模型如何使用blender制作3D模型可以看我的B站链接详细教学：https://www.bilibili.com/video/BV18K41127yq/?vd_source=1f95e9c4449f30df3c017d0e5a4cdd66threejscreatescene,light,camera,rendererconstscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.01,200);constrenderer=newTHREE.WebGLRenderer({antialias:true});渲染器。shadowMap.enabled=true;renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.set(5,10,25);scene.background=new三。Color(0.2,0.2,0.2);constambientLight=newTHREE.AmbientLight(0xffffff,0.1);scene.add(ambientLight);//环境光没有方向constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.2);scene.add(方向灯);threejs在会场导入视频并组装纹理newGLTFLoader().load('../resources/models/zg.glb',(gltf)=>{//console.log(gltf);scene.add(gltf.场景);constvideo02=document.createElement('video');video02.src="./resources/video02.mp4";video02.muted=true;video02.autoplay="autoplay";video02.loop=true;video02.play();gltf.scene.traverse((child)=>{//console.log(child.name);child.castShadow=true;child.receiveShadow=true;if(child.name==='2023'){constvideo=document.createElement('video');video.src="./resources/yanhua.mp4";video.muted=true;video.autoplay="autoplay";video.loop=true;video.play();constvideoTexture=newTHREE.VideoTexture(video);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}if(child.name==='大屏01'){constvideo=document.createElement('video');video.src="./resources/video01.mp4";video.muted=true;video.autoplay="自动播放";video.loop=true;视频播放（）；constvideoTexture=newTHREE.VideoTexture(视频);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}if(child.name==='SurfaceScreen01'||child.name==='SurfaceScreen02'||child.name==='OperationConsole'){constvideoTexture=newTHREE.VideoTexture(video02);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}})mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;//播放所有动画clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//在最后一帧停止action.clampWhenFinished=true;action.play();});})Threejs导入角色模型，监听键盘事件控制角色的动作，与newTHREE进行碰撞检测。Raycaster()是射线碰撞检测的对象。当物体朝向的方向有物体时，collisionResultsFrontObjs数组为空让playerMesh;让actionWalk,actionIdle;constlookTarget=newTHREE.Vector3(0,2,0);newGLTFLoader().load('../resources/models/player.glb',(gltf)=>{playerMesh=gltf.scene;scene.add(gltf.scene);playerMesh.traverse((child)=>{child.receiveShadow=true;child.castShadow=true;})playerMesh.position.set(0,0,11.5);playerMesh.rotateY(Math.PI);playerMesh.add(camera);camera.position.set(0,2,-5);camera.lookAt(lookTarget);constpointLight=newTHREE.PointLight(0xffffff,1.5);playerMesh.add(pointLight);pointLight.position.set(0,1.8,-1);playerMixer=newTHREE.AnimationMixer(gltf.scene);constclipWalk=THREE.AnimationUtils.subclip(gltf.animations[0],'walk',0,30);actionWalk=playerMixer.clipAction(clipWalk);//actionWalk.play();constclipIdle=THREE.AnimationUtils.subclip(gltf.animations[0],'idle',31,281);actionIdle=playerMixer.clipAction(cli漏斗）；actionIdle.play();//constclips=gltf.animations;//播放所有动画//clips.forEach(function(clip){//constaction=mixer.clipAction(clip);//action.loop=THREE.LoopOnce;////停在最后一层//action.clampWhenFinished=true;//action.play();//});});letisWalk=false;constplayerHalfHeight=newTHREE.Vector3(0,0.8,0);window.addEventListener('keydown',(e)=>{if(e.key==='w'){//playerMesh.translateZ(0.1);constcurPos=playerMesh.position.clone();playerMesh.translateZ(1);constfrontPos=playerMesh.position.clone()；playerMesh.translateZ(-1)；constfrontVector3=frontPos.sub(curPos).normalize()constraycasterFront=newTHREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight),frontVector3);constcollisionResultsFrontObjs=raycasterFront.intersectObjects(scene.children);console.log(碰撞结果FrontObjs);如果(collisionResultsFrontObjs&&collisionResultsFrontObjs[0]&&collisionResultsFrontObjs[0].distance>1){playerMesh.translateZ(1);}if(!isWalk){crossPlay(actionIdle,actionWalk);是步行=真；}}if(e.key==='s'){//constcurPos=playerMesh.position.clone();playerMesh.translateZ(-1);//constfrontPos=playerMesh.position.clone();//playerMesh.translateZ(1);//constfrontVector3=frontPos.sub(curPos).normalize()//constraycasterFront=newTHREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight),frontVector3);//constcollisionResultsFrontObjs=raycasterFront.intersectObjects(scene.children);//console.log(collisionResultsFrontObjs);//if(collisionResultsFrontObjs&&collisionResultsFrontObjs[0]&&collisionResultsFrontObjs[0].distance>1){//playerMesh.translateZ(-1);//}if(!isWalk){crossPlay(actionIdle,actionWalk);是步行=真；}}})window.addEventListener('keyup',(e)=>{if(e.key==='w'||e.key==='s'){crossPlay(actionWalk,actionIdle);isWalk=false;}});让preClientX;window.addEventListener('mousemove',(e)=>{if(preClientX&&playerMesh){playerMesh.rotateY(-(e.clientX-preClientX)*0.01);}preClientX=e.clientX;});总结一下这次的项目学习，对blender建模和threejs有了初步的了解，基本可以自己搭建一个showroom平台了。最后推荐帅帅的老师，人真好，有用的东西也很多；，他在技术外包方面非常靠谱。有兴趣的可以加入源创影（v：dashhuailaoyuan）一起交流学习。
