当前位置：首页 > news >正文

three学习记录

news 来源：原创 2025/5/18 7:56:20

BUG01：THREE.GLTFLoader: No DRACOLoader instance provided.

原因：3d模型是压缩过的，需要 DRACOLoader解压

方法：将项目下的node_modules/three/examples/jsm/libs/draco文件夹复制到public下，

并在文件中引入

// 导入GLTF
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';


// 实例化加载解析器-加载压缩的模型
const dracoLoader = new DRACOLoader();
// 设置draco路径
dracoLoader.setDecoderPath( './draco/' );
dracoLoader.setDecoderConfig({ type: 'js' })
// 实例化加载器
const gltfLoader = new GLTFLoader()
// 设置gltf解码器
gltfLoader.setDRACOLoader( dracoLoader );
// 加载模型
gltfLoader.load(
  // 模型路径
  "./model/city.glb",
  // 加载完成回调
  (gltf) => {
    console.log(gltf);
    
  }
)

BUG02：鼠标点击画布，图形会消失

原因：把轨道控制器错误的挂载到了body上

const contorls = new OrbitControls(camera,document.body)

解决方法：应把【document.body】改为【renderer.domElement】

tips:小小的夸一下cursor，对学习新知识真的有很大帮助【赞】