Use vue para aprender three.js para cargar el modelo de formato VRML de carga geométrica avanzada

1.efecto demo

Como se muestra en la figura anterior, la demostración carga el modelo en formato VRML a través de VRMLLoader y lo muestra en la página

2. Puntos de implementación

2.1 Ruta de colocación del modelo VRML

Al cargar archivos en vue, la ruta predeterminada es pública, por lo que los archivos que deben cargarse se colocan en esta ruta y la variable publicPath se crea en el atributo de datos de vue. El valor de esta variable es el proceso de la variable de entorno. env.BASE_URL en vue

data() {
    
    
  return {
    
    
    publicPath: process.env.BASE_URL
  }
}

2.2 Cargar modelo VRML

Aquí importamos el modelo a través de VRMLLoader, pero aquí debemos prestar atención a la ruta de importación, empalmar la variable publicpath que creamos con la ruta del archivo, en la función de devolución de llamada importada, establecer la escala del modelo importado y agregar el modelo importado a la escena, detalles de la siguiente manera:

// 加载VRML模型
loadVRML() {
    
    
  const THIS = this
  const loader = new VRMLLoader()
  loader.load(`${
      
      THIS.publicPath}models/vrml/tree.wrl`, model => {
    
    
    model.scale.set(30, 30, 30)
    this.scene.add(model)
  })
}

3.código de demostración

<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import {
    
     VRMLLoader } from 'three/examples/jsm/loaders/VRMLLoader.js'

export default {
    
    
  data() {
    
    
    return {
    
    
      publicPath: process.env.BASE_URL,
      mesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted() {
    
    
    this.init()
  },
  methods: {
    
    
    // 初始化
    init() {
    
    
      this.createScene() // 创建场景
      this.loadVRML() // 加载VRML模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
    
    
      this.scene = new THREE.Scene()
    },
    // 加载VRML模型
    loadVRML() {
    
    
      const THIS = this
      const loader = new VRMLLoader()
      loader.load(`${
      
      THIS.publicPath}models/vrml/tree.wrl`, model => {
    
    
        model.scale.set(30, 30, 30)
        this.scene.add(model)
      })
    },

    // 创建光源
    createLight() {
    
    
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(150, 150, 150)
      spotLight.castShadow = true
      this.scene.add(spotLight)
    },
    // 创建相机
    createCamera() {
    
    
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
      this.camera.position.set(250, 250, 150) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(10, 40, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
    
    
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({
    
     antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    render() {
    
    
      if (this.mesh) {
    
    
        this.mesh.rotation.z += 0.006
      }
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
    
    
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>
<style>
#container {
    
    
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>