Three.js 笔记（4）加载 glTF 模型

🎯目标：1. 将模型导成 glTF 2. 在网页显示模型

鸽了几天继续，想到什么查什么。

1. glTF

在某模型网站上看到使用说明中提到：“不能直接二次发布模型，但如果转成网页用的，不能直接读取的格式比如 gltf 则可以发布”，所以来看一下 gltf 是什么。

glTF(应该是官方介绍) 是利于高效渲染、传输的一种格式，主要在目标运行时中使用。也就是说，用 3D 软件制作完成后的文件，最后转换成 glTF 在程序中使用。

将模型导成 glTF，直接去找工具。这里使用 Blender 的插件 glTF-Blender-IO（Blender 自带）将模型导出为glTF格式

2. 加载

加载就用常用的库吧，这里使用three.js。查看教程，得，所有的都用 threejs 写吧（所以标题改掉了😂）

2.1 HTML 结构

由于是在 three.js 里将canvas挂在 html 下，所以准备一个空的 html 就可以了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webgl</title>
        <style>
            body { margin: 0; }
            canvas { display: block; }
        </style>
    </head>
    <body>
        <script src="libs/three.js"></script>
        <script src="libs/GLTFLoader.js"></script>
        <script src="我们的 js 的路径"></script>
 </body>
</html>

2.2 建立场景

在 js 文件里新建一个 three.js 场景

var scene = new THREE.Scene();

//设置摄像机，参数分别是 fov，长宽比， 近/远的剪切平面
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );

//canvas 挂载
document.body.appendChild( renderer.domElement );

//由于在原点加载模型，拉开摄像机
camera.position.z = 10;

2.3 加载模型

用最简化的代码。注意GLTFLoader不包含在 threejs 本身，是另外的一个 js 文件……

var loader = new THREE.GLTFLoader();

loader.load(
    'monkey.glb',
    //加载完后
	function ( gltf ) {
		scene.add( gltf.scene ) //添加到场景
	}//其他的暂时不需要
);

2.4 渲染

准备一个渲染函数实施渲染。经测试，必须要循环渲染。

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

2.5 随便加点灯光

加完了发现还是一片漆黑，想了想，哦，没加灯光。

var pointLight = new THREE.PointLight(0xffffff, 1, 100);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

目前没专心 three.js 这里，所以只是潦草地看了一下……

到时候真要用再重来一遍。

参考资料