创建场地场景模型首先使用blender创建模型，选择添加圆柱体，可以选择面数，面数越多越好。然后调整场地的地面升降机来调整场地的整体尺寸，使用“对象模式”，选中当前柱，然后分别设置x、y、z轴的长度。在这里，我将数值分别设置为30m、30m、3m。.这时候体育场场景的主柱就创建好了，但是体育场的中心要降低为地面。首先，选择“编辑模式”选择顶面，然后选择挤压面。您可以选择要上升或下降的曲面体。为避免闪烁问题，请删除圆柱体的原始底部。这样，场馆的基本环境就建成了无入口。这时选中几个圆柱体，点击删除曲面。由于去掉了边框，露出的缝隙两侧是空心的。这时候需要选择外露的镂空框，选择一侧，然后盖上，达到密封的效果。至此，场地周围的圆圈就创建好了。同样在中心，再次添加柱子，作为中间柱子的基础。调整底部支撑的形状，选择要拉长的两侧，并保持两侧的距离。这样，亭子中心的底座就创建好了。然后创建一个柱子站在底座上。拉伸后选择中心线，然后选择沿法线折叠，调整成如下效果，形成平台的遮光柱。“CentralColumnSelection”之后，点击topaddtext来添加文字，因为如果选择了base的对象，是不能添加文字的，这里需要注意一下！选中文字，点击键盘“Tab”输入2023，同时选中字体加粗，调整角度，使视角合适。同时在字体下方添加一个base，调整位置和大小，移动到文字下方。在场景中再次添加立方体作为大屏幕来播放视频。选择地面并为地面添加纹理。这么基本的大屏，还有文字的显示，同时加上地砖纹理，加上光源。会场基本搭建完毕。这时候导入自由字符，在视频上播放大屏幕和当前显示的2023字体。将人物和场景导入到threejs中，并添加操作控制人物，映射w，以及s的前进后退操作，同时在停止和动作之间切换，不让人物从静态变化towalkingaround，转型太生硬。同时加了一个探针，接触角色前后的物体，不能继续移动，防止“成型”的发生。具体代码如下所示。从“三”导入*为三；从“三/示例/jsm/控件/OrbitControls”导入{OrbitControls}；从“三/示例/jsm/loaders/GLTFLoader”导入{GLTFLoader}；从“三”导入{RGBELoader}/examples/jsm/loaders/RGBELoader';letmixer;letplayerMixer;constscene=newTHREE.Scene();constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.01,50);常量renderer=newTHREE.WebGLRenderer({antialias:true});renderer.shadowMap.enabled=true;renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera.position。设置(5,10,25);//constcontrols=newOrbitControls(camera,renderer.domElement);scene.background=newTHREE.Color(0.2,0.2,0.2);constambientLight=newTHREE.AmbientLight(0xffffff,0.1);scene.add(ambientLight);constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.2);scene.add(directionLight);//directionLight.position.set(10,10,10);directionLight.lookAt(newTHREE.Vector3(0,0,0));directionLight.castShadow=true;directionLight.shadow.mapSize.width=2048;directionLight.shadow.mapSize。height=2048;constshadowDistance=20;directionLight.shadow.camera.near=0.1;directionLight.shadow.camera.far=40;directionLight.shadow.camera.left=-shadowDistance;directionLight.shadow.camera.right=shadowDistance;directionLight.shadow.camera.top=shadowDistance;directionLight.shadow.camera.bottom=-shadowDistance;directionLight.shadow.bias=-0.001;//constboxGeometry=newTHREE.BoxGeometry(1,1,1);//constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial);//scene.add(boxMesh);//constaxesHelper=newTHREE.AxesHelper(10)复制代码;//scene.add(axesHelper)letplayerMesh;letactionWalk,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.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(clipIdle);actionIdle.play();//constclips=gltf.animations;//播放所有动画//clips.forEach(function(clip){//constaction=mixer.clipAction（剪辑）；//action.loop=THREE.LoopOnce;////停在最后一杠//action.clampWhenFinished=true;//动作.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(collisionResultsFrontObjs);如果(collisionResultsFrontObjs&&collisionResultsFrontObjs[0]&&collisionResultsFrontObjs[0].distance>1){playerMesh.translateZ(0.1);}if(!isWalk){crossPlay(actionIdle,actionWalk);是步行=真；}}if(e.key==='s'){playerMesh.translateZ(-0.1);}})window.addEventListener('keyup',(e)=>{if(e.key==='w'){crossPlay(actionWalk,actionIdle);isWalk=false;}});letpreClientX;window.addEventListener('mousemove',(e)=>{if(preClientX&&playerMesh){playerMesh.rotateY(-(e.clientX-preClientX)*0.01);}preClientX=e.clientX;});newGLTFLoader()。load('../resources/models/changjing.glb',(gltf)=>{//console.log(gltf);scene.add(gltf.scene);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="自动播放";video.loop=true;视频播放（）；constvideoTexture=newTHREE.VideoTexture(视频);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}if(child.name==='文字001'){constvideo=document.createElement('video');video.src="./resources/yanhua.mp4";video.muted=true;video.autoplay="自动播放";video.loop=true;视频播放（）；constvideoTexture=newTHREE.VideoTexture(视频);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}if(child.name==='大屏幕01'||child.name==='大屏幕02'||child.name==='操作台屏'||child.name==='环形屏幕2'){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==='环形屏幕'){constvideo=document.createElement('video');video.src="./resources/video02.mp4";video.muted=true;video.autoplay="自动播放";video.loop=true;视频播放（）；constvideoTexture=newTHREE.VideoTexture(视频);constvideoMaterial=newTHREE.MeshBasicMaterial({map:videoTexture});child.material=videoMaterial;}if(child.name==='柱子屏幕'){constvideo=document.createElement('video');video.src="./resources/yanhua.mp4";video.muted=true;video.autoplay="自动播放";video.loop=true;视频播放（）；constvideoTexture=newTHREE.VideoTexture(视频);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();});})//newRGBELoader()//.load('../resources/sky.hdr',function(texture){////scene.background=texture;//texture.mapping=THREE.EquirectangularReflectionMapping;//scene.environment=texture;//renderer.outputEncoding=THREE.sRGBEncoding;//renderer.render(scene,camera);//});functioncrossPlay(curAction,newAction){curAction.fadeOut(0.3);newAction.reset();newAction.setEffectiveWeight(1);newAction.play();newAction.fadeIn(0.3);}functionanimate(){requestAnimationFrame(animate);renderer.render（场景，相机）；//控制.update();//if(donuts){//donuts.rotation.y+=0.01;//}if(mixer){mixer.update(0.02);}if(playerMixer){playerMixer.update(0.015);}}动画（）;最终效果部分截图为：最后总结一下，由于时间原因，写的比较草率，不过在这个过程中，了解了一下blender和threejs的相关操作
