vue2+three.js+blender（实现3d 模型引入并可点击效果）

2023.9.13今天我学习了如何把3d建模里面的模型引入到vue中，并可以实现拖动，点击的效果：

首先安装：

npm install three

相关代码如下：

<!--3d基础版，实现单个3d图形-->
<template>
  <div>
    <div id="content"/>
  </div>
</template>
<script>
import * as THREE from 'three'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"; //鼠标控制器

export default {
  data() {
    return {
      scene: null,//场景
      camera: null,//照相机
      renderer: null,//渲染器
      raycaster: null,
      mesh: null,//物体
      mouse: null,
      onCLick: null,
      childList: null,
      light: null,//灯光
      cuModel: "", //当前选中模型
      mouseControls: null, //轨道控制
      pointLight: null, //点光源
      ambientLight: null, //环境光
      num: 0,//点击次数
    }
  },
  mounted() {
    this.init()
    window.addEventListener("click", this.onClick, false);
  },

  methods: {
    init() {
      // 创建场景
      this.createScene()
      // 创建照相机
      this.createCamera()
      // 创建渲染器
      this.createRenderer()
      // 创建灯光
      this.createLight()
      // 创建控制器
      this.createOrbitControls();
      // 创建物体
      this.createMesh()
      // 触发
      this.render()
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建照相机
    createCamera() {
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
      this.camera.position.set(200, 200, 200)
      this.camera.lookAt(this.scene.position)
    },
    // 创建渲染器
    createRenderer() {
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer.setClearColor(new THREE.Color(0xffffff))
      document.getElementById('content').appendChild(this.renderer.domElement)
    },
    // 创建灯光
    createLight() {
      this.light = new THREE.DirectionalLight({
        color: 'red'
      })
      this.light.position.set(100, 100, 100)
      this.scene.add(this.light)
    },
    // 创建物体
    createMesh() {
      let lm = new Promise((resolve, reject) => {
        let loader = new GLTFLoader();
        loader.load('model/bear.glb', (gltf) => {
          resolve(gltf);
        })
      })
      lm.then((res) => {
        res.scene.position.set(
            -100, 0, 0
        )
        res.scene.scale.set(20, 20, 20)
        res.scene.userData = {id: 1, name: 'bear'}
        this.scene.add(res.scene)
        this.render()
      })
    },
    //触发
    render() {
      this.renderer.render(this.scene, this.camera)
    },
    //创建轨道控制
    createOrbitControls() {
      //没有缩放阻尼
      this.mouseControls = new OrbitControls(
          this.camera,
          this.renderer.domElement
      ); //创建控件对象
      this.mouseControls.addEventListener('change', () => {
        this.renderer.render(this.scene, this.camera)
      })
    },
    onClick(event) {
      this.raycaster = new THREE.Raycaster();
      this.mouse = new THREE.Vector2();
      this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
      this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
      this.raycaster.setFromCamera(this.mouse, this.camera);
      const intersects = this.raycaster.intersectObjects(this.scene.children, true);
      if (intersects.length > 0) {
        const clickedObject = intersects[0].object;
        if (clickedObject.name === clickedObject.name) {
          switch (this.num) {
            case 0:
              clickedObject.material.color.set(0xff0000)
              this.num++;
              break;
            case 1:
              clickedObject.material.color.set(0x00ff00)
              this.num++;
              break;
            case 2:
              clickedObject.material.color.set(0xFFFF00)
              this.num++;
              break;
            default:
              clickedObject.material.color.set(0x0000FF)
              this.num -= 3
          }
          this.render()
        }
      }
    }
  }
}
</script>

如果没有图片可以去

Three.js--》建模软件如何加载外部3D模型？_threejs加载3d模型_亦世凡华、的博客-CSDN博客