threejs导入本地obj模型和材质
程序员文章站
2022-06-11 10:53:32
...
首先浏览器同源策略安全限制会导致本地文件打开报错，所以想要浏览器显示模型贴图你需要：
以谷歌浏览器为例
在目标这后面加上 --disable-web-security --allow-file-access-from-files 注意前面要打个空格
这里要注意，应用之后不能双击html文件打开，要先打开加了参数的Chrome快捷方式，然后再打开html或者Ctrl+O打开html文件。
在html里引入本地js文件，这个可以去github自行下载threejs下载
<script src="JS/three.js"></script>
<script src="JS/OBJLoader.js"></script>
<script src="JS/MTLLoader.js"></script>
<script src="JS/OrbitControls.js"></script>
然后写一个页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<script src="JS/three.js"></script>
<script src="JS/OBJLoader.js"></script>
<script src="JS/MTLLoader.js"></script>
<script src="JS/OrbitControls.js"></script>
<div id="models" style="height: 500px;width: 700px;">
<div style="background-color:#040b1a ;"></div>
</div>
</body>
</html>
这里我是想将模型放在一个div里，注意一定要嵌套一个div，没有嵌套模型会报错不显示
再加上threejs代码：
var scene = new THREE.Scene();
var OBJLoader = new THREE.OBJLoader();
var MTLLoader = new THREE.MTLLoader();
//这里设置了导入的模型文件路径
MTLLoader.load('models/文件名.mtl', function(materials) {
console.log(materials);
OBJLoader.setMaterials(materials);
OBJLoader.load('models/文件名.obj', function(obj) {
console.log(obj);
scene.add(obj);
obj.children[0].scale.set(2, 2, 2);
obj.children[0].geometry.center();
})
})
//点光源
var point = new THREE.PointLight(0xffffff,1,0,2);
point.position.set(400, 200, 300);
scene.add(point);
//环境光
var ambient = new THREE.AmbientLight(0xffffff,0.4);
scene.add(ambient);
var width = 900;
var height = 700;
var k = width / height;
var s = 150;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(912, 700);
renderer.setClearColor(0x040b1a, 1);
//这是写在一个div里的方法，还可以直接全屏写在body里，把getElementById('models')改成body就行了
document.getElementById('models').appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);
// controls.addEventListener('change', render);
</script>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<script src="JS/three.js"></script>
<script src="JS/OBJLoader.js"></script>
<script src="JS/MTLLoader.js"></script>
<script src="JS/OrbitControls.js"></script>
<div id="models" style="height: 500px;width: 700px;">
<div style="background-color:#040b1a ;"></div>
</div>
<script>
var scene = new THREE.Scene();
var OBJLoader = new THREE.OBJLoader();
var MTLLoader = new THREE.MTLLoader();
MTLLoader.load('models/文件名.mtl', function(materials) {
console.log(materials);
OBJLoader.setMaterials(materials);
OBJLoader.load('models/文件名.obj', function(obj) {
console.log(obj);
scene.add(obj);
obj.children[0].scale.set(2, 2, 2);
obj.children[0].geometry.center();
})
})
//点光源
var point = new THREE.PointLight(0xffffff,1,0,2);
point.position.set(400, 200, 300);
scene.add(point);
//环境光
var ambient = new THREE.AmbientLight(0xffffff,0.4);
scene.add(ambient);
var width = 912;
var height = 700;
var k = width / height;
var s = 150;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
//这里的setSize最好和width、height保持一致，让模型保持等比，不然模型会变形
renderer.setSize(912, 700);
renderer.setClearColor(0x040b1a, 1);
document.getElementById('models').appendChild(renderer.domElement);
//这是写在一个div里的方法，还可以直接全屏写在body里，把getElementById('models')改成body就行了
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
var controls = new THREE.OrbitControls(camera,renderer.domElement);
// controls.addEventListener('change', render);
</script>
</body>
</html>
上一篇： tomcat部署war包