的时候，第一次被threejs的实战所震撼。感觉有点魔幻，更接近现实，所以研究记录一下。对于现实生活中我们看到的物体，我们需要环境、物体、光源、眼睛、物体材质，这样我们才能看到现实生活中的画面，那么这些在threejs中是如何实现的呢？其实threejs中都有相应的api来实现这些，这样看起来更贴近实际。学习一下...Threejs的基本要素场景相当于现实生活中的环境。constscene=newTHREE.Scene();相机相当于现实生活中的眼睛。相机用于确定位置、方向和角度。相机看到的是threejs中我们在屏幕上看到的相机有两种：正交相机和透视相机（更接近人眼看到的效果）透视相机正交相机constcamera=newTHREE.PerspectiveCamera(45,宽度/高度,1,1000);光源，只有有光才能看到画面0.1);几何立方体圆柱体球体constboxGeometry=newTHREE.BoxGeometry(1,1,1);//创建聚合constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//创建材质constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial);//创建mesh，这个我没看懂，估计真实物体需要shape和materialscene.add(boxMesh)//场景中只能添加mesh材质MeshBasicMaterial基础材质（多用于测试调试）MeshStandardMaterialPBR材质（现实项目的标准材质）constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});renderer所有的元素都有了，现在渲染一下看效果letrenderer=newTHREE。WebGL渲染器({antialias:true,//true/false表示是否开启抗锯齿alpha:true,//true/false表示是否可以设置背景色透明precision:'highp',//highp/mediump/lowp表示着色精度选择premultipliedAlpha:false,//true/false表示是否可以设置像素深度（用于衡量图像的分辨率）preserveDrawingBuffer:true,//true/false表示是否保存绘图缓冲区maxLights:3,//最大灯数stencil:false//false/true表示是否使用模板字体或图案})了解了基本元素后，我们来实现训练营中的练习演示。所有代码从“三”导入*作为三；从“三/示例/jsm/加载器/GLTFLoader”导入{GLTFLoader}；让混合器；让播放器混合器；constscene=newTHREE.Scene()；constcamera=newTHREE。PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.01,50);constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.shadowMap.enabled=true;renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);camera.position.set(5,10,50);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.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;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,18);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);constclipIdle=THREE.AnimationUtils.subclip(gltf.animations[0],'idle',31,281);actionIdle=playerMixer.clipAction(clipIdle);actionIdle.play();});letisWalk=false;constplayerHalfHeight=newTHREE.Vector3(0,0.8,0);//监听键盘事件w控制角色前进s控制角色窗口.addEventListener('keydown',(e)=>{if(e.key==='w'){constcurPos=playerMesh.position.clone();playerMesh.translateZ(1);constfrontPos=playerMesh.position.clone();playerMesh.translateZ(-1);常量frontVector3=frontPos.sub(curPos).normalize()constraycasterFront=newTHREE.Raycaster(playerMesh.position.clone().add(playerHalfHeight),frontVector3);constcollisionResultsFrontObjs=raycasterFront.intersectObjects(scene.children);如果(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/zhanguan.glb',(gltf)=>{scene.add(gltf.scene);//获取每个元素添加视频动画gltf.scene.traverse((child)=>{child.castShadow=true;child.receiveShadow=true;if(child.name==='2023'||child.name==='柱状屏幕'){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;}如果(child.name==='大屏幕01'||child.name==='大屏幕02'||child.name==='ConsoleScreen'||child.name==='RingScreen2'){constvideo=document.createElement('video');video.src="./resources/video01.mp4";video.muted=true;video.autoplay="autoplay";video.loop=true;video.play();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;}})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();});})functioncrossPlay(curAction,newAction){curAction.fadeOut(0.3);新动作。重置（）;newAction.setEffectiveWeight(1);newAction.play();newAction.fadeIn(0.3);}functionanimate(){//动画requestAnimationFrame(animate);renderer.render（场景，相机）；如果（混合器）{mixer.update（0.02）;}if(playerMixer){playerMixer.update(0.015);}}动画（）;看效果：（没钱不想去水印）
