1.准备好three.js中用到的各种文件的各种文件

然后让我们开始吧，可恶哇！！！

就想偷个懒

   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'import { DRACOLoader } from './js/DRACOLoader.js'let scene, camera, renderer, control, clock, mixer

2.初始化场景

   function init() {clock = new THREE.Clock()// 场景，相机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.5grid.material.depthWrite = falsegrid.material.transparent = truescene.add(grid)// 材质const environment = new RoomEnvironment()const pmremGenerator = new THREE.PMREMGenerator(renderer)scene.environment = pmremGenerator.fromScene(environment).texture//   灯光scene.add(new THREE.AmbientLight(0x444444))const light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truelight.shadow.camera.top = 10light.shadow.camera.bottom = -10light.shadow.camera.left = -10light.shadow.camera.right = 10//告诉平行光需要开启阴影投射light.castShadow = truescene.add(light)// 控制器control = new OrbitControls(camera, renderer.domElement)const axesHelper = new THREE.AxesHelper(14)scene.add(axesHelper)loader()animate()}

3. 加载带动画的glb文件

 function loader() {const loader = new GLTFLoader().setPath('./model/').setDRACOLoader(new DRACOLoader().setDecoderPath('js/gltf/'))loader.load('bbb.glb', function (gltf) {gltf.scene.scale.set(80, 80, 80)mixer = new THREE.AnimationMixer(gltf.scene)mixer.clipAction(gltf.animations[0]).play()scene.add(gltf.scene)})}

4.animate和render函数

function animate() {requestAnimationFrame(animate)if (mixer) mixer.update(clock.getDelta())control.update() // required if damping enabledrender()}function render() {renderer.render(scene, camera)}

5.调用写好的函数

init()
animate()

6.所有代码，底下有源代码文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>glb文件渲染</title></head><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'import { DRACOLoader } from './js/DRACOLoader.js'let scene, camera, renderer, control, clock, mixerfunction init() {clock = new THREE.Clock()// 场景，相机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.5grid.material.depthWrite = falsegrid.material.transparent = truescene.add(grid)// 材质const environment = new RoomEnvironment()const pmremGenerator = new THREE.PMREMGenerator(renderer)scene.environment = pmremGenerator.fromScene(environment).texture//   灯光scene.add(new THREE.AmbientLight(0x444444))const light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truelight.shadow.camera.top = 10light.shadow.camera.bottom = -10light.shadow.camera.left = -10light.shadow.camera.right = 10//告诉平行光需要开启阴影投射light.castShadow = truescene.add(light)// 控制器control = new OrbitControls(camera, renderer.domElement)const axesHelper = new THREE.AxesHelper(14)scene.add(axesHelper)loader()animate()}function loader() {const loader = new GLTFLoader().setPath('./model/').setDRACOLoader(new DRACOLoader().setDecoderPath('js/gltf/'))loader.load('bbb.glb', function (gltf) {gltf.scene.scale.set(80, 80, 80)mixer = new THREE.AnimationMixer(gltf.scene)mixer.clipAction(gltf.animations[0]).play()scene.add(gltf.scene)})}function animate() {requestAnimationFrame(animate)if (mixer) mixer.update(clock.getDelta())control.update() // required if damping enabledrender()}function render() {renderer.render(scene, camera)}init()animate()</script>
</html>

我的glb文件在电脑是没办法正常打开的，会报错，但是可以正常渲染

源代码：https://pan.baidu.com/s/19HFQ8LpiamB5qmWIGDjzgA?pwd=b8mm
密码：b8mm

右键index.html 在liveserve上打开即可

渲染普通的glb文件Three.js 渲染glb，gltf模型（保姆级教程）_小周不会前端呀的博客-CSDN博客_gltf 渲染

three.js渲染带动画的glb文件（内附源码，保姆级）相关推荐

Winforn中DevExpress的TreeList中显示某路径下的所有目录和文件（附源码下载）
场景 Winform中DevExpress的TreeList的入门使用教程(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/deta ...
arcgis xml 下载切片_arcgis api 4.x for js地图加载arcgisserver本地离线瓦片(附源码下载)...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
Android App开发手机阅读中PDF文件渲染器的讲解及使用（附源码简单易懂）
需要源码和图片集请点赞关注收藏后评论区留言~~~ 一.PDF文件渲染器 Android集成了PDF的渲染操作,从很大程度上方便了开发者,这个PDF文件渲染器便是PdfRenderer.渲染器允许从存储 ...
【Android App】给三维魔方贴图以及旋转动画讲解和实战（附源码和演示视频超详细必看）
需要源码请点赞关注收藏后评论区留言私信~~~ 一.给三维物体贴图除了位置坐标.颜色向量和矩阵向量,着色器还支持声明材质坐标和纹理采样器. 其中材质坐标表示物体表面摊平后的二维空间,纹理采样器表示采用 ...
Android App开发动画特效之实现百叶窗动画和马赛克动画效果实战演示（附源码和演示视频可直接使用）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.实现百叶窗动画合理运用图层规则可以实现酷炫的动画效果,比如把图片分割成一条一条,接着每条都逐渐展开,这便产生了百叶窗动画,把图片等分为若干小方格 ...
JS实现飞机大战小游戏超详细附源码和原图
目录效果展示源码 HTML CSS JS 原图效果展示 HTML+CSS+JS做打飞机小游戏开始界面选择你喜欢的飞机开始游戏按下空格键开始/暂停有三种敌机可以设置飞机生命值,生命值 ...
C/C++项目：火遍全网的字符动画到底如何制作呢？（内附源码）
字符动画,顾名思义就是由字符组成的动画. 如果你经常刷短视频的话,相信你一定刷到过某音创作者将女神井川里予跳舞视频制作成字符动画,点赞也能破10W. 那么,火遍某音的字符动画用编程语言怎么制作呢?感兴 ...
Asp.net实现直接在浏览器预览Word、Excel、PDF、Txt文件（附源码）
功能说明输入文件路径,在浏览器输出文件预览信息,经测试360极速(Chrome).IE9/10.Firefox通过分类文件及代码说明 DemoFiles 存放可测试文件 Default.aspx ...
Js定时器倒计时及堆叠问题解析（附源码）
今天,我们要实现的是一个超级小的demo,倒计时的简单实现,但是其中遇到的定时器的叠加问题,值得思考,所以写了这一篇文章.本人小白一个,多有不足,欢迎交流,共同进步. HTML+CSS部分这里的东西 ...

three.js渲染带动画的glb文件（内附源码，保姆级）

最底下附带了案例源文件