JSRUN 用代码说话

载入3D模型

编辑教程

载入3D模型(Loading 3D models)

目前,3D模型的格式有成千上万种可供选择,但每一种格式都具有不同的目的、用途以及复杂性。 虽然 three.js已经提供了多种导入工具, 但是选择正确的文件格式以及工作流程将可以节省很多时间,以及避免遭受很多挫折。某些格式难以使用,或者实时体验效率低下,或者目前尚未得到完全支持。

对大多数用户,本指南向你推荐了一个工作流程,并向你提供了一些当没有达到预期效果时的建议。

在开始之前

如果你是第一次运行一个本地服务器,可以先阅读how to run things locally。 正确地托管文件,可以避免很多查看3D模型时的常见错误。

推荐的工作流程

如果有可能的话,我们推荐使用glTF(gl传输格式)

GLB和.GLTF是这种格式的这两种不同版本, 都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的,所以它的传输效率非常高,且加载速度非常快。 功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

公共领域的glTF文件可以在网上找到,例如 Sketchfab,或者很多工具包含了glTF的导出功能:

  • glTF-Blender-IO by the Khronos Group
  • COLLADA2GLTF by the Khronos Group
  • FBX2GLTF by Facebook
  • OBJ2GLTF by Analytical Graphics Inc
  • Substance Painter by Allegorithmic
  • Modo by Foundry
  • Toolbag by Marmoset
  • Houdini by SideFX
  • Cinema 4D by MAXON
  • …还有更多

倘若你所喜欢的工具不支持glTF格式,请考虑向该工具的作者请求glTF导出功能, 或者在the glTF roadmap thread贴出你的想法。

当glTF不可用的时候,诸如FBX、OBJ或者COLLADA等等其它广受欢迎的格式在Three.js中也是可以使用、并且定期维护的。

加载

three.js中默认仅包含了几个加载器(例如:ObjectLoader)——其它加载器需要你分别地添加到页面中。 取决于你对构建工具的偏好,选择以下任意一种方式:

// global script
<script src="GLTFLoader.js"></script>

// commonjs
var THREE = window.THREE = require('three');
require('three/examples/js/loaders/GLTFLoader');

// ES modules
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

一旦你引入了一个加载器,你就已经准备好为场景添加模型了。不同加载器之间可能具有不同的语法 —— 当使用其它格式的时候请参阅该格式加载器的示例以及文档。对于glTF,使用全局script的用法类似:

var loader = new THREE.GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );
JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟