让我们用threejs开启新的一年吧~安装threejsnpmithreeimportthreejs//参考Threejsimport*asTHREEfrom'three';//引入GLTFloader加载glTF资源import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader';threejs基本元素//基本元素1，定义场景constscene=newTHREE.Scene();//基本元素2，cameraPerspectiveCamera-远近透视相机大远小OrthographicCamera-正交相机远近等尺寸constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.01,50);camera.position.set(5,10,25);//基本要素3，光照ambientLight-环境光directionalLight-方向光pointLight-点光源spotLight-聚光灯hemisphereLight-半球光constambientLight=newTHREE.AmbientLight(0xffffff,0.1);scene.add(ambientLight);//基础元素4，几何constboxGeometry=newTHREE.BoxGeometry(1,1,1);//基础元素5，材质MeshBasicMaterial-基础材质MeshStandardMaterial-PBR材质constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//mesh-meshgeometry不能渲染，只有geometry和materials组合成grid才能渲染到屏幕上constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial);//添加meshscene.add(boxMesh)到场景中；完整代码//参考Threejsimport*asTHREEfrom'three';//导入GLTFloader加载glTF资源import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader';letmixer;letplayerMixer;//基本元素1.定义Sceneconstscene=newTHREE.Scene();//基本要素2、cameraPerspectiveCamera-远近透视相机-大远小OrthographicCamera-正交相机远近同尺寸constcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.内部高度,0.01,50);camera.position.set(5,10,25);scene.background=newTHREE.Color(0.2,0.2,0.2);//基本元素3、光照ambientLight-环境光directionalLight-方向光pointLight-点光源spotLight-聚光灯hemisphereLight-半球光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;//基础元素4，几何//constboxGeometry=newTHREE.BoxGeometry(1,1,1);//基础元素5，材质MeshBasicMaterial-基础材质MeshStandardMaterial-PBR材质//constboxMaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});//mesh-mesh几何图形无法渲染，只有几何图形和材质组合成网格才能渲染到屏幕上//constboxMesh=newTHREE.Mesh(boxGeometry,boxMaterial);//添加网格到场景//scene.add(boxMesh);//坐标系//constaxesHelper=newTHREE.AxesHelper(10);//scene.add(axesHelper);//渲染器渲染元素可见constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.shadowMap.enabled=true;renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);让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(clipIdle);actionIdle.play();});让isWalk=false;constplayerHalfHeight=newTHREE.Vector3(0,0.8,0);//监听键盘事件按w/s控制角色前进/后退window.addEventListener('keydown',(e)=>{if(e.key==='w'){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);//碰撞detectionif(collisionResultsFrontObjs&&collisionResultsFrontObjs[0]&&collisionResultsFrontObjs[0].distance>1){//控制运动playerMesh.translateZ(0.1);}if(!isWalk){//角色向前crossPlay(actionIdle,actionWalk);isWalk=true;}}if(e.key==='s'){playerMesh.translateZ(-0.1);}});//监听键盘事件，抬起w键控制字符停止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/zhangan.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');视频。src='./resources/yanhua.mp4';video.muted=true;video.autoplay='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.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;}});混音器=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;//播放所有动画clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//在最后一帧停止action.clampWhenFinished=true;动作.播放();});});functioncrossPlay(curAction,newAction){curAction.fadeOut(0.3);新动作。重置（）;newAction.setEffectiveWeight(1);newAction.play();newAction.fadeIn(0.3);}//动画函数animate(){requestAnimationFrame(animate);renderer.render（场景，相机）；如果（混合器）{mixer.update（0.02）;}if(playerMixer){playerMixer.update(0.015);}}动画（）;素材、源码和演示效果稍后附在评论区。如果您有任何问题，请留言。以上就是在threejs特训中学到的0基础实现人物观看效果，加入源创影（v:dashhuailaoyuan），一起交流学习吧~
