vue3 Three.js实现Draco压缩模型和加载模型

vue3 安装three gsap

npm  install three

npm install gsap

首先在桌面创建一个文件夹yasuo
接着使用cmd打开文件夹，在输入

npm install -g gltf-pipeline

然后使用将模型文件放到压缩文件夹中

gltf-pipeline -i test.glb -o test-pipeline.glb -d

进行压缩模型

还可以把gltf文件转换为glb文件

gltf-pipeline -i model.gltf -o model.glb -d

把 ‘node_modules/three/examples\jsm\libs\draco\gltf里面复制’ );//设置解压库文件路径
把draco文件夹拷贝到public目录下

<template>
    <div id="container4" ref="canvasDom"></div>
 </template>
 <script  setup>
   import * as THREE from 'three'
   import {ref,onMounted} from 'vue'
   import{OrbitControls} from'three/examples/jsm/controls/OrbitControls.js'
   import gsap from 'gsap';
   import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
   import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js'
   //初始化场景
   const scene=new THREE.Scene();
   //初始化相机
   const camera=new THREE.PerspectiveCamera(75,window.innerWidth /window.innerHeight,0.1,1000);
   //设置相机位置
   camera.position.set(-3.23,2.98,4.06);
   //初始化渲染器
   const renderer=new THREE.WebGLRenderer({antialias:true});
   //设置尺寸
   renderer.setSize(window.innerWidth,window.innerHeight);
   //渲染背景
   renderer.setClearColor('#000');
   scene.background=new THREE.Color('#ccc');
   scene.environment=new THREE.Color('#ccc');
   //设置背景纹理
   const loader=new THREE.TextureLoader();
   const bgTexture=loader.load('../public/universe/sun.jpeg') 
   //球形的全景的纹理图片  设置有折射的纹理  打造水晶效果
   bgTexture.mapping=THREE.EquirectangularRefractionMapping;

  

   //添加环境光
   const ambient=new THREE.AmbientLight(0xffffff,1);
   scene.add(ambient);
 
 //加载gltf模型  下载免费的模型地址https://www.cpengx.cn
 const Loader=new GLTFLoader();
   //模型不是立马就可以加载进来 解压缩实例化一下
    const dracoLoader=new DRACOLoader();
    //解压缩路径
    dracoLoader.setDecoderPath('../public/draco/gltf/');
    //加载文件
    Loader.setDRACOLoader(dracoLoader);
    Loader.load('../public/jifang/model.glb',(gltf)=>{
        const model=gltf.scene
        //使用traverse递归修改模型材质和颜色
        model.traverse((child)=>{
        if(child.isMesh){  //如果是物体就输出名字
          console.log(child.name)
         // console.log(child)
        }
        //判断是否是轮毂 也必须是物体  并列的关系
        //  if(child.isMesh && child.name.includes('车身')){
        //   carBody=child
        //   carBody.material=bodyMateerial;
        // }
       
     })
        scene.add(model);
    },( xhr )=> {
        console.log(xhr.total)
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

     })
 
 //封装一个渲染函数 动画
 const render=()=>{
   
    renderer.render(scene,camera);
    requestAnimationFrame(render);
 }
 
 let canvasDom=ref(null);  //获取元素需要在div上加上ref 可以直接获取dom
 //监听浏览器改变大小时重新渲染
    
  const onWindowResize=()=> {

    camera.aspect = window.innerWidth / window.innerHeight
    renderer.setSize(window.innerWidth, window.innerHeight)
     //更新相机的投影矩阵
     camera.updateProjectionMatrix()
    
 }
 window.addEventListener('resize ', onWindowResize)
   //挂载完毕之后获取dom  
   onMounted(()=>{  //生命周期函数
     //控制器
     const controls = new OrbitControls(camera, renderer.domElement)
    
    /* console.log(canvasDom.value) */
     canvasDom.value.appendChild(renderer.domElement);
     render();
   })
 
 </script>
   <style  >
   *{
     margin: 0;
     padding: 0;
   }
   #container4{
       height: 100vh;
       width:100vw;
       background-color:#f0f0f0 ;
   }
   </style>