three.js渲染带动画的glb文件

1.  准备工作

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

控制器： OrbitControls.js

加载器：GLTFLoader.js

材质： RoomEnvironment.js

three.js加载压缩模型： DRACOLoader

模型文件： 我这里用的是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 { DRACOLoader } from './js/DRACOLoader.js'
</script>

 到这里算是准备工作正式完成！

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

 

3.初始化场景，相机，渲染器，控制器，灯光

  function init() {clock = new THREE.Clock()// 场景，相机scene = new THREE.Scene()// 添加场景背景const loader11 = new THREE.TextureLoader();const bgTexture = loader11.load('./model/111.png');scene.background = bgTexture;// scene.background = new THREE.Color(0xbbbbbb)// 透视相机（）camera = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,1,2000)camera.position.set(-230, 100, 300)scene.add(camera);// 渲染器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//   灯光-环境光scene.add(new THREE.AmbientLight(0x444444))// 灯光-平行光const light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truelight.shadow.camera.top = 100light.shadow.camera.bottom = -100light.shadow.camera.left = -100light.shadow.camera.right = 100//告诉平行光需要开启阴影投射light.castShadow = truescene.add(light)// 鼠标控制器control = new OrbitControls(camera, renderer.domElement)// 坐标轴// const axesHelper = new THREE.AxesHelper(114)// scene.add(axesHelper)loader()animate()}

 4. 加载带动画的glb文件

// 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)})}

  5.animate和render函数

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

 6.函数调用

init()
animate()

所有代码：

<!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 { DRACOLoader } from './js/DRACOLoader.js'let scene, camera, renderer, control, clock, mixerfunction init() {clock = new THREE.Clock()// 场景，相机scene = new THREE.Scene()// 添加场景背景const loader11 = new THREE.TextureLoader();const bgTexture = loader11.load('./model/111.png');scene.background = bgTexture;// scene.background = new THREE.Color(0xbbbbbb)// 透视相机（）camera = new THREE.PerspectiveCamera(50,window.innerWidth / window.innerHeight,1,2000)camera.position.set(-230, 100, 300)scene.add(camera);// 渲染器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//   灯光-环境光scene.add(new THREE.AmbientLight(0x444444))// 灯光-平行光const light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truelight.shadow.camera.top = 100light.shadow.camera.bottom = -100light.shadow.camera.left = -100light.shadow.camera.right = 100//告诉平行光需要开启阴影投射light.castShadow = truescene.add(light)// 鼠标控制器control = new OrbitControls(camera, renderer.domElement)// 坐标轴// const axesHelper = new THREE.AxesHelper(114)// scene.add(axesHelper)loader()animate()}// 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)})}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>

右击运行：

结果：

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/60874.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

golang字符串转Uint16

golang字符串转Uint16

switch params[index].ParameType {case 10: //10数值(Byte)params[index].ParameByte []byte{byte(xtools.InterfaceToInt(params[index].ParameValue))}case 15: //15Bytesparams[index].ParameByte, _ hex.DecodeString(params[index].ParameValue)case 20: //20ASCIIpara…
阅读更多...
数据时代的必备利器：数据可视化工具的崭新价值

数据时代的必备利器：数据可视化工具的崭新价值

在当今信息时代&#xff0c;数据扮演着越来越重要的角色&#xff0c;而数据的可视化呈现正是一种强大的工具&#xff0c;能够帮助我们更好地理解和利用这些数据。虽然Excel和PPT在处理数据方面有着不可否认的作用&#xff0c;但在处理大规模、复杂数据时&#xff0c;数据可视化…
阅读更多...
微信小程序 基于Android的美容理发师预约管理系统

微信小程序 基于Android的美容理发师预约管理系统

&#xff0c;本系统主要根据管理员、用户及理发师的实际需要&#xff0c;方便用户利用互联网实现对商品信息进行立即订购&#xff0c;同时让管理者可以通过这个系统对用户实际需求以及各信息进行管理。设计该系统主要目的是为了方便用户、理发师可以有一个非常好的平台体验&…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （84）-- 算法导论8.2 1题

文心一言 VS 讯飞星火 VS chatgpt （84）-- 算法导论8.2 1题

一、用go语言&#xff0c;参照图8-2 的方法&#xff0c;说明 COUNTING-SORT 在数组 A(6&#xff0c;0&#xff0c;2&#xff0c;0&#xff0c;1&#xff0c;3&#xff0c;4&#xff0c;6&#xff0c;1&#xff0c;3&#xff0c;2)上的操作过程。 文心一言&#xff1a; Counti…
阅读更多...
Spring retry(二)- 源码解析-启动装配篇 @EnableRetry

Spring retry(二)- 源码解析-启动装配篇 @EnableRetry

上一篇文章&#xff0c;我们快速介绍了下spring-retry的使用技巧&#xff0c;本篇我们将会剖析源码去学习 一、 EnableRetry注解 Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) EnableAspectJAutoProxy(proxyTargetClass false) Import(RetryConfiguration.c…
阅读更多...
现货黄金走势图中的止盈点

现货黄金走势图中的止盈点

对平仓时机的把握能力&#xff0c;是衡量现货黄金投资者水平的重要标志&#xff0c;止盈点设置得是否合理&#xff0c;在行情兑现的时候能否及时地离场&#xff0c;是事关投资者账户浮盈最终能否落袋为安的“头等大事”&#xff0c;要在现货黄金走势图中把握止盈点&#xff0c;…
阅读更多...
Linux-安装redis6.2.1及主备复制模式（replication）

Linux-安装redis6.2.1及主备复制模式（replication）

Linux-安装redis6.2.1 下载redis6.2.1资源上传至安装目录解压及编译解压修改名称编译 修改配置文件主节点从节点 启动及测试启动主节点从节点 测试 下载redis6.2.1资源 地址》https://redis.io/download/ 上传至安装目录 例&#xff1a;/data/replication/ 解压及编译 解…
阅读更多...
网络编辑的选择能力

网络编辑的选择能力

以往的网络编辑给人的印象就是个信息搬运工&#xff0c;日常的工作就是从合作媒 体的网站上拷贝新闻&#xff0c;然后粘贴在发布系统中&#xff0c;唯一做的有点儿创造性的工作就是 根据字数要求做一个吸引人的标题就行了。这样的工作还谈不上具备媒介素养&#xff0c;因 为…
阅读更多...
【kubernetes系列】Calico原理及配置

【kubernetes系列】Calico原理及配置

概述 Calico是针对容器&#xff0c;虚拟机和基于主机的本机工作负载的开源网络和网络安全解决方案。 Calico支持广泛的平台&#xff0c;包括Kubernetes&#xff0c;OpenShift&#xff0c;Docker EE&#xff0c;OpenStack和裸机服务。 Calico在每个计算节点都利用Linux Kernel实…
阅读更多...
DP4863 国产双声道音频功率放大器芯片

DP4863 国产双声道音频功率放大器芯片

产品概述&#xff1a; DP4863 电路是一种双声道桥接音频功率放大器。在 5 V 电源电压下&#xff0c;它能向 4 Ω 负载提供 2.2 W 的输出功率&#xff0c;或向 3 Ω 负载提供 2.5 W的输出功率&#xff0c;THD N 小于 1 %。此外&#xff0c;它还具有耳机输入端&#xff0c;可驱…
阅读更多...
《Go 语言第一课》课程学习笔记（十四）

《Go 语言第一课》课程学习笔记（十四）

接口 认识接口类型 接口类型是由 type 和 interface 关键字定义的一组方法集合&#xff0c;其中&#xff0c;方法集合唯一确定了这个接口类型所表示的接口。type MyInterface interface {M1(int) errorM2(io.Writer, ...string) }我们在接口类型的方法集合中声明的方法&#…
阅读更多...
博士后申请有哪些技巧？

博士后申请有哪些技巧？

在博士后申请过程中&#xff0c;有一些关键的技巧可以帮助申请者提高成功的机会。以下是知识人网小编的一些建议&#xff1a; 1.精选合适的导师和研究课题&#xff1a;选择与自己研究方向相关且感兴趣的导师和课题非常重要。导师的声誉、研究成果和合作风格都会影响你的博士后经…
阅读更多...
Java写作的规范篇（一）

Java写作的规范篇（一）

为什么要写下此篇&#xff1f; 首先在我日常的开发中&#xff0c;总是感觉自己在使用一种面向对象的语言然后在面向过程编程。代码中十分不规范&#xff0c;虽然意识到了这个问题。但是想要解决还是需要花费很多的思路去构思如何像写一篇优雅的作文一样写一篇优雅的程序代码。话…
阅读更多...
智慧工地源码带开发手册文档 app 数据大屏、硬件对接、萤石云

智慧工地源码带开发手册文档 app 数据大屏、硬件对接、萤石云

智慧工地解决方案依托计算机技术、物联网、云计算、大数据、人工智能、VR、AR等技术相结合&#xff0c;为工程项目管理提供先进技术手段&#xff0c;构建工地现场智能监控和控制体系&#xff0c;弥补传统方法在监管中的缺陷&#xff0c;最终实现项目对人、机、料、法、环的全方…
阅读更多...
一、设计模式概述-设计模式概述

一、设计模式概述-设计模式概述

一、什么是设计模式 软件设计模式&#xff08;Software Design Pattern&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。它描述了在软件设计过程中的一些不断重复发生的问题&#xff0c;以及该问题的解…
阅读更多...
黑马程序员上课笔记 P2 JAVA 前置课CMD的使用

黑马程序员上课笔记 P2 JAVA 前置课CMD的使用

引入&#xff1a; 一、人机交互 人机交互的故事&#xff1a; 计算机刚出现的时候的三个特点&#xff0c;占地广 造价高 耗电多 故事&#xff1a; 在计算机的历史中&#xff0c;人机交互&#xff08;Human-Computer Interaction&#xff0c;简称HCI&#xff09;一直在不断地…
阅读更多...
Python：使用Resend发送邮件

Python：使用Resend发送邮件

官网&#xff1a;https://resend.com/ 很简单&#xff0c;只需调用api接口&#xff0c;即可发送邮件 需要提前准备好参数 api_key 从Resend申请的keyto_email 接收邮件的邮箱地址 import requestsheaders {Authorization: Bearer <api_key>,Content-Type: applicati…
阅读更多...
自然语言处理（NLP）技术的例子

自然语言处理（NLP）技术的例子

以下是几个自然语言处理&#xff08;NLP&#xff09;技术的例子&#xff1a; 机器翻译&#xff1a;机器翻译是将一种自然语言的文本转换成另一种语言的文本的过程。这种技术应用于在线翻译器、多语言聊天机器人、多语言搜索引擎等地方。 文本分类&#xff1a;文本分类将文本分…
阅读更多...
ExpressLRS开源之RC链路性能测试

ExpressLRS开源之RC链路性能测试

ExpressLRS开源之RC链路性能测试 1. 源由2. 分析3. 测试方案4. 测试设计4.1 校准测试4.2 实验室测试4.3 拉距测试4.4 遮挡测试 5. 总结6. 参考资料 1. 源由 基于ExpressLRS开源基本调试验证方法&#xff0c;对RC链路性能进行简单的性能测试。 修改设计总能够满足合理的需求&a…
阅读更多...
CA证书颁发机构服务器

CA证书颁发机构服务器

目录 一、CA证书颁发机构是什么&#xff1f; 二、数字证书可以干什么&#xff1f; 三、PKI&#xff1a;即公钥加密体系&#xff08;public key cryptography&#xff09; 四、CA在网络中的工作流程及原理&#xff08;以网站为例&#xff09; 五、HTTPS 的工作原理 六、CA私有证…
阅读更多...
最新文章

Copyright @ 2022~2023