效果:
stl、obj都是静态模型,不可以包含动画,fbx除了包含几何、材质信息,可以存储骨骼动画等数据。
说明:使用三维软件导出.obj 模型文件的时候,会同时导出一个材质文件.mtl;?? ?.obj 和.stl 文件包含的信息一样都是几何体顶点相关数据,材质文件.mtl 包含的是模型的材质信息,比如颜色、贴图路径等。可以只加载obj文件,默认材质是Phong? ;
只加载obj文件的话,直接将返回的数据添加到场景中即可;
<!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模型文件</title>
<script src="../three.js"></script>
<script src="../OrbitControls.js"></script>
<script src="../OBJLoader.js"></script>
</head>
<body>
<script>
// 1,创建场景
var scene = new THREE.Scene();
// 创建STL加载器
var objLoader = new THREE.OBJLoader();
objLoader.load('./FREE Bike Hardsurface KitbashID_174738173/8b6b8b6e9ffd125f0a2f5632b94083818f2f9c69/Bike_Parts_01.obj',
geometry => { scene.add(geometry);
})
objLoader.load('./FREE Bike Hardsurface KitbashID_174738173/8b6b8b6e9ffd125f0a2f5632b94083818f2f9c69/Bike_Parts_02.obj',
geometry => { scene.add(geometry);
})
objLoader.load('./FREE Bike Hardsurface KitbashID_174738173/8b6b8b6e9ffd125f0a2f5632b94083818f2f9c69/Bike_Parts_03.obj',
geometry => { scene.add(geometry);
})
objLoader.load('./FREE Bike Hardsurface KitbashID_174738173/8b6b8b6e9ffd125f0a2f5632b94083818f2f9c69/Bike_Parts_04.obj',
geometry => { scene.add(geometry);
})
objLoader.load('./FREE Bike Hardsurface KitbashID_174738173/8b6b8b6e9ffd125f0a2f5632b94083818f2f9c69/Bike_Parts_05.obj',
geometry => { scene.add(geometry);
})
// 3,创建灯光
var point = new THREE.PointLight(0xffffff, 0.5);
point.position.set(200, 200, 200);
scene.add(point);
var point2 = new THREE.PointLight(0xffffff, 0.5);
point2.position.set(-200, 200, 200);
scene.add(point2);
var point3 = new THREE.PointLight(0xffffff);
point3.position.set(200, -200, 200);
// 4,创建相机对象
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 50;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -2000, 2000);
camera.position.set(0, 200, 100);
camera.lookAt(scene.position);
// 5,创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
function render() {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var axes = new THREE.AxesHelper(500);
// scene.add(axes);
render();
</script>
</body>
</html>
|