图形化开发（六）03-Three.js之导入模型——glTF格式文件导入，3D模型的使用 & vs code之glTF Tools插件的使用方法glTF格式文件导入

glTF格式的3D格式文件是官方推荐的使用的格式，这种格式的文件我们可以在sketchfab官网下载，这是一个国外比较知名的模型网站。

loader地址：

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js

下载地址：

https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount

首先，将GLTFLoader加载器插件引入到页面，插件在官方包的地址/examples/js/loaders/，一些文件的导入插件都在这一个文件夹内，大家有兴趣可以研究一下：

<script src="../js/loaders/GLTFLoader.js"></script>
  1. 然后创建一个加载器：
var loader = new THREE.GLTFLoader();
  1. 使用加载器去加载模型，并调节一下模型大小在场景内展示：
loader.load('../js/models/gltf/scene.gltf', function (gltf) {
    gltf.scene.scale.set(.1,.1,.1);
    scene.add(gltf.scene);
});

只要碰到loader，一定要使用dev server

3D模型使用步骤

实例文件夹

Blender导出glb多个动画_vscode

1、下载GLTFLoader.js文件，并在index.html文件中进行引入

https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>我的第一个Three.js案例</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>
<body onload="draw()">
<script src="https://cdn.bootcss.com/three.js/92/three.js"></script> 
<script src="./gltfloader.js"></script>
    <!-- control.js  控制视角旋转的插件 -->    
<script src="./control.js"></script>
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="./index.js"></script> 
</body>
</html>
2、打开模型地址，进行选择模型

https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount

3、选中一个进入，进行下载

Blender导出glb多个动画_加载器_02

下载的3D模型文件

Blender导出glb多个动画_Blender导出glb多个动画_03

vs code之Live Server插件的使用方法
1、安装

Blender导出glb多个动画_html_04

2、找到scene.gltf模型文件后，右击并点击列表的【Preview 3D Model】

Blender导出glb多个动画_html5_05

3、在创建模型initModel中，加载外部的gltf文件：

使用加载器去加载模型，并调节一下模型大小在场景内展示：

loader.load('../js/models/gltf/scene.gltf', function (gltf) {
    gltf.scene.scale.set(.1,.1,.1);
    scene.add(gltf.scene);
});

只要碰到loader，一定要使用dev server

index.js

var renderer, camera, scene, gui, stats, ambientLight, directionalLight, control;

function initRender() {
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    //告诉渲染器需要阴影效果
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
    document.body.appendChild(renderer.domElement);
}

function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 100, 200);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
}

function initScene() {
    scene = new THREE.Scene();
}

function initGui() {
    //声明一个保存需求修改的相关数据的对象
    gui = {};
    var datGui = new dat.GUI();
    //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
}

function initLight() {
    ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光  
    scene.add(ambientLight);
    directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳
    directionalLight.position.set(40, 60, 10);
    directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
    directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
    directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
    directionalLight.shadow.camera.right = 50; //最右边
    directionalLight.shadow.camera.top = 50; //最上边
    directionalLight.shadow.camera.bottom = -50; //最下面
    //这两个值决定生成阴影密度 默认512
    directionalLight.shadow.mapSize.height = 1024;
    directionalLight.shadow.mapSize.width = 1024;
    //告诉平行光需要开启阴影投射
    directionalLight.castShadow = true;
    scene.add(directionalLight);
}

function initModel() {
    //底部平面
    var planeGeometry = new THREE.PlaneGeometry(100, 100);
    var planeMaterial = new THREE.MeshLambertMaterial({
        color: '#fff',
        side: THREE.DoubleSide
    });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = -.1;
    plane.receiveShadow = true; //可以接收阴影
    scene.add(plane);


    // 创建gltf加载器
    var loader = new THREE.GLTFLoader();
    loader.load('./3d/scene.gltf', function (gltf) {
        gltf.scene.scale.set(50, 50, 50);
        scene.add(gltf.scene);
    });
}

function initStats() {
    stats = new Stats();
    document.body.appendChild(stats.dom);
}

function initControl() {
    control = new THREE.OrbitControls(camera, renderer.domElement);
}

function render() {
    control.update();
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    //更新控制器
    render();
    //更新性能插件
    stats.update();
    requestAnimationFrame(animate);
}

function draw() {
    initGui();
    initRender();
    initScene();
    initCamera();
    initLight();
    initModel();
    initStats();
    initControl();
    animate();
    renderer.setClearColor('rgb(135,206,250)', 1.0);
    window.onresize = onWindowResize;
}
4、直接本地打开index.html文件，会存在跨域问题

Blender导出glb多个动画_加载器_06

5、通过dev server进行打开

Blender导出glb多个动画_Blender导出glb多个动画_07

附

因为是感光材料，可以修改属性，改变效果

index.js

function initLight() {
    ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光  
    scene.add(ambientLight);
    directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳
}