HTML形式
<!-- * @Author: yangyuguang * @Date: 2022-12-04 17:22:11 * @LastEditors: yangyuguang * @LastEditTime: 2023-01-11 11:19:31 * @FilePath: /排行榜初始代码/test2.html--><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载OBJ和MTL文件</title> <style> html, body{ width: 100%; height: 100%; overflow: hidden; } *{ margin:0; padding:0; } </style> <!-- 引入three.js三维引擎 --> <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/OBJLoader.js"></script> <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/MTLLoader.js"></script></head><body> <script> var scene = new THREE.Scene(), camera, renderer = new THREE.WebGLRenderer(); /* OBJ和材质文件mtl加载 */ var OBJLoader = new THREE.OBJLoader(); //obj加载器 var MTLLoader = new THREE.MTLLoader();//材质文件加载器 MTLLoader.load('./static/material.mtl',function(meterials){ console.log(meterials); OBJLoader.setMaterials(meterials); OBJLoader.load('./static/model.obj',function(obj){ /* 返回的组对象插入场景中 */ scene.add(obj) obj.children[0].scale.set(5,5,5)//网络模型播放 }) }) createLight() createCamera() createRenderer() /* 通过requestAnimationFrame()操作三维场景 */ var controls = new THREE.OrbitControls(camera,renderer.domElement); //创立控件对象 // 创立一个时钟对象Clock var clock = new THREE.Clock() function render(){ renderer.render(scene,camera);//执行渲染操作 requestAnimationFrame(render) //申请再次执行渲染函数render } render() // 正投影相机设置 function createCamera(){ var width = window.innerWidth; //窗口设置 var height = window.innerHeight;//窗口高度 var k = width/height;//窗口宽高比 var s = 150;//三维场景显示范畴管制系数，系数越大，显示的范畴越大 // 创立相机对象 camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000) camera.position.set(200,300,200) //设置相机地位 camera.lookAt(scene.position);//设置相机方向(指向的场景对象) } // 透视相机 function createPerspectiveCamera(){ var width = window.innerWidth;//窗口宽度 var height = window.innerHeight//窗口高度 /* 透视投影相机对象 */ camera= new THREE.PerspectiveCamera(60,width/height,1,1000) camera.position.set(200,300,200)//设置相机地位 camera.lookAt(scene.position)//设置相机方向(指向的场景对象) } /* 创立渲染器对象 */ function createRenderer(){ renderer.setSize(window.innerWidth,window.innerHeight)//设置渲染区域尺寸 renderer.setClearColor(0xb9d3ff,1)//设置背景色彩 document.body.appendChild(renderer.domElement)//body元素中插入canvas对象 } /* 创立光源 */ function createLight(){ // 点光源 var point = new THREE.PointLight(0xffffff) point.position.set(400,200,300)//点光源地位 scene.add(point);//点光源增加到场景中 // 环境光 var ambient = new THREE.AmbientLight(0x444444) scene.add(ambient) } </script></body></html>在vue中应用
第一种办法应用three-obj-mtl-loader插件
应用npm install three-obj-mtl-loader --save
在组件中引入：import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
应用OBJLoader和MTLLoader加载文件：
import {OBJLoader,MTLLoader} from "three-obj-mtl-loader" // 加载obj和mtl模型 let _this = this let mtlLoader = new MTLLoader() mtlLoader.load('./static/material.mtl',function(materials){ materials.preload(); let objLoader = new OBJLoader() objLoader.load('./static/model.obj',function(obj){ obj.scale.x = obj.scale.y = obj.scale.z = 100 obj.rotation.y = 500 let mesh =obj mesh.position.y = -50 _this.scene.add(mesh) }) })第二种办法应用vue-3d-model组件
npm install vue-3d-model --save
引入组件：
import { ModelObj } from 'vue-3d-model'components: { ModelObj}, data() { return { publicPath: process.env.BASE_URL } },应用组件：
<model-obj id="place" :src="`${publicPath}model/model.obj`" :mtl="`${publicPath}model/material.mtl`" backgroundColor="rgb(0,0,0)" :scale="{ x: 0.8, y: 0.8, z: 0.8 }" > </model-obj>个别应用这个会存在找不到obj模块的状况，这是因为通过了webpack的解决,须要把.obj文件放到vue解决动态文件的文件夹中，vue-cli3是放在static文件夹下，然而vue-cli3及之后就须要放到public文件夹下，并且在组件中通过process.env.BASE_URL+public文件夹下的.obj文件的门路来援用