Three.js 渲染glb，gltf模型（保姆级教程）

Posted 小周不会three.js哇

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js 渲染glb，gltf模型（保姆级教程）相关的知识，希望对你有一定的参考价值。

1.准备工作

将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。

控制器： OrbitControls.js

加载器：GLTFLoader.js

材质： RoomEnvironment.js 和 MeshoptDecoder.js

模型文件： 我这里用的是glb（最后面有源码链接）

将上面的文件准备好后就可以开始进行下一步了

2.开始开发

1.在body中新建一个div用来承载three.js创建canvas标签

2.把准备好的文件引入，注意script标签加上type=module

部分代码在这，完成源码在下面，这里方便理解 

<body>
    <div id="WebGL-output"></div>
</body>

<script type="module">
    import *as THREE from "./js/three.module.js";
    import  OrbitControls  from './js/OrbitControls.js';
    import  GLTFLoader  from './js/GLTFLoader.js'
    import  RoomEnvironment  from './js/RoomEnvironment.js';
    import  MeshoptDecoder  from './js/meshopt_decoder.module.js'
</script>

到这里准备工作才正式完成

注意：引用文件中有些事依赖于three.module.js这个文件夹的，需要去源码当中把路径修改，这里举例一个

2.初始化场景，相机，控制器

 let scene, camera, renderer, control

    function init() 
        // 场景，相机
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xbbbbbb);
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(20, 100, 170);

        // 渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 地表格
        const grid = new THREE.GridHelper(500, 100, 0xffffff, 0xffffff);
        grid.material.opacity = 0.5;
        grid.material.depthWrite = false;
        grid.material.transparent = true;
        scene.add(grid);

        // 材质
        const environment = new RoomEnvironment();
        const pmremGenerator = new THREE.PMREMGenerator(renderer);
        scene.environment = pmremGenerator.fromScene(environment).texture;


        // 控制器
        let control = new OrbitControls(camera, renderer.domElement);

        const axesHelper = new THREE.AxesHelper(14);
        scene.add(axesHelper);

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

        animate();
    
    init()

完成这一步时，你可以看到下面的内容，证明你的场景渲染出来了

接下来就是渲染glb模型了 

 function loader() 
        const loader = new GLTFLoader().setPath('./model/');
        loader.load('renWu.glb', function (gltf) 
            gltf.scene.position.set(0,0,2)
            scene.add(gltf.scene);
            renderer.render(scene, camera);
        );
    

load() // 调用函数渲染

此时就可以把glb文件简单的渲染出来了，我的glb文件有问题，所以渲染出来模型比较小

为了让模型展示更好，我这里采取了比较简单的调整摄像头角度

 

把图中的数值调整成1，就可以看到正常的模型了，如下图

教程到这里就结束了，文中所用到的源码在这

源码链接：https://pan.baidu.com/s/1YNDE7SIfTgOFgfUJvPzAhQ?pwd=4plc 

源码密码：4plc 

都看到这里了，点个赞吧 给点动力出教程哇

渲染带动画的glb模型three.js渲染带动画的glb文件（内附源码，保姆级）_小周不会前端呀的博客-CSDN博客

无法使用 three.js 渲染 GLTF 对象

【中文标题】无法使用 three.js 渲染 GLTF 对象【英文标题】：Unable to render GLTF object with three.js 【发布时间】：2021-12-18 04:48:51 【问题描述】：

我正在尝试渲染由 three.js 指南 (https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/DamagedHelmet) 提供的 GLTF 对象

为此，我尝试使用他们指南中提供的以下加载程序 (https://threejs.org/docs/#examples/en/loaders/GLTFLoader)

按照 threejs 指南，我编写了应该加载和呈现 GLTF 文件的代码：

"use strict";
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const ratio = window.innerWidth / window.innerHeight
const camera = new THREE.PerspectiveCamera( 75, ratio, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();


const path = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf'

camera.position.set(0,0,0)
camera.lookAt(10,0,0)
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

renderer.render( scene, camera );


loader.load(path, function ( gltf ) 
  gltf.scene.position.x=10
  scene.add( gltf.scene );
, function ( xhr ) 
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 
, function ( error ) 
  console.log( 'An error happened' , path);
);

不幸的是，即使浏览器从 Internet 正确加载资源文件并且控制台中没有错误，场景仍然是黑色的。

所以，我的问题是：如何修复我的 codepen，使其在使用 three.js 的浏览器中显示 GLTF 对象？

编辑：感谢最佳答案，这里有一个可以正常工作的代码笔：https://codepen.io/spocchio/pen/vYJpaLg

【问题讨论】：

这是javascript，不是java。我为你更改了标签。 谢谢，我的错！ 【参考方案1】：

我注意到 2 个问题：

    您的场景需要灯光。当网格被添加到场景中时，它们不会被照亮，因此它们会保持黑色。 您只调用了一次renderer.render()，而且这发生在在您加载 GLTF 之前。因此，当最终加载头盔时，不会进行任何渲染。

我在你的 Codepen 中进行了这 2 次更新，头盔出现了。

renderer.render( scene, camera );

// Add ambient light
scene.add(new THREE.AmbientLight());

loader.load(path, function ( gltf ) 
  gltf.scene.position.x=10
  scene.add( gltf.scene );

  // Render scene after assets have been added
  renderer.render( scene, camera );
, function ( xhr ) 
  console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 
, function ( error ) 
  console.log( 'An error happened' , path);
);

【讨论】：

以上是关于Three.js 渲染glb，gltf模型（保姆级教程）的主要内容，如果未能解决你的问题，请参考以下文章

Three.js：FBX 骨骼正确旋转，而 GLTF 骨骼奇怪地旋转

使用 PHP 渲染 .glb / .gltf 3d 模型

无法使用 three.js 渲染 GLTF 对象

我的渲染技术进阶之旅让我们一起来了解一下什么是glTF？为什么glTF是3D世界的JPEG？

我的渲染技术进阶之旅让我们一起来了解一下什么是glTF？为什么glTF是3D世界的JPEG？

我的渲染技术进阶之旅让我们一起来了解一下什么是glTF？为什么glTF是3D世界的JPEG？