three.js js将场景数据导入
时间: 2023-09-06 11:09:42 浏览: 107
threejs 切换场景
要将场景数据导入three.js,可以使用支持的三维文件格式,例如OBJ、FBX、GLTF等。可以使用three.js的加载器来加载这些文件,例如OBJLoader、FBXLoader、GLTFLoader等。以下是一个加载GLTF文件的示例代码:
```javascript
// 创建一个场景
var scene = new THREE.Scene();
// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个GLTF加载器
var loader = new THREE.GLTFLoader();
// 加载GLTF文件
loader.load(
// 文件路径
'model.gltf',
// 加载完成后的回调函数
function (gltf) {
// 将模型添加到场景中
scene.add(gltf.scene);
},
// 加载过程中的回调函数
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
// 加载出错的回调函数
function (error) {
console.log('An error happened');
}
);
// 渲染函数
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
```
以上代码创建了一个场景、相机、渲染器,并使用GLTFLoader加载了一个GLTF文件,并将其添加到场景中。最后,通过渲染函数来渲染场景。
阅读全文