【3D商城】添加商品产品模型

加载模型

工程目录结构如下，在加载模型时候，选择Base3d.js文件
在这里插入图片描述

通过函数设置模型

  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();

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

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

添加addMesh() 函数

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

结果显示

添加的电脑模型能在场景中显示而且可以360度观察预览
在这里插入图片描述

0 条评论