three.js加载VRML格式模型(vue中使用three.js57)

加载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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！