加载OBJ格式模型
1.demo效果2.实现要点2.1 OBJ模型放置路径2.2 加载OBJ模型3.demo代码1.demo效果
如上图，该demo通过OBJLoader加载了OBJ格式的模型，并添加了棕色材质
2.实现要点
2.1 OBJ模型放置路径
vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPath，此变量的值是vue中的环境变量process.env.BASE_URL
data() {return {publicPath: process.env.BASE_URL}}
2.2 加载OBJ模型
这我们通过OBJLoader导入模型，不过这里需要注意导入的路径，把我们创建的publicpath变量拼接到文件的路径上，在导入的回调函数中，需要创建材质，给每一个几何体成员赋上该材质，然后将导入的网格对象添加到场景，具体如下：
// 加载OBJ模型loadOBJ() {const THIS = thisconst loader = new OBJLoader()loader.load(`${THIS.publicPath}models/pinecone.obj`, loadedMesh => {// 创建材质const material = new THREE.MeshLambertMaterial({color: 0x5c3a21})// 给几何体成员赋该材质loadedMesh.children.forEach(child => {child.material = puteFaceNormals()puteVertexNormals()})loadedMesh.scale.set(100, 100, 100)loadedMesh.rotation.x = -0.3THIS.mesh = loadedMesh// 添加到场景THIS.scene.add(THIS.mesh)})},
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 {OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.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.loadOBJ() // 加载OBJ模型this.createLight() // 创建光源this.createCamera() // 创建相机this.createRender() // 创建渲染器this.createControls() // 创建控件对象this.render() // 渲染},// 创建场景createScene() {this.scene = new THREE.Scene()},// 加载OBJ模型loadOBJ() {const THIS = thisconst loader = new OBJLoader()loader.load(`${THIS.publicPath}models/pinecone.obj`, loadedMesh => {// 创建材质const material = new THREE.MeshLambertMaterial({color: 0x5c3a21})// 给几何体成员赋该材质loadedMesh.children.forEach(child => {child.material = puteFaceNormals()puteVertexNormals()})loadedMesh.scale.set(100, 100, 100)loadedMesh.rotation.x = -0.3THIS.mesh = loadedMesh// 添加到场景THIS.scene.add(THIS.mesh)})},// 创建光源createLight() {// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.1) // 创建环境光this.scene.add(ambientLight) // 将环境光添加到场景const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯spotLight.position.set(-40, 60, -10)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(-80, 60, 40) // 设置相机位置this.camera.lookAt(new THREE.Vector3(10, 0, 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.y += 0.02}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>
