加载VRML格式模型
1.demo效果2.实现要点2.1 VRML模型放置路径2.2 加载VRML模型 3.demo代码1.demo效果
如上图，该demo通过VRMLLoader加载了VRML格式的模型，并呈现在页面中
2.实现要点
2.1 VRML模型放置路径
vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL
data() {return {publicPath: process.env.BASE_URL}}
2.2 加载VRML模型
这我们通过VRMLLoader导入模型，不过这里需要注意导入的路径，把我们创建的publicpath变量拼接到文件的路径上，在导入的回调函数中，设置导入模型的缩放比例，并将导入的模型添加到场景，具体如下：
// 加载VRML模型loadVRML() {const THIS = thisconst loader = new VRMLLoader()loader.load(`${THIS.publicPath}models/vrml/tree.wrl`, model => {model.scale.set(30, 30, 30)this.scene.add(model)})}
3.demo代码
<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 = thisconst 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 = truethis.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.PCFSoftShadowMapthis.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>
