共计 3603 个字符，预计需要花费 10 分钟才能阅读完成。
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 文件的门路来援用
正文完
