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文件的门路来援用
发表回复