threejs引入模型
时间: 2023-08-01 11:07:27 浏览: 45
在Three.js中引入模型,需要先将模型转换为Three.js可识别的模型格式,如JSON、OBJ、FBX等。常用的转换工具有Blender、Maya、3ds Max等。
以下是一个简单的例子,展示如何使用Three.js引入一个OBJ格式的模型:
```html
<!DOCTYPE html>
<html>
<head>
<title>Import Model</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three-obj-loader@2.0.0/src/ThreeOBJLoader.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const loader = new THREE.OBJLoader();
loader.load(
// resource URL
'path/to/model.obj',
// called when resource is loaded
function (object) {
scene.add(object);
},
// called when loading is in progresses
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// called when loading has errors
function (error) {
console.log('An error happened');
}
);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```
在这个例子中,我们使用了Three.js的OBJLoader来加载OBJ格式的模型。我们先创建了一个场景、相机和渲染器,然后创建了一个OBJLoader对象,并使用它的load()方法加载模型文件。当模型加载完成后,我们将模型添加到场景中。最后,在每一帧更新时,我们调用渲染器的render()方法来渲染场景。