添加商品产品模型| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第3天

加载模型

所开发的项目部分记录，工程目录结构如下，在加载模型时候，选择Base3d.js文件

通过函数设置模型

定义一个对象loader对此new一个新对象GLTFLoader()调用setPath方法()jing

  setModel(modelName) {
    return new Promise((resolve, reject) => {
      const loader = new GLTFLoader().setPath("files/gltf/");   //初始化解析器
      loader.load(   //加载具体文件
        modelName,
        (gltf) => {
          this.model = gltf.scene.children[0];
          this.scene.add(this.model);
          resolve(this.modelName + "模型添加成功");
        });
    });
  }

导入模型解析器

// 导入模型解析器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

在Base3d对象中给一个model的属性，this.model ，将模型对象给到 this.model

constructor(selector, onFinish) {
    this.container = document.querySelector(selector);
    this.camera;
    this.scene;
    this.renderer;
    this.model;
    this.init();
    this.animate();
  }

场景初始化

添加物体函数 this.addMesh();通过addMesh()函数进行对3D商品添加的初始化操作，为之后添加各种3D模型做准备

init() {
    //   初始化场景
    this.initScene();
    // 初始化相机
    this.initCamera();

    // 初始化渲染器
    this.initRenderer();
    // 控制器
    this.initControls();
    // 添加物体
    this.addMesh();
}

添加addMesh()函数，通过addMesh()函数将之前准备好的模型导入，再添加好模型后再对模型进行点击，移动拖拽等操作

  async addMesh() {
    let res = await this.setModel("bag2.glb");
    this.onFinish(res);
  }

结果显示

添加的电脑模型能在场景中显示而且可以360度观察预览