参考学习:
Three.js入门指南
https://www.ituring.com.cn/book/miniarticle/53810
外部模型导入支持格式
外部文件导入辅助函数下载地址
https://github.com/mrdoob/three.js/tree/master/examples/js/loaders
*.obj
是最常用的模型格式,导入*.obj
文件需要OBJLoader.js
;导入带*.mtl
材质的*.obj
文件需要MTLLoader.js
以及OBJMTLLoader.js
。另有PLYLoader.js、STLLoader.js
等分别对应不同格式的加载器,可以根据模型格式自行选择。
目前支持格式:
- *.obj
- *.obj, *.mtl
- *.dae
- *.ctm
- *.ply
- *.stl
- *.wrl
- *.vtk
无材质的模型
3ds max导出obj文件在页面里效果:
C4D导出obj文件在页面里效果:
下载OBJLoader.js并在HTML的<head>
中使用:
<script type="text/javascript" src="OBJLoader.js"></script>
1.用3ds max建立茶壶模型,放在原点处,半径3,这一单位与three.js场景中单位是一致的。
2.导出成port.obj
选择Export materials
,会生成一个同名的*.mtl
文件。
不选,就是不导出材质
3.结构和路径
结构
对应路径
我的版本,简略代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>
<body>
<script type="text/javascript">
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
//scene
var scene = new THREE.Scene();
//camera
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(15, 25, 25);
camera.lookAt(new THREE.Vector3(0, 2, 0));
scene.add(camera);
//model
var loader = new THREE.OBJLoader();
loader.load('model/cubenew2.obj', function(obj) {
mesh = obj; //储存到全局变量中
scene.add(obj);
});
//light
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light);
id = setInterval(draw, 20);
function draw() {
renderer.render(scene, camera);
mesh.rotation.y += 0.01;
if (mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}
}
</script>
</body>
</html>
如果想要静止不动的可以把动画部分写成
function draw() {
renderer.render(scene, camera);
}
我尝试了3ds max导出obj的茶壶,和C4D导出立方体都可以加载,导出有无材质的都可以,只要把obj的文件加载进来就行。
在软件里调整大小和世界坐标对加载在网页里的大小和位置也有影响。
以上模型3ds max茶壶单位长度是3,C4D导出的是1cm左右。世界坐标均为(0,0,0)
问题待解决:
1.为什么要加一个draw函数,去掉了就看不到模型?
2.导出一个大一些obj模型就加载不出来,只有黑色的渲染区域,不知是模型问题还是代码问题
教程代码
https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter7/7.2.1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
</head>
<body>
<script type="text/javascript">
var scene = null;
var camera = null;
var renderer = null;
var mesh = null;
var id = null;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
renderer.setClearColor(0x000000);
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(15, 25, 25);
camera.lookAt(new THREE.Vector3(0, 2, 0));
scene.add(camera);
var loader = new THREE.OBJLoader();
loader.load('model/port2.obj', function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
mesh = obj;
scene.add(obj);
});
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);
scene.add(light);
id = setInterval(draw, 20);
function draw() {
renderer.render(scene, camera);
mesh.rotation.y += 0.01;
if (mesh.rotation.y > Math.PI * 2) {
mesh.rotation.y -= Math.PI * 2;
}
}
</script>
</body>
</html>