实战意图

依据不同的产品合作接口展现相应的描绘。依据挑选的场景及其物品实现可视化的产品展现作用。作用展现

支撑不同方位展现不同描绘：合作数据装备烘托不同桢的作用

依据选中的产品，切换相应产品作用

依据选中场景，切换相应的场景

实现思路

封装一个Three的函数，支撑设置相机、场景、烘托函数，添加模型解析器，添加物品，整合烘托作用，添加事情监听，完善模型动画展现

详细实现

运用vite建立一个项目，后装置Three支撑，进行详细实现

准备vue项目

• 运用Vite + Vue 建立

# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue

• 依据自己的环境挑选自己的建立代码

npm init vite@latest my-vue-app -- --template vue

• 依据提示创立项目

• 确认项目正常访问

装置 Three

npm install --save three

删去无用代码，添加烘托节点

添加一个场景展现的div，用于烘托3D信息

Three 实战

加载场景及操控器

初始化场景HDR图片

// 初始化场景
  initScene() {
    this.scene = new THREE.Scene();
    this.setEnvMap("001");
  }
 // 场景设置
  setEnvMap(hdr) {
    new RGBELoader().setPath("./hdr/").load(`${hdr}.hdr`, (texture) => {
      texture.mapping = THREE.EquirectangularRefractionMapping;
      this.scene.background = texture;
      this.scene.environment = texture;
    });
  }

确定相机方位

 initCamera() {
    this.camera = new THREE.PerspectiveCamera(
      45, // 角度
      window.innerWidth / window.innerHeight, // 比例
      0.25, // 近
      200 // 远
    );
    // 相机方位
    this.camera.position.set(-1.8, 0.6, 2.7);
  }

烘托：依据相机方位和场景图烘托初始画面

render() {
    this.renderer.render(this.scene, this.camera);
}

动画：烘托初始画面

animate() {
    this.renderer.setAnimationLoop(this.render.bind(this));
}

此时，这个页面只能展现出部分的静态画面，要想经过鼠标操控相机的方位，则需要添加操控器

引进操控器

// 操控器
  initControls() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
  }

加入操控器后，则能够经过鼠标的滑动操控相机的角度

添加产品模型

引进模型解析器

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

添加模型到场景里

setModel(modelName) {
    const loader = new GLTFLoader().setPath("/gltf/");
    loader.load(modelName, (gltf) => {
      this.model = gltf.scene.children[0];
      this.scene.add(gltf.scene);
    });
  }
  // 添加模型
  async addMesh() {
    let res = await this.setModel("bag2.glb");
  }

模型现已加入到场景里，可是模型不在场景中心️，模型比较亮，实在物品看不清楚

打印一下模型解析后的数据，咱们能够看到模型有自己的相机场景动画等信息，咱们能够把当时相应的设置调整成模型的设置

模型调整

调整相机为模型相机

setModel(modelName) {
...
// 修正相机为模型相机
this.camera = gltf.cameras[0];
...
}

调整后模型方位在画面中心

调整场景其他装备

// 设置模型
  setModel(modelName) {
    return new Promise((resolve, reject) => {
      const loader = new GLTFLoader().setPath("./gltf/");
      loader.load(modelName, (gltf) => {
        console.log(gltf);
        this.model && this.model.removeFromParent();
        this.model = gltf.scene.children[0];
        if (modelName === "bag2.glb" && !this.dish) {
          this.dish = gltf.scene.children[5];
          // 修正相机为模型相机
          this.camera = gltf.cameras[0];
          // 调用动画
          this.mixer = new THREE.AnimationMixer(gltf.scene.children[1]);
          this.animateAction = this.mixer.clipAction(gltf.animations[0]);
          // 设置动画播放时长
          this.animateAction.setDuration(20).setLoop(THREE.LoopOnce);
          // 设置播放后中止
          this.animateAction.clampWhenFinished = true;
          //   设置灯光
          this.spotlight1 = gltf.scene.children[2].children[0];
          this.spotlight1.intensity = 1;
          this.spotlight2 = gltf.scene.children[3].children[0];
          this.spotlight2.intensity = 1;
          this.spotlight3 = gltf.scene.children[4].children[0];
          this.spotlight3.intensity = 1;
          // this.scene.add(this.dish);
        }
        this.scene.add(gltf.scene);
        resolve(`${this.modelName}模型添加成功`);
      });
    });
  }

调整参数后的产品展现作用

定时器和滚轮监听动画

// 添加定时器
render() {
    var delta = this.clock.getDelta();
    this.mixer && this.mixer.update(delta);
    this.renderer.render(this.scene, this.camera);
 }
// 监听滚轮事情
    window.addEventListener("mousewheel", this.onMouseWheel.bind(this));
// 监听滚轮事情
  onMouseWheel(e) {
    let timeScale = e.deltaY > 0 ? 1 : -1;
    this.animateAction.setEffectiveTimeScale(timeScale);
    this.animateAction.paused = false;
    this.animateAction.play();
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
    }
    this.timeoutId = setTimeout(() => {
      this.animateAction.halt(0.3);
    }, 300);
  }

场景和产品模型都添加成功，结合动画，能够进行产品的预览

添加窗口监听事情

调整页面窗口时，确保场景的全屏展现

// 监听场景巨细改动，调整烘托尺度
  window.addEventListener("resize", this.onWindowResize.bind(this));
// 监听尺度
  onWindowResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
  }

优化加载

模型加载成功后在展现

 constructor(selector, onFinish) {
    this.onFinish = onFinish;
  }
// 添加物品添加回调函数
async addMesh() {
    let res = await this.setModel("bag2.glb");
    this.onFinish(res);
}

添加商品的介绍

依据duration和time 计算当时处于哪部门节点

window.addEventListener("mousewheel", (e) => {
  let duration = data.base3d.animateAction._clip.duration;
  let time = data.base3d.animateAction.time;
  let index = Math.floor((time / duration) * 4);
  data.descIndex = index;
});

添加挑选场景和产品

创立数据添加操作的dom

<template>
  <div class="loading" v-show="data.isLoading">
    <Loading :progress="data.progress"></Loading>
  </div>
  <div class="product" id="product" v-show="!data.isLoading">
    <div
      class="desc"
      :class="{ active: data.descIndex == i }"
      v-if="data.products[data.pIndex]"
      v-for="(desc, i) in data.products[data.pIndex].desc"
    >
      <h1 class="title">{{ desc.title }}</h1>
      <p class="content">{{ desc.content }}</p>
    </div>
  </div>
  <div class="prod-list">
    <h1><SketchOutlined></SketchOutlined>产品引荐</h1>
    <div class="products">
      <div
        class="prod-item"
        :class="{ active: pI == data.pIndex }"
        v-for="(prod, pI) in data.products"
        @click="changeModel(prod, pI)"
      >
        <div class="prod-title">
          {{ prod.title }}
        </div>
        <div class="img">
          <img :src="prod.imgsrc" :alt="prod.title" />
        </div>
      </div>
    </div>
  </div>
  <div class="scene" id="scene" v-show="!data.isLoading"></div>
  <div class="scene-list">
    <h3><RadarChartOutlined></RadarChartOutlined> 切换运用场景</h3>
    <div class="scenes">
      <div
        class="scene-item"
        v-for="(scene, index) in data.scenes"
        @click="changeHdr(scene, index)"
      >
        <img
          :class="{ active: index == data.sceneIndex }"
          :src="`./hdr/${scene}.jpg`"
          :alt="scene"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import Base3D from "../utils/base3d";
import { reactive, onMounted } from "vue";
const infoList = [
  {
    id: 7589,
    title: "GUCCI 古驰新款女包",
    imgsrc: "./imgs/bag.png",
    price: 17899,
    modelPath: "./gltf/",
    modelName: "bag2.glb",
    desc: [
      {
        title: "与一款全新的邮差包规划。",
        content: "该系列手袋同时推出摩登廓形的水桶包款式",
      },
      {
        title: "向60年前古驰的经典手袋致敬。",
        content: "Gucci 1955马衔扣系列手袋延续经典手袋线条与造型",
      },
      {
        title: "手袋结构规划精巧",
        content: "调配可调理长度的肩带，肩背或斜挎皆宜。",
      },
      {
        title: "GUCCI 1955马衔扣系列手袋",
        content:
          "标志性的马衔扣规划源于马术运动，由金属双环和一条衔链组合而成。",
      },
    ],
  },
  {
    id: 7590,
    title: "Macbook Pro",
    imgsrc: "./imgs/macpro.jpg",
    price: 25899,
    modelPath: "./gltf/",
    modelName: "Macbookpro2.glb",
    desc: [
      {
        title: "超高速M1 Pro和M1 Max芯片",
        content: "带来颠覆性体现和惊人续航",
      },
      {
        title: "炫意图Liquid视网膜XDR显示屏",
        content: "Macbookpro各类强壮端口也都整装就位",
      },
      {
        title: "战力更猛，耐力也更强！",
        content: "无论是剪辑8K视频、编译代码都能随时随地轻松搞定",
      },
      {
        title: "Pro到MAX，霸气不封顶",
        content: "图形处理器速度最高提升至4倍，机器学习性能提升至5倍",
      },
    ],
  },
  {
    id: 7591,
    title: "水晶凉鞋女细跟",
    imgsrc: "./imgs/womenshoes.jpg",
    price: 17899,
    modelPath: "./gltf/",
    modelName: "shoes.glb",
    desc: [
      { title: "白变女神季", content: "性感潮品、优雅轻淑范！" },
      { title: "舒适、焕新", content: "手感光滑、富有弹性、舒适一整天" },
      { title: "特性、魅力", content: "水晶调配金属，凸显柔美气质" },
      { title: "全透、高端水晶", content: "每一处的细节，都很到位!" },
    ],
  },
];
const hdr = ["000", "001", "002", "003", "004", "005"];
const data = reactive({
  products: [],
  isLoading: true,
  scenes: [],
  pIndex: 0,
  sceneIndex: 0,
  base3d: {},
  descIndex: 0,
  progress: 0,
});
function LoadingFinish() {
  data.isLoading = false;
}
onMounted(() => {
  data.products = infoList;
  data.scenes = hdr;
  data.base3d = new Base3D("#scene", LoadingFinish);
  data.base3d.onProgress((e) => {
    let progressNum = e.loaded / e.total;
    progressNum = progressNum.toFixed(2) * 100;
    data.progress = progressNum;
    // console.log(progressNum);
  });
});
window.addEventListener("mousewheel", (e) => {
  console.log(".animateAction", data.base3d.animateAction);
  let duration = data.base3d.animateAction._clip.duration;
  let time = data.base3d.animateAction.time;
  let index = Math.floor((time / duration) * 4);
  data.descIndex = index;
});
</script>
<style scoped>
.desc {
  position: fixed;
  z-index: 100000;
  background-color: rgba(255, 255, 255, 0.5);
  width: 600px;
  top: 100px;
  left: 50%;
  margin-left: -300px;
  transition: all 0.5s;
  transform: translate(-100vw, 0);
  padding: 15px;
}
.desc.active {
  transform: translate(0, 0);
}
.prod-list,
.scene-list {
  display: block;
  position: fixed;
  top: 0;
  z-index: 999;
  width: auto;
}
h1 {
  font-size: 20px;
  font-weight: 900;
  padding: 10px 25px 0;
}
.prod-list {
  left: 0;
}
.scene-list {
  right: 0;
}
.products {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.prod-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 2px 2px 5px #666;
  transition: all 0.3s;
}
.prod-item img {
  width: 190px;
}
.prod-title {
  padding: 0 20px;
}
.scene-item {
  padding: 6px 0;
}
.scene-item img {
  width: 250px;
  border-radius: 10px;
  box-shadow: 2px 2px 10px #666;
  transition: all 0.3s;
}
img.active {
  box-shadow: 2px 2px 5px #666, 0px 0px 10px red;
}
img:hover {
  transform: translate(0px, -5px);
  box-shadow: 2px 2px 5px #666, 0px 0px 10px orangered;
}
</style>

添加操作事情

function changeModel(prod, pI) {
  data.pIndex = pI;
  data.base3d.setModel(prod.modelName);
}
function changeHdr(scene, index) {
  data.sceneIndex = index;
  data.base3d.setEnvMap(scene);
}

大功告成

支撑不同方位展现不同描绘：合作数据装备烘托不同桢的作用

依据选中的产品，切换相应产品作用

依据选中场景，切换相应的场景

总结

• 经过类的方法创立的方法，能够很好的保存了创立过程中3D模型的所具有的属性和功用，在实例化后，能够很快捷的获取到相应的属性
• 在创立场景/模型时，能够依据要突出的作用调整相应的参数，咱们能够认真调查创立出来的实例对象中包括的属性和方法，便利咱们烘托运用

  

参阅包/支撑

• Vite中文网 脚手架东西
• Three.js 参阅文档
• 本项目参阅视频【老陈打码 WEB 3D体系体系课程-Three.js可视化企业实战WEBGL课】