devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Threejs实现3D飞行器交互场景_three.js 无人机飞行姿态

作者：运维做开发 | 2024-08-06 20:24:24

赞

踩

three.js 无人机飞行姿态

最近在b站上面看到up主：gamemcu的3D作品，着实让人感到非常震撼，作品中的SU7模型，利用的是Blender进行建模，利用了webGL的技术进行开发。本次编写效果如下：

9145a9aa973549c9a0a0036cc4288f76.gif

初识Three

gamemcu大佬的作品

su7xiaomi su7 made by gamemcuicon-default.png?t=N7T8https://gamemcu.com/su7/

官网学习

利用了一天的时间，到官方网站（Three.js – JavaScript 3D Library）看了documentation、examples和editor。到b站中看了视频，学习了基础的知识。

首页也有推荐一些教学视频，比如resource中提到的Three.js Journery。也是up主：gamemcu推荐去看的，在b站中可以找到免费的教学视频

Three.js Journey（新版-双语字幕）_哔哩哔哩_bilibili
873e82716915448eaab13401f84e090d.png

源码学习

Three.js是开源的，可以把源码下载来看，官网里的所有examples在源码里面都有demo。

984a978b6dc44be9a4f96de67cce3798.png

docs：是官网的文档，网络卡的时候，可以用本地的看。

examples：放的是所有的demo，可以学习到官方的编码方式

editor：是模型编辑器，可视化编辑模型，提高在编写代码时的效率。

402396b5d1fb40a28a6588ccceba6f53.png

初识Blender

大概了解部分Three.js知识后，还需要了解一下建模的软件-Blender，这款软件功能强大，而且是开源的。当需要给模型添加一些动画效果，可能就要对模型进行修改。就可以用Blender对模型进行建模处理了。如果想更加深入，可以在Blender建好模型，添加好动画，然后直接Three.js导入Animation。

982778d3a829433b9921304e7a4cace2.png

开发作品

经过这几天的基础学习和准备，现在可以着手开发了。

搭建场景

8e0669a1fb374eae8f9594c8e1df6647.png

首先是搭建基本场景

  1. function init() {
  2.   // 初始化场景
  3.     const initScene = () =>{
  4.         scene = new THREE.Scene();
  5.         scene.background = new THREE.Color( 0xa0a0a0 );
  6.         scene.fog = new THREE.Fog( 0xa0a0a0, 4, 20 );
  7.     }
  8.  
  9.     // 初始化相机
  10.     const initCamera = () =>{
  11.         camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
  12.         camera.position.set( 10, 20, 10 );
  13.     }
  14.  
  15.     // 初始化半球光
  16.     const hemiLight = () =>{
  17.         const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 3 );
  18.         hemiLight.position.set( 0, 20, 0 );
  19.         scene.add( hemiLight );
  20.     }
  21.  
  22.     // 初始化平行光
  23.     const initLight = () =>{
  24.         dLight = new THREE.DirectionalLight( 0xffffff, 3 );
  25.         dLight.position.set( 0, 20, 10 );
  26.         dLight.castShadow = true;
  27.         dLight.shadow.camera.top = 2;
  28.         dLight.shadow.camera.bottom = - 2;
  29.         dLight.shadow.camera.left = - 2;
  30.         dLight.shadow.camera.right = 2;
  31.         scene.add( dLight );
  32.  
  33.     }
  34.  
  35.     // 初始化地面
  36.     const initGround = () =>{
  37.         const ground = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new
  38.         THREE.MeshPhongMaterial( { color: 0xbbbbbb, depthWrite: false } ) );
  39.         ground.rotation.x = - Math.PI / 2;
  40.         ground.receiveShadow = true;
  41.         scene.add( ground );
  42.     }
  43.  
  44.     // 初始化地面网格
  45.     const initGrid = () =>{
  46.         const grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
  47.         grid.material.opacity = 0.2;
  48.         grid.material.transparent = true;
  49.         scene.add( grid );
  50.     }
  51.  
  52.     // 初始化场景辅助标线
  53.     const initAxesHelper = () =>{
  54.         let axesHelper = new THREE.AxesHelper( 3 );
  55.         scene.add( axesHelper );
  56.     }
  57. }

导入模型

这里提前导入了两个模型，同时利用回调，添加了加载模型过程的progress。

  1.  
  2. // 模型1
  3. function loadStaticScene(){
  4.     return new Promise(resolve => {
  5.         let loader = new GLTFLoader();
  6.         const url = "../models/gltf/WM161_zhankai_1k.glb"
  7.         loader.load(url, (gltf) => {
  8.             gltf.scene.position.set(0,27,0)
  9.             gltf.scene.scale.set(15, 15, 15);
  10.             resolve(gltf);
  11.         },(event) =>{
  12.             const {loaded,total} = event
  13.             handleLoadProgress({url,loaded,total})
  14.         });
  15.     })
  16. }
  17.  
  18. // 模型2
  19. function loadStaticScene_v11(){
  20.     return new Promise(resolve => {
  21.         let loader = new GLTFLoader();
  22.         const url = "../models/gltf/wm161_v11_zhedie_1k.glb"
  23.         loader.load(url, (gltf) => {
  24.             gltf.scene.position.set(0,-27,0)
  25.             gltf.scene.scale.set(15, 15, 15);
  26.             resolve(gltf);
  27.         },(event) =>{
  28.             const {loaded,total} = event
  29.             handleLoadProgress({url,loaded,total})
  30.         });
  31.     })
  32. }
  33.  
  34. // 用于加载
  35. function handleLoadProgress({url, loaded, total}){
  36.     const percentage = ((loaded / total) * 100).toFixed(2);
  37.     if (/.*\.(blob|glb)$/i.test(url)) {
  38.         updateLoadingProgress(`加载场景模型：${percentage}%`);
  39.     }
  40.  
  41. }
  42.  
  43. function updateLoadingProgress(loading_text){
  44.     progress && (progress.textContent = loading_text);
  45. }

加载模型

bfe9c91df2554ce28ce8354aba496353.png

可用看到模型加载的时候，出现了加载进度。

  1. loadScenes(); // 先加载模型
  2.  
  3. async function loadScenes(){
  4.     gltf = await loadStaticScene(); // 加载模型1
  5.     gltf_v11 = await loadStaticScene_v11(); // 加载模型2
  6.  
  7.     showLoading(); // loading过程
  8.     handleIntoScene(); // 进入场景
  9. }

模型被加载到场景 

58413bd71f7544119aafab3977b377b9.png

工作台

为了更换操作模型，在页面添加一个工作台。同时加上标题，丰富画面。

cdca701269664a659b12647f3814d284.gif

这是一个普通HTML编写的工作台 ，加了mac-docker动画效果

  1.  <div class="dock_con display-none">
  2.         <div class="dock">
  3.             <div class="dock-item">
  4.                 <i class="icon icon_fly" data-name="起飞"></i>
  5.             </div>
  6.             <div class="dock-item">
  7.                 <i class="icon icon_color" data-name="颜色贴图"></i>
  8.             </div>
  9.             <div class="dock-item">
  10.                 <i class="icon icon_check" data-name="模型切换"></i>
  11.             </div>
  12.             <div class="dock-item">
  13.                 <i class="icon icon_setup" data-name="设置"></i>
  14.             </div>
  15.         </div>
  16.     </div>

切换模型

点击切换的时候，利用TWEEN进行动画式的切换效果 

88d9faa0df2d4c0e82d54dddbfd3efaa.gif

  1. function handleDockClick() {
  2.     // 点击切换
  3.     const handleCheck = () =>{
  4.         isCheck = !isCheck;
  5.         const gltf_vector = isCheck ? new THREE.Vector3(0,0,0): new THREE.Vector3(0,27,0)
  6.         const gltf_v11_vector = isCheck ? new THREE.Vector3(0,0,0): new THREE.Vector3(0,-27,0)
  7.         new TWEEN.Tween( gltf.scene.position)
  8.             .to({ x: gltf_vector.x, y: gltf_vector.y, z: gltf_vector.z }, 500)
  9.             .easing(TWEEN.Easing.Quadratic.Out)
  10.             .start();
  11.         new TWEEN.Tween( gltf_v11.scene.position)
  12.             .to({ x: gltf_v11_vector.x, y: gltf_v11_vector.y, z: gltf_v11_vector.z }, 500)
  13.             .easing(TWEEN.Easing.Quadratic.Out)
  14.             .start();
  15.     }
  16.  
  17.     const handleColor = () =>{}
  18.  
  19.     const handleFly = () =>{}
  20.  
  21.    // 点击事件的事件委托
  22.     delegate(dock, 'click', 'i', function(e){
  23.         const DOCK_MAP = [
  24.             {
  25.                 target: ()=> e.target.classList.contains('icon_check'),
  26.                 handler: handleCheck
  27.             },
  28.             {
  29.                 target: ()=> e.target.classList.contains('icon_color'),
  30.                 handler: handleColor
  31.             },
  32.             {
  33.                 target: ()=> e.target.classList.contains('icon_fly'),
  34.                 handler: handleFly
  35.             }
  36.         ]
  37.         const event = DOCK_MAP.find(item => item.target());
  38.         if (event) {
  39.             event.handler();
  40.         }
  41.     })
  42.  
  43. }

操作模型

这里给模型添加一个起飞的动画效果。（由于帧率问题gif图的机翼旋转看上去会有点奇怪）

161cac06ceac4101968839c6edf2dc74.gif

  1. async function loadScenes(){
  2.         gltf = await loadStaticScene();
  3.         gltf_v11 = await loadStaticScene_v11();
  4.         setRotateAnimation(gltf) // 缓存飞起动画
  5.         showLoading();
  6.         handleIntoScene();
  7.     }
  8.  
  9. // 在加载模型的时候，先给模型加入动画进行缓存
  10. function setRotateAnimation(gltf){
  11.         gltf.scene.traverse((e)=>{
  12.             const polySurface_number = e.name.replace(/polySurface/g,'')
  13.             const rotatePoly = ['58','81','90','102']
  14.             if (rotatePoly.includes(polySurface_number)){
  15.                 const rotation = e.rotation
  16.                 const tween  = new TWEEN.Tween( e.rotation)
  17.                     .to({x:rotation.x,y:Math.PI * 2,z:rotation.z}, 50)
  18.                     .easing(TWEEN.Easing.Linear.None)
  19.                     .repeat(Infinity)
  20.                 flyPoly.push(tween)
  21.             }
  22.         })
  23.     }
  24.  
  25. function handleDockClick() {
  26.     const handleCheck = () =>{}
  27.  
  28.     const handleColor = () =>{}
  29.  
  30.     // 起飞
  31.     const handleFly = () =>{
  32.         isFly =  !isFly
  33.         flyPoly.forEach(item=>{
  34.             if (isFly){
  35.                 item && item.start()
  36.             }else {
  37.                 item && item.stop()
  38.             }
  39.         })
  40.     }
  41.  
  42.    // 点击事件的事件委托
  43.     delegate(dock, 'click', 'i', function(e){
  44.         const DOCK_MAP = [
  45.             {
  46.                 target: ()=> e.target.classList.contains('icon_check'),
  47.                 handler: handleCheck
  48.             },
  49.             {
  50.                 target: ()=> e.target.classList.contains('icon_color'),
  51.                 handler: handleColor
  52.             },
  53.             {
  54.                 target: ()=> e.target.classList.contains('icon_fly'),
  55.                 handler: handleFly
  56.             }
  57.         ]
  58.         const event = DOCK_MAP.find(item => item.target());
  59.         if (event) {
  60.             event.handler();
  61.         }
  62.     })
  63.  
  64. }

起飞这里为了给机翼有个由慢到快的加速效果，然后停止的时候也有个由快到慢的效果，动画的方式需要做个阻尼运动。因此，改变一下动画的方式，取消TWEEN动画，用requestAnimationFrame代替。（由于帧率问题gif图的机翼旋转看上去会有点奇怪）

dfa4c1983c084a53b278a8deb41c4a29.gif

  1.  function flyGltf(){
  2.         gltf.scene.traverse((e)=>{
  3.             const polySurface_number = e.name.replace(/polySurface/g,'')
  4.             const rotatePoly = ['60','81','90','94']
  5.             if (rotatePoly.includes(polySurface_number)){
  6.                 e.rotation.y += flySeep
  7.             }
  8.         })
  9.         // flySeep 来控制节奏
  10.         if (flySeep <= 1 && isFly){
  11.             flySeep += 0.002
  12.         }else {
  13.             flySeep -= 0.002
  14.         }
  15.         if (flySeep <= 0){
  16.             flySeep = 0
  17.         }
  18.     }
  19.  
  20.  
  21.  function animate(){
  22.         requestAnimationFrame( animate );
  23.         updateJump();
  24.         controls.update();
  25.         TWEEN.update();
  26.         beginFly && flyGltf(); // 在requestAnimationFrame下执行动画，实现快慢节奏变换
  27.         isLoading && updateCamera();
  28.         !isLoading && hoverPoint();
  29.         renderer.render( scene, camera );
  30.     }

颜色板块

这里给页面添加一个色板，用于改变模型的颜色，当然也可以利用该方式去对模型进行其他操作

b45de9b31f114fdfafa59af84adc346c.gif

 如何知道替换颜色的模型，是哪个部位呢？可以用在上文提到过的editor编辑器，模型导入进去后，点击某个部位，就可以看到他的名称是什么了。

1876943d2d6648b78cb259163dae8728.png

  1. function handleDockClick() {
  2.     const handleCheck = () =>{}
  3.  
  4.      // 替换颜色。
  5.      const handleColor = () =>{
  6.             isAppendColor = !isAppendColor;
  7.             if (isAppendColor){
  8.                 color_map.classList.add('show-color-map');
  9.                 delegate(color_map, 'click', 'div', function(e){
  10.                     setColorMap(e.target.style.backgroundColor)
  11.                 })
  12.             }else {
  13.                 color_map.classList.remove('show-color-map');
  14.             }
  15.  
  16.             const setColorMap = (color) =>{
  17.                 gltf.scene.traverse((e)=>{
  18.                     const polySurface_number = e.name.replace(/polySurface/g,'')
  19.                     const windBlade = ['21','101','201'] // 给名为这几个的模型，替换颜色
  20.                     if (windBlade.includes(polySurface_number)){
  21.                         e.material.color.set(color)
  22.                     }
  23.                 })
  24.             }
  25.  
  26.         }  
  27.  
  28.     const handleFly = () =>{}
  29.  
  30.    // 点击事件的事件委托
  31.     delegate(dock, 'click', 'i', function(e){
  32.         const DOCK_MAP = [
  33.             {
  34.                 target: ()=> e.target.classList.contains('icon_check'),
  35.                 handler: handleCheck
  36.             },
  37.             {
  38.                 target: ()=> e.target.classList.contains('icon_color'),
  39.                 handler: handleColor
  40.             },
  41.             {
  42.                 target: ()=> e.target.classList.contains('icon_fly'),
  43.                 handler: handleFly
  44.             }
  45.         ]
  46.         const event = DOCK_MAP.find(item => item.target());
  47.         if (event) {
  48.             event.handler();
  49.         }
  50.     })
  51.  
  52. }

射线处理

射线处理，就是当鼠标移动到射线投射的位置上时候，可以显示出对应的模型信息和知道当前鼠标位置是否在某个模型上面，一般用于碰撞检测。我这里只用来显示一些大概的内容。

62ebf09a7d1441d497d9190d4c0a9073.gif

  1. function hoverPoint(){
  2.    if (mouse.x === 0 && mouse.y ===0) return;
  3.    raycaster.setFromCamera(mouse, camera); // 投射到鼠标上面
  4.    let intersects = raycaster.intersectObjects(scene.children); // 作用到场景
  5.  
  6.    if(INTERSECTED) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  7.  
  8.    if (intersects.length && intersects[0].object.name){
  9.        INTERSECTED = intersects[0].object; // 用一个变量来缓存被投射到的模型信息
  10.        // 这里改变的是变量中保存的模型信息，就不会改变到原本模型的信息，也有利用做其他操作
  11.        INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
  12.        INTERSECTED.material.emissive.setHex( 0x8F8BFF );
  13.        showTip(INTERSECTED?.material.name)
  14.    }else {
  15.      if (INTERSECTED) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  16.             INTERSECTED = null;
  17.             tip.style.display = 'none';
  18.         }
  19.     }
  20.  
  21. // 监听鼠标移动事件，这里需要对鼠标做一个处理
  22. canvas.addEventListener('mousemove', function(event) {
  23.   client = {
  24.      x: event.clientX,
  25.      y: event.clientY
  26.   }
  27.   clearMouse();
  28.   mouse.x = (event.clientX / window.innerWidth) * 2 - 1; // -1 ~ 1
  29.   mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // -1 ~ 1
  30.  });          

射线的选中效果也可以换另外一种方式，例如下面这种高亮边方式

ede740fe480e49ee9070fa249e0a8cb6.gif

  1. const initRender = () =>{
  2.             renderer = new THREE.WebGLRenderer( { antialias: true,canvas:canvas } );
  3.             renderer.setPixelRatio( window.devicePixelRatio );
  4.             renderer.setSize( window.innerWidth, window.innerHeight );
  5.             renderer.shadowMap.enabled = true;
  6.  
  7.             // 后期处理
  8.             composer = new EffectComposer( renderer );
  9.             const renderPass = new RenderPass( scene, camera );
  10.             composer.addPass( renderPass );
  11.             outlinePass = new OutlinePass( new THREE.Vector2( window.innerWidth, window.innerHeight ), scene, camera );
  12.             composer.addPass( outlinePass );
  13.  
  14.             // const textureLoader = new THREE.TextureLoader();
  15.             // textureLoader.load( '../image/tri_pattern.jpg', function ( texture ) {
  16.             //    用贴图方式设置高亮边
  17.             //     outlinePass.patternTexture = texture;
  18.             //     texture.wrapS = THREE.RepeatWrapping;
  19.             //     texture.wrapT = THREE.RepeatWrapping;
  20.             //
  21.             // } );
  22.  
  23.             // 高亮边的样式
  24.             outlinePass.edgeStrength = 10.0 // 边框的亮度
  25.             outlinePass.edgeGlow = 1 // 光晕[0,1]
  26.             outlinePass.usePatternTexture = false // 是否使用父级的材质
  27.             outlinePass.edgeThickness = 1.0 // 边框宽度
  28.             outlinePass.downSampleRatio = 1 // 边框弯曲度
  29.             outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度
  30.             outlinePass.visibleEdgeColor.set(parseInt(0x00ff00)) // 呼吸显示的颜色
  31.             outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色
  32.             outlinePass.clear = true
  33.  
  34.             const outputPass = new OutputPass();
  35.             composer.addPass( outputPass );
  36.  
  37.             effectFXAA = new ShaderPass( FXAAShader );
  38.             effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
  39.             effectFXAA.renderToScreen = true
  40.             composer.addPass( effectFXAA );
  41.  
  42.         }
  43.  
  44.     // 收集射线位置，调用前，先清空之前的收集
  45.     function addSelectedObject( object ) {
  46.         selectedObjects = [];
  47.         selectedObjects.push( object );
  48.     }
  49.  
  50.  function hoverPoint(){
  51.         if (mouse.x === 0 && mouse.y ===0) return;
  52.         raycaster.setFromCamera(mouse, camera);
  53.         let intersects = raycaster.intersectObjects(scene.children);
  54.         if(INTERSECTED) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  55.         if (intersects.length && intersects[0].object.name && intersects[0].object.name !== 'sprite'){
  56.             INTERSECTED = intersects[0].object;
  57.             addSelectedObject( INTERSECTED ); // 收集射线到的区域并执行高亮边
  58.             outlinePass.selectedObjects = selectedObjects;
  59.             // INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
  60.             // INTERSECTED.material.emissive.setHex( 0x8F8BFF );
  61.             showTip(INTERSECTED?.material.name)
  62.         }else {
  63.             // if (INTERSECTED) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
  64.             INTERSECTED = null;
  65.             outlinePass.selectedObjects = []
  66.             tip.style.display = 'none';
  67.         }
  68.     }

动画处理

剩下的就是一些常用的CSS动画、CSS过渡动画和JS动画的细节处理了。当然这里还有一个加载完毕进场的阻尼效果。b4ccda3f7ed34eddb423910fb85a0974.gif

  1.     function updateCamera() {
  2.         const vector = new THREE.Vector3()
  3.         targetPosition.addScaledVector(vector, 0.25);
  4.         const {x,y,z} = targetPosition
  5.  
  6.         camera.position.x += (targetPosition.x - camera.position.x) * dampingFactor;
  7.         camera.position.y += (targetPosition.y - camera.position.y) * dampingFactor;
  8.         camera.position.z += (targetPosition.z - camera.position.z) * dampingFactor;
  9.         const cameraX = camera.position.x.toFixed(1);
  10.         const cameraY = camera.position.y.toFixed(1);
  11.         const cameraZ = camera.position.z.toFixed(1);
  12.         if (Number(cameraX) <= x && Number(cameraY) <= y && Number(cameraZ) <= z){
  13.             isLoading = false
  14.             title.classList.remove("display-none");
  15.             dock_con.classList.remove("display-none");
  16.         }
  17.  
  18.     }
  19.   
  20.     function animate(){
  21.         requestAnimationFrame( animate );
  22.         updateJump();
  23.         controls.update();
  24.         TWEEN.update();
  25.         isLoading && updateCamera();
  26.         !isLoading && hoverPoint();
  27.         renderer.render( scene, camera );
  28.     }

操作杆处理

给摄像机添加一个前后左右的类似操作杆的效果，然后移动的时候，视口中间出现一些跳动的文字对应操作的按键。

ed2909be8da24afdac8e38cb52cbb270.gif

  1.  let mouse = new THREE.Vector2();
  2.     let velocity = new THREE.Vector3();
  3.     let up_vector = new THREE.Vector3(0, 1, 0);
  4.     let temp_vector = new THREE.Vector3();
  5.     let targetPosition = new THREE.Vector3(1.8, 1.9, 3.4);
  6.  
  7. // 跳动的文字
  8. const throttledScrollHandler = throttle(function() {
  9.     const id = document.querySelector('.text-up')
  10.     new TextUp( {id:id,text: keyCode.toUpperCase()} ) // 在节流的控制下生成文字
  11. }, 500);
  12.  
  13.  
  14. // 操作杆
  15. document.addEventListener('keydown', function(event) {
  16.     keyCode = event.key === ' '? 'space' : event.key
  17.     camera.position.addScaledVector(velocity, 0.5);
  18.     const angle = controls.getAzimuthalAngle();
  19.     const speed = 0.25
  20.     mouse = new THREE.Vector2(0,0)
  21.     switch (event.key) {
  22.                 case 'w':
  23.                     temp_vector.set(0, 0, -1).applyAxisAngle(up_vector, angle);
  24.                     camera.position.addScaledVector(temp_vector, speed);
  25.                     throttledScrollHandler()
  26.                     break;
  27.                 case 's':
  28.                     temp_vector.set(0, 0, 1).applyAxisAngle(up_vector, angle);
  29.                     camera.position.addScaledVector(temp_vector, speed);
  30.                     throttledScrollHandler()
  31.                     break;
  32.                 case 'a':
  33.                     temp_vector.set(-1, 0, 0).applyAxisAngle(up_vector, angle);
  34.                     camera.position.addScaledVector(temp_vector, speed);
  35.                     throttledScrollHandler()
  36.                     break;
  37.                 case 'd':
  38.                     temp_vector.set(1, 0, 0).applyAxisAngle(up_vector, angle);
  39.                     camera.position.addScaledVector(temp_vector, speed);
  40.                     throttledScrollHandler()
  41.                     break;
  42.                 case ' ':
  43.                     jump();
  44.                     throttledScrollHandler()
  45.                     break;
  46.             }
  47.         });
  48.  
  49.     
  50.  
  51.   function updateJump(){
  52.         if (isJumping) {
  53.             camera.position.y += jumpVelocity;
  54.             jumpVelocity -= 0.05;
  55.             if (camera.position.y <= 1.5) {
  56.                 camera.position.y = 1.5;
  57.                 isJumping = false;
  58.             }
  59.         }
  60.     }
  61.  
  62.     function jump() {
  63.         if (!isJumping) {
  64.             jumpVelocity = 0.3 * maxJumpHeight
  65.             console.log(jumpVelocity);
  66.             isJumping = true;
  67.         }
  68.     }

 动态反射

给地面添加一个模型反射效果和一个shader反射效果。

418224de9ec44670b93d302406106b3d.gif

 材质添加反光贴图

cubeCamera.position.copy(camera.position);

将cubeCamera的位置设置为与常规相机camera相同的位置。在Three.js中，每个对象（包括相机）都有一个.position属性，它是一个Vector3对象，表示该对象在三维空间中的位置。.copy()方法用于复制另一个Vector3对象的位置到当前对象。

cubeCamera.position.y *= -1;

将cubeCamera的y坐标（即高度）取反。换句话说，如果cubeCamera原本在y=10的位置，执行这行代码后，它会被移动到y=-10的位置。这通常用于确保立方体相机能够捕获场景的背面（即常规相机背后的场景），因为立方体相机需要拍摄场景的六个方向（前、后、左、右、上、下）。

cubeCamera.update(renderer, scene);

更新cubeCamera的六个纹理面。它告诉cubeCamera在当前的位置和方向上，使用给定的renderer（渲染器）和scene（场景）来捕获场景的六个方向的图像，并将这些图像存储在cubeCamera的立方体纹理中。

  1. // 新建一个立方相机cubeCamera，用于存储立方体相机捕获的图像
  2. cubeRenderTarget = new THREE.WebGLCubeRenderTarget(1024);
  3. cubeRenderTarget.texture.type = THREE.HalfFloatType;
  4. cubeCamera = new THREE.CubeCamera(0.1,200,cubeRenderTarget);
  5.  
  6. const initGround = () =>{
  7.     const planeGeometry = new THREE.PlaneGeometry( 40, 40 )
  8.     const meshPhongMaterial = new THREE.MeshStandardMaterial( {
  9.         color: 0x333333,
  10.         depthWrite: false,
  11.         roughness: 0.1,
  12.         metalness: 0.5,
  13.         envMap: cubeRenderTarget.texture,   // 给材质添加一个环境贴图，实现反光效果
  14.     } )
  15.     const ground = new THREE.Mesh( planeGeometry, meshPhongMaterial);
  16.     ground.rotation.x = - Math.PI / 2;
  17.     ground.receiveShadow = true;
  18.     addShader( meshPhongMaterial ); // 给地面加入shader
  19.     scene.add( ground );
  20. }
  21.  
  22. function animate(){
  23.     requestAnimationFrame( animate );
  24.    // 确保cubeCamera与常规相机camera在同一位置，但高度相反，然后更新cubeCamera的立方体纹理以 
  25.    // 捕获场景的六个方向的图像。
  26.     cubeCamera.position.copy(camera.position);
  27.     cubeCamera.position.y *= -1;
  28.     cubeCamera.update(renderer,scene);
  29. }

加入shader 

vertexShader1: 开始部分的顶点着色器代码。

vertexShader3: 顶点着色器中的一段替换代码，包含 #include <fog_vertex> 的替换。

fragmentShader1: 开始部分的片段着色器代码。

fragmentShader2: 片段着色器中的一段替换代码，包含 #include <dithering_fragment> 的替换。

  1. function addShader(material){
  2.     const vertexShader1 = `uniform float uSize;
  3.           varying vec2 vUv;
  4.           void main() {`;
  5.     const vertexShader3 = `#include <fog_vertex>
  6.                     vUv=vec2(-position.x,-position.y)/uSize;`;
  7.     const fragmentShader1 = `varying vec2 vUv;
  8.             uniform float uTime;
  9.             uniform vec3 uColor;
  10.             uniform float uSize;
  11.             void main() {`;
  12.     const fragmentShader2 = `#include <dithering_fragment>
  13.         float d=length(vUv);
  14.               if(d >= uTime&&d<=uTime+ 0.1) {
  15.                 gl_FragColor.rgb = gl_FragColor.rgb+mix(uColor,gl_FragColor.rgb,1.0-(d-uTime)*10.0 )*0.5  ;
  16.               }`;
  17.     material.onBeforeCompile = (shader) => {
  18.         shaders.push(shader);
  19.         shader.uniforms.uSize = { value: 50 };
  20.         shader.uniforms.uTime = { value: 0.1 };
  21.         shader.uniforms.uColor = { value: new THREE.Color('#4ff9ff') };
  22.         shader.vertexShader = shader.vertexShader.replace('void main() {', vertexShader1);
  23.         shader.vertexShader = shader.vertexShader.replace(
  24.             '#include <fog_vertex>',
  25.             vertexShader3
  26.         );
  27.         shader.fragmentShader = shader.fragmentShader.replace('void main() {', fragmentShader1);
  28.         shader.fragmentShader = shader.fragmentShader.replace(
  29.             '#include <dithering_fragment>',
  30.             fragmentShader2
  31.         );
  32.     };
  33. }
  34.  
  35. function animate(){
  36.  
  37.     if (shaders?.length) {
  38.         // 着色器动画
  39.         shaders.forEach((shader) => {
  40.             shader.uniforms.uTime.value += 0.008;
  41.             if (shader.uniforms.uTime.value >= 1) {
  42.                 shader.uniforms.uTime.value = 0;
  43.             }
  44.         });
  45.     }
  46. }

截取图片保存 

通过获取场景，来实现拍照功能

fc0cfa1e0e1f4e1d8d982092c59766ea.png

  1.     function getGltfUrl() {
  2.       return new Promise((resolve) => {
  3.         renderer.render(scene, camera)
  4.         resolve(canvas.toDataURL('image/png'))
  5.       })
  6.     },
  7.     const handleTakePicture = async ()=> {
  8.       imageMask.src = await getGltfUrl();
  9.       photoMask.classList.remove('display-none');
  10.       showWhiteScreen()
  11.     }

源码地址

下载源码的时候，记得顺手留下个star ♥♥

GitHub - Trevor-Han/basis-three: 基于threejs的模型交互，包括方向控制、颜色贴图、阻尼效果、TWEEN动画、JavaScript动画、CSS3过渡等效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/939152
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号