Article directory
foreword
Model loading refers to loading 3D model files into the application for manipulation and rendering. Common 3D model formats include OBJ, FBX, STL, Collada, etc. Loading a model usually requires a 3D engine or rendering engine, such as Unity, Unreal Engine, Three.js, etc. When loading the model, you need to specify the path of the model file, and make adjustments and settings as needed, such as scaling, position, rotation, etc. After loading, various operations can be performed on the model, such as adding materials, adding animation, performing collision detection, and so on.
1. Model loading
1. OBJ model loading
The 3D model of obj is a commonly used three-dimensional model format in computer graphics. It is a text format that can describe the geometry, texture, lighting and other properties of objects. obj3D models are usually generated by 3D modeling software, such as Blender, Maya, 3ds Max, etc. This format is usually used in game production, animation production, architectural design and other fields.
Using Three.js to load OBJ models can be divided into the following steps:
- Introduce Three.js library and OBJLoader.js plugin
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
- Create a renderer and scene
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
- create camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
- Create an OBJLoader object and load the OBJ file
var loader = new THREE.OBJLoader();
loader.load(
'path/to/your/obj/file.obj',
function (object) {
scene.add(object);
}
);
- render scene
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
Full code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three.js OBJLoader Demo</title>
<style>
canvas{
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js"></script>
<script>
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var loader = new THREE.OBJLoader();
loader.load(
'path/to/your/obj/file.obj',
function (object) {
scene.add(object);
}
);
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>
Note that in actual use, the path to load the OBJ file needs to be set according to the actual situation. You can use relative or absolute paths. In addition, various operations can be performed on the loaded object, such as rotation, scaling, translation, etc.
2. MTL model loading
To load models with MTL materials, OBJLoader and MTLLoader are required. First, download the Three.js library and import it into the HTML file. Then, create the scene, camera and renderer with the following code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
Next, use MTLLoader to load the MTL file, then use OBJLoader to load the OBJ file:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('/path/to/model.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('/path/to/model.obj', function(object) {
scene.add(object);
});
});
Finally, render the scene using the renderer and camera:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
This will render the model with the MTL material in the window.
3. Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
</style>
<script src="../lib/three/three.js"></script>
<script src="../lib/three/OBJLoader.js"></script>
<script src="../lib/three/MTLLoader.js"></script>
<script src="../lib/three/OBJMTLLoader.js"></script>
</head>
<body>
</body>
</html>
<script>
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机 视点
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
// 设置相机的位置
camera.position.set(0,300,400);
camera.lookAt(new THREE.Vector3(0,0,0));
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 添加灯光
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(2000,8000,4000);
scene.add(spotLight);
const loader = new THREE.OBJMTLLoader()
loader.load('../assets/models/city.obj', '../assets/models/city.mtl', (mesh) => {
scene.add(mesh);
});
const animation = () => {
// 渲染
renderer.render(scene, camera);
requestAnimationFrame(animation);
}
animation()
</script>
