three.js加载obj模型
时间: 2023-09-10 16:08:26 浏览: 46
使用three.js加载obj模型需要以下步骤:
1. 加载obj文件和对应的材质文件
```javascript
var loader = new THREE.OBJLoader();
loader.load('model.obj', function(object) {
var material = new THREE.MeshPhongMaterial({
color: 0xffffff
});
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
scene.add(object);
});
```
2. 设置相机和光源
```javascript
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);
```
3. 渲染场景
```javascript
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
```
完整代码如下:
```javascript
var scene = new THREE.Scene();
var loader = new THREE.OBJLoader();
loader.load('model.obj', function(object) {
var material = new THREE.MeshPhongMaterial({
color: 0xffffff
});
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
scene.add(object);
});
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
```