three.js中遇到的问题

three.js电子文档

Three.js中最重要的三大组件:
场景——Scene
相机——Camera
渲染器——Renderer

一、无法正确引入外部glb文件模型

将你的 gltf 模型放在 vue项目中的 public 文件夹下，注意，只有将 gltf 模型放在静态资源文件夹下才能被访问到。

let group = new Group();
const loader = new GLTFLoader();
//加载模型
loader.load("models/1.glb", gltf => {
  group = gltf.scene;
  scene.add(model);
});

Clock对象以及简单应用

标题压缩glb文件并引用

npm i -g gltf-pipeline
gltf-pipeline -i input.glb -o output.glb -d

const dracoLoader = new DRACOLoader(); // 压缩glb文件
dracoLoader.setDecoderPath("gltf/"); //设置解压库文件路径
dracoLoader.setDecoderConfig({ type: "js" }); //使用js方式解压
dracoLoader.preload(); //初始化_initDecoder 解码器
loader.setDRACOLoader(dracoLoader);

二.如何添加css元素到模型中

var labelRenderer = new CSS3DRenderer();
labelRenderer.setSize(width, height);
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = "0px";
labelRenderer.domElement.style.left = "0px";
documnet.body.appendChild(labelRenderer.domElement);

let label = new CSS3DObject(dom);
label.position.x = 10;
label.position.y = 10;
label.position.z = 10;
label.scale.set(0.4, 0.4, 0.4);
//旋转到正面屏幕
label.rotateY(Math.PI / 2);
scene.add(label);

三、点击三维中的弹框没反应

降低three的版本到0.130.0

npm install three@0.130.0 -S