dracoLoader和GLTFLoader

2024-11-03

3D性能优化 | 说一说glTF文件压缩

引言最近做T级互动,需要使用到3D模型.相信大家和我一样,在开始着手的时候,一定会有这么些问题: 1.如何选择3D模型的导出格式 2.如何对模型文件进行优化 3.在大流量的项目中兼容性怎么样让我们通过这篇文章,进行细致的探索.调研与沉淀. 一.什么是 glTF 文件 glTF 全称 Graphics Language Transmission Format,是三维场景和模型的标准文件格式. glTF 核心是 JSON 文件,描述了 3D 场景的整个内容.它由场景结构本身的描述组成,其由定义场

制作3D小汽车游戏（下）

书接上回,这一节我们分模块说一说怎么写一个这样的游戏 1. 初始化场景.相机和渲染器这几乎是绘制three必须做的事情,我们有两套场景和相机,一个是主场景和相机,另一个是小地图的场景和相机(用来俯视建筑和小汽车),渲染器设置一级曝光,输出编码设置为sRGBEncoding,代码如下. scene = new THREE.Scene(); scene.background = new THREE.Color(0x8FBCD4); scene.fog = new THREE.Fog(0x8FBCD

谷歌开发的draco格式文件将obj文件压缩成drc文件后将大大减小文件大小（threejs加载有mtl文件的drc文件）

问题描述:当前threejs是92版本但是当前版本还没有能够直接加载带贴图文件的drc格式的loader: 解决办法:先加载mtl文件将obj文件分解(按照mtl文件内材质贴图信息进行分解)再将分解的obj文件转成drc全部加载一遍就能解决贴图的办法 : 代码: THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); var modelObject = new THREE.Object3D(); var loadNum =

Three.js导入gltf模型和动画

核心代码复杂的3D模型一般都是用第三方建模工具生成,然后加载到three中 three官方推荐使用gltf格式的文件,代表编辑器是blender 本文生成了自定义生成了一个blender模型,并且应用了动画效果,核心代码如下 var mixers = []; var clock = new THREE.Clock(); (function(){ var loader = new THREE.GLTFLoader(); loader.load( './static/models/2.gltf',

Three.js会飞走飞回来的鸟

效果图 demo import './index.css'; // stats var stats; (function(){ stats = new Stats(); document.body.appendChild( stats.dom ); })(); // gui var gui; (function(){ gui = new dat.GUI(); var fn = new function() { this.rotationSpeed = 0.02; this.bouncingSpe

Three.js加载gltf模型

效果图 demo import './index.css'; var stats; stats = new Stats(); document.body.appendChild( stats.dom ); var gui = new dat.GUI(); var fn = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03 ; } gui.add(fn,'rotationSpeed', 0, 0.5); gu

【带着canvas去流浪（14）】Three.js中凹浮雕模型的生成方式

目录一. 方案1:ThreeBSP.js或ThreeCSG.js扩展库二. 方案2:平面镂空模型拉伸三. 方案3:Cinema 4D建模后输出模型文件示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录华为云社区地址:[你要的前端打怪升级指南] 浮雕模型,简单地说就是在木板上刻字时所形成的效果,如果把字的部分都剔除掉,就得到一个凹浮雕模型,如果把字以外的部分都剔除掉,就得到一个凸浮雕模型.本文分别对

Three.js 快速上手以及在 React 中运用[转]

https://juejin.im/post/5ca22692f265da30a53d6656 github 的地址欢迎 star! 之前项目中用到了 3D 模型演示的问题,整理了一下之前学习总结以及遇到的坑.3D 框架有老牌引擎 Three.js 和微软的 Babylon.js 对比一下还是使用更为普遍的 Three.js Three.js基础概念主要来自于<Three.js 开发指南>也可以参考在线网站 threejs 教程 3个基础概念:场景(scene).相机(camera)和渲染

Vue引入非npm的js库

Vue引入非npm的js库 Vue项目有时候需要一些没有export的js库,不能通过import引入,那么使用方法如下 1.可以在index.html页面使用script标签引入,当然也可以使用cdn的地址. <!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta name="viewport&qu

ThreeJS模型展示为黑色，模型出不来

选取gltf格式时,出现模型为黑色,模型出不来原因: 我们设计部可能是用maya或者3dmax去做:在模型导出时,没有gltf格式:如果maya或者3dmax导出obj然后导进blender,再导出gltf格式,就容易再格式转换的过程中出现数据丢失.(这时候你会发现你展示出来的模型为黑色,在你代码没有问题的情况下,你会发现后台也不报错,别的模型也可以展示出来) 解决办法: 我们把设计部做出来的模型导出来,放进这个网站进行格式转换 www.sketchfab.com 模型网站(gltf,fbx

vue中加载three.js的gltf模型

vue中加载three.js的gltf模型一.开始引入three.js相关插件.首先利用淘宝镜像,操作命令为: cnpm install three //npm install three也行二.three.js中所有的控件插件,都可以在node_modules下面的three里面找到三.安装好以后,在页面中引入three.js并使用:在所调用页面引入的代码为 import * as THREE from "three"; import { GLTFLoader } from &

教你如何利用threejs对3D模型皮肤进行DIY

一步一步教你如何利用threejs加载gltf模型来实现DIY换肤功能. 模型准备模型制作模型可以通过网上下载,也可以自己通过c4d.maya.blender等模型制作软件得到.这里就不叙述有关模型制作的问题,本文中会在blender进行模型的有关设置. 模型导出 1.导出前设定为了在页面中方便后续的操作,在导出模型前,将模型的各个部件拆分好进行命名约定(本文以小车模型为例)具体如下图所示: 图1 2.导出模型格式选取 threejs可以加载的模型有很多中,之前.ojb..json..FB

three.js尝试(二)模拟游戏开发：3D人物在地图上行走

本次尝试,模拟了一个小人物在场景中行走,使用简单模型建立了森林,图片纹理模拟草地,加载3D模型呈现人物,使用按键asdw模拟人物的行走,行走和站立时人物的切换等. 主要用到点:3D模型的加载,模型的动画(行走与站立)之间的切换. 不足之处:没有检测碰撞与边界. 需要注意的是,代码需要运行在服务器端,切记. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <styl

使用three.js实现炫酷的酸性风格3D页面

背景近期学习了 WebGL 和 Three.js 的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识.本文内容主要介绍,通过使用 React + three.js 技术栈,加载 3D模型.添加 3D文字.增加动画.点击交互等,配合样式设计,实现充满设计感的酸性风格页面. 基础知识 Three.js Three.js 是一款基于原生 WebGL封装运行在浏览器中的 3D引擎,可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.是一款使用非常广泛

Three.js 实现3D全景侦探小游戏🕵️

背景你是嘿嘿嘿侦探社实习侦探️,接到上级指派任务,到甄开心小镇调查市民甄不戳宝石失窃案,根据线人流浪汉老石‍提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧! 本文使用 Three.js SphereGeometry 创建 3D 全景图预览功能,并在全景图中添加二维 SpriteMaterial.Canvas.三维 GLTF 等交互点,实现具备场景切换.点击交互的侦探小游戏. 实现效果左右滑动屏幕,找到 3D 全景场景中的交互点并点击,找出嫌疑人真正躲藏的位置. 已适配

Three.js 实现虎年春节3D创意页面

背景虎年春节将至,本文使用 React + Three.js 技术栈,实现趣味 3D 创意页面.本文包含的知识点主要包括:ShadowMaterial. MeshPhongMaterial 两种基本材质的使用.使用 LoadingManager 展示模型加载进度.OrbitControls 的缓动动画.TWEEN 简单补间动画效果等. 实现在线预览,已适配移动端:https://dragonir.github.io/3d/#/lunar 引入资源其中 GLTFLoader.FBXLoad

Three.js 实现2022冬奥主题3D趣味页面 🐼

背景迎冬奥,一起向未来!2022冬奥会马上就要开始了,本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面.本文涉及到的知识点主要包括:TorusGeometry 圆环面.MeshLambertMaterial 非光泽表面材质.MeshDepthMaterial 深度网格材质.custromMaterial 自定义材质.Points 粒子.PointsMaterial 点材质等. 效果实现效果如以下动图所示,页面主要由

Three.js 实现3D开放世界小游戏：阿狸的多元宇宙 🦊

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 2545光年之外的开普勒1028星系,有一颗色彩斑斓的宜居星球 ,星际移民 ‍ 必须穿戴基地发放的防辐射服才能生存.阿狸驾驶星际飞行器降临此地,快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧! 本文使用 Three.js + React + CANNON 技术栈,实现通过滑动屏幕控制模型在 3D 世界里运动的 Low Poly 低多边形风格小游戏.本文主要涉及到

three车辆自由转弯（vue 极品飞车）

//最近没有时间整理代码,就这样吧 <template> <div> <div id="map"></div> </div> </template> <script> // import * as Three from '../../node_modules/three/build/three.module.js'; import "maptalks/dist/maptalks.css&quo

Three.js 打造缤纷夏日3D梦中情岛 🌊

声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景深居内陆的人们,大概每个人都有过大海之梦吧.夏日傍晚在沙滩漫步奔跑:或是在海上冲浪游泳:或是在海岛游玩探险:亦或静待日出日落--本文使用 React + Three.js 技术栈,实现 3D 海洋和岛屿,主要包含知识点包括:Tone Mapping.Water 类.Sky 类.Shader 着色.ShaderMaterial 着色器材质.Raycaster 检测遮挡以及

dracoLoader和GLTFLoader

热门专题