2023.9.13今天我學(xué)習(xí)了如何把3d建模里面的模型引入到vue中，并可以實(shí)現(xiàn)拖動(dòng)，點(diǎn)擊的效果：

首先安裝：

npm install three

相關(guān)代碼如下：

<!--3d基礎(chǔ)版，實(shí)現(xiàn)單個(gè)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"; //鼠標(biāo)控制器

export default {
  data() {
    return {
      scene: null,//場(chǎng)景
      camera: null,//照相機(jī)
      renderer: null,//渲染器
      raycaster: null,
      mesh: null,//物體
      mouse: null,
      onCLick: null,
      childList: null,
      light: null,//燈光
      cuModel: "", //當(dāng)前選中模型
      mouseControls: null, //軌道控制
      pointLight: null, //點(diǎn)光源
      ambientLight: null, //環(huán)境光
      num: 0,//點(diǎn)擊次數(shù)
    }
  },
  mounted() {
    this.init()
    window.addEventListener("click", this.onClick, false);
  },

  methods: {
    init() {
      // 創(chuàng)建場(chǎng)景
      this.createScene()
      // 創(chuàng)建照相機(jī)
      this.createCamera()
      // 創(chuàng)建渲染器
      this.createRenderer()
      // 創(chuàng)建燈光
      this.createLight()
      // 創(chuàng)建控制器
      this.createOrbitControls();
      // 創(chuàng)建物體
      this.createMesh()
      // 觸發(fā)
      this.render()
    },
    // 創(chuàng)建場(chǎng)景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 創(chuàng)建照相機(jī)
    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)
    },
    // 創(chuàng)建渲染器
    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)
    },
    // 創(chuàng)建燈光
    createLight() {
      this.light = new THREE.DirectionalLight({
        color: 'red'
      })
      this.light.position.set(100, 100, 100)
      this.scene.add(this.light)
    },
    // 創(chuàng)建物體
    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()
      })
    },
    //觸發(fā)
    render() {
      this.renderer.render(this.scene, this.camera)
    },
    //創(chuàng)建軌道控制
    createOrbitControls() {
      //沒有縮放阻尼
      this.mouseControls = new OrbitControls(
          this.camera,
          this.renderer.domElement
      ); //創(chuàng)建控件對(duì)象
      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博客文章來源地址http://www.zghlxwxcb.cn/news/detail-773445.html

到了這里，關(guān)于vue2+three.js+blender（實(shí)現(xiàn)3d 模型引入并可點(diǎn)擊效果）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！