文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型

概述： 现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltf Viewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章...一、模型 首先看一下在https://gltf-viewer.donmccurdy.com/上预览的效果，直接上图： 二、下载源码，本地运行 下载它的源码，https://github.com/donmccurdy.../three-gltf-viewer，在本地运行起来，vscode打开，改一下src目录下的viewer.js文件中的代码，在traverseMaterials函数中增加下面两句： material.alphaTest...= 0.1; material.depthWrite = false; 三、效果对比 然后重新预览该gltf模型，效果如下图，算是勉强达到了想要的效果。...找到该解决办法的过程中参考了文章： https://blog.l0v0.com/posts/50589.html https://www.manongdao.com/article-1036373.html

6.7K10

这几个库颠覆你对数据交互的想象

播放器里的颜值担当：Mini Music Player - VueJS ? 国外友人写的一个Vue.js音乐播放器，好看的不得了。 其中的交互和逻辑，也是非常精炼。...这是个很有意思的实现，大致流程是： 手机开启浏览器 AR.js程序开始 ARToolKit识别到图片标记 A-Frame.js开始调用Three.js渲染 3D 模型 在画面上显示 ?...查找模型 首先我们先到 https://sketchfab.com下载自己喜欢的 3D 模型 ? ? 2. 下载 3D 模型 ?...[1] 请欣赏一个价值 2199 刀的模型 ? 还有超赞的《这个杀手不太冷》女孩模型 ? 这也太好看了吧。 ? 4. 后记&引用 原本想凑齐十个再发的，但找了好久，都没什么开源库能入我法眼。...恳请大家，推荐几款骚得不行的开源库，我来补充补充，谢谢喇。

2.5K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    如何使用 react 和 three.js 在网站渲染自己的3D模型

    正文开始 在本文中，我将介绍如何在 react 项目中使用 react-three-fiber 创建的一个 3D 软件程序，配置 3D 参数(如 Blender 或 Maya ) 。...在本文结束时，您将能够在您的网站上渲染一个 3D 模型 (gltf / glb)。...获取自己的 3D 模型 为了获得自己的 3D 模型，我们使用 Ready Player Me 这个网站，一个免费的 3D 形象创建器来自 Wolf3D，允许任何人在几分钟内创建自己的外观表现，不需要任何...选择体型 上传你自己的照片 定制您的外观 下载您的模型 在 React 中渲染模型 为了在 react 程序中渲染这个模型，我们将使用 react-three-fiber** 一个**Threejs...创建一个新的 blender 项目 删除所有对象中的物体 将 glb 文件导入 blender 选择您的模型，然后单击 Import glTF 2.0 将模型转换为 fbx 格式 在将添加任何动画添加到我们的模型之前

    10.3K10

    JSAPIThree 加载单体三维模型学习笔记：SimpleModel 简易加载方式

    了解 SimpleModelSimpleModel 是 mapvthree 对 Three.js 模型加载的封装，主要解决了以下问题：原生 Three.js 加载方式的问题如果直接使用 Three.js...第四步：监听加载完成事件模型加载是异步的，可以通过事件监听器获取加载完成的通知。...：如果发现加载的模型方向不对（如倒着的、躺着的），可能是 autoYUpToZUp 的设置问题。...解决：检查模型文件路径是否正确确认模型文件格式是否为 glb/gltf（或其他 Three.js 支持的格式）打开浏览器控制台查看是否有加载错误检查模型位置是否在视野范围内坑 2：模型方向不对原因：坐标系转换问题...解决：调整 scale 参数，尝试不同的缩放比例如果模型太小看不见，尝试放大 10 倍、100 倍如果模型太大，尝试缩小到 0.1、0.01坑 4：动态修改不生效原因：在模型加载完成前就进行了修改操作。

    25610

    Three.js中的加载器与资源管理：构建丰富3D场景的关键

    加载器在Three.js中扮演着桥梁的角色，负责将外部的3D模型、纹理、字体和其他资源导入到场景中。...本文将深入探讨Three.js中的模型加载器（如GLTFLoader、OBJLoader、FBXLoader）、纹理加载器（TextureLoader、CubeTextureLoader）以及其他资源加载器...二、模型加载器（一）GLTFLoader1.格式概述GLTF（GL Transmission Format）和GLB（GLB is a binary version of GLTF）是一种针对3D场景和模型的现代格式...('An error occurred while loading the GLTF model:', error);});在成功加载回调函数中，我们可以将加载得到的模型场景（gltf.scene）添加到我们的主场景...，可以显示一个默认的占位模型，告知用户加载出现问题。

    2.5K21

    Three.js 之 Import Model 导入模型

    glTF-Embedded这个格式有点像 glTF-Binary 因为也是只有一个文件。但这个文件是一个 JSON 因此你可以在编辑器里打开。选择合适的模型格式根据不同场景做出不同的选择才是最优方案。...如果你想修改 textures 或导出的光线坐标，最好选择第一个默认的 glTF。它还具有分别加载不同文件的优势，从而提高了加载速度。...scene 添加到我们的场景里。...的内容，移除掉不需要的对象，如 PerspectiveCamera仅添加 Mesh 到场景里，但有可能会有错误的缩放、位置、角度等问题打开 3D 软件将 PerspectiveCamera 移除，再重新导出模型因为我们的模型很简单...，因此我们可以将其返回的 scene.children[0] 整体添加到我们的 Three 场景中（即上述的第二种方式）。

    7.5K30

    glTF简介

    概述 glTF简介，Web端三维模型及其特点 Cesium如何加载，渲染glTF，逻辑结构和关键技术 个人总结，从glTF学习如何设计一个二进制格式，个人想法分享 关键字：Cesium glTF WebGL...三维模型的格式这么多，为什么不用现成了，而是非要自己重新定义一个规范，原文中Patrick很诚实详尽的做了解释。...上图是glTF的一个大概结构，分为四大块，最上面的json是一个表述，描述该模型的节点层级，材质，相机，动画等相关逻辑结构，bin则对应这些对象的具体数据信息，glsl是对该模型渲染的着色器，针对该模型的数据信息...充分体现了glTF规范设计的强大，让我想到了一句话：“解决问题固然重要，但通过设计避免问题则更胜一筹”。...下面我们来看看glTF是如何渲染模型的，talk is cheap and show me the code~ ▽加载&渲染 ?

    4K100

    金三银四，一个面试官连连夸赞的个人网页技术分享

    3.精准对位：如何调试iframe的3D坐标？这是上一个问题的延伸。iframe（网页）作为一个平面，在3D空间中同样拥有自己的坐标和旋转参数。但问题是：你很难凭直觉盲猜出电脑模型那块屏幕的精确数值。...而模型加载进来也通常在原点。这种“合二为一”的状态让你什么也看不见。为了解决这个问题，我们需要像真正的摄影师一样，完成以下三个层层递进的步骤。...;child.material=material;}});this.scene.add(gltf.scene);//模型加载完后，开始在3D空间“插”一个网页this.initIframeScreen(...所以我们需要我们的网页（用cssRenderer渲染）层级更高。这样你才能直接在3D场景里点击网页上的按钮、滑动网页。如果WebGL渲染器在上面，网页就只能看不能摸了。...所以自然给cssRender元素增加backfaceVisibility=true即可解决穿模问题。如何让网页严丝合缝地“贴”到模型屏幕上？接下来就是最后一个问题了，如何把网页贴在电脑模型的屏幕上。

    17620

    【vue2 + Cesium】相机视角移动+添加模型、模型点击事件

    ，我们可以使用 cesium 提供的一个方法，把相机移动到我们需要的地方。...添加模型 嗯，添加模型这个东西，每个人的方式都有自己的习惯和方式，我这边就简单的写一下哈。...首先如果想要一个真实的模型加载在蓝星，就需要去找一个模型，如果是正经项目开发，添加模型什么的，肯定会有自己设计制作好的模型文件提供，或者是委托第三方采购，但是如果是自己玩怎么办，没关系宝子们，我推荐一个网站叫做...搜索一下，搜出来的模型，右上角带有下载按钮的，就是可以免费下载的了 ： 点击了右上角的下载按钮，会弹窗选择文件类型，我是选择 gltf 格式的，确定好点击蓝色的下载按钮就可以下载下来了。...好了，这是最简单的加载模型到蓝星的方式，还有其他的方式，如果需要的话可以自己看一下研究一下。

    36310

    # threejs 基础知识点汇总

    threejs 基础知识点汇总 之前写了几篇博文，但是我觉得写的不好，我今天再补充一篇还不好的，把基础知识点汇总一下，不写运行的代码了，只写关键代码，但是看了之前我写的那几篇，看这篇的话问题其实不大。...2D美术：根据三维模型设计贴图。 WebGL开发：加载解析三维软件导出的三维模型。比如使用Blender三维建模软件导出gltf格式模型，然后再通过threejs加载三维模型。...Three.js 加载Gltf模型 GLTFLoader就是three.js的一个扩展库，专门用来加载gltf格式模型加载器。...// 导入模型加载器 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; // 实例化一个gltf的加载器对象 let loader...= new GLTFLoader(); // 加载gltf模型 loader.load("/static/models/model/model.gltf", (gltf) => { scene.add

    2.5K30

    我给鸿星尔克写了一个720°全景看鞋展厅

    然后我大致总结了以下几个步骤： 1.建模 2.使用 Thee.js 创建场景 3.导入模型 4.加入 Three.js 控制器 由于之前学习了一些 Three.js 的相关知识，因此对于有了模型后的展示还是比较有底的...最终我选择了 Reality Capture 来创建模型，他是可以通过多张图片来合成一个模型的方式，看了一些b站的视频，感觉它的呈像效果也不错，不过它只支持 windows，且运行内存需要8g，这个时候我搬出了我...构建应用 主要由三部分组成（构建场景、模型加载、添加控制器） 1.构建3d场景 首先我们先加载 Three.js import * as THREE from...renderer.render( scene, camera ); 2.模型加载 由于我们的导出的模型是 OBJ 格式的，体积非常大，我先后给它压成了 gltf、glb 的格式，Three.js 已经帮我们写好了...，仿佛黑暗中看到了光明，但是这时候无法通过鼠标或者手势控制的，需要用到我们 Three.js 的控制器来帮助我们控制我们的模型角度。

    1.3K20

    实测｜用 DracoOptimizer 把 glTFGLB 模型压缩到极致：体积减90%，Web3D加载快到飞起

    实测｜用 DracoOptimizer 把 glTF/GLB 模型压缩到极致：体积减90%，Web3D加载快到飞起面向 Web3D / Three.js 开发者的轻量桌面工具：一键压缩 + 批量处理 +...可视化对比，解决模型加载慢的核心痛点背景：Web3D 开发者的「体积焦虑」做过 Web3D 项目的同学都懂：哪怕是一个简单的 3D 模型，只要体积超过几 MB，就会出现明显的加载问题：首屏白屏：用户等待...3~5 秒甚至更久才能看到模型带宽成本高：大模型反复传输，CDN/服务器流量开销翻倍低性能设备兼容差：移动端/低带宽环境下模型加载失败或卡顿市面上的 Draco 压缩工具要么是命令行（上手成本高），要么是在线工具...（批量处理受限），因此我基于 Draco 官方算法做了一款轻量桌面工具 DracoOptimizer，专注解决「glTF/GLB 模型压缩」这一件事，兼顾易用性和压缩效果。...+ Three.js 核心）最后如果你正在被 Web3D 模型体积大、加载慢的问题困扰，不妨试试 DracoOptimizer —— 无需写一行代码，就能把模型体积降到可接受范围，同时保证加载体验。

    1.4K10

    我给鸿星尔克写了一个720°看鞋展厅

    然后我大致总结了以下几个步骤： 1.建模 2.使用 Thee.js 创建场景 3.导入模型 4.加入 Three.js 控制器 由于之前学习了一些 Three.js 的相关知识，因此对于有了模型后的展示还是比较有底的...最终我选择了 Reality Capture 来创建模型，他是可以通过多张图片来合成一个模型的方式，看了一些b站的视频，感觉它的呈像效果也不错，不过它只支持 windows，且运行内存需要8g，这个时候我搬出了我...构建应用 主要由三部分组成（构建场景、模型加载、添加控制器） 1.构建3d场景 首先我们先加载 Three.js import * as THREE from...renderer.render( scene, camera ); 2.模型加载 由于我们的导出的模型是 OBJ 格式的，体积非常大，我先后给它压成了 gltf、glb 的格式，Three.js 已经帮我们写好了...，仿佛黑暗中看到了光明，但是这时候无法通过鼠标或者手势控制的，需要用到我们 Three.js 的控制器来帮助我们控制我们的模型角度。

    99050

    Threejs入门之二十五：Threejs加载gltf文件

    这一节我们来通过Threejs加载一个glft格式的三维模型文件，首先我们先简单了解下gltf文件gltf文件gltf文件全称Graphics Language Transmission Forma（图形语言传输格式...），是一种三维模型格式，用于传输和加载3D场景和模型；其号称是图形界的JPEG，能够实现快速的模型数据交换。...加载gltf文件下面通过代码实现加载一个gltf格式的文件到场景中，首先还是需要创建场景、相机、渲染器等初始化代码，具体步骤查看前面章节，代码如下页面初始化import * as THREE from...化加载器在initMesh() 函数中定义一个变量loader，该变量用于接收GLTFLoader实例const loader = new GLTFLoader()加载gltf文件通过loader的load...()函数中加入如下代码//解决加载gltf格式模型纹理贴图和原图不一样问题 renderer.outputEncoding = THREE.sRGBEncoding;再次刷新浏览器，看效果 修改gltf

    9.6K31

    web网站使用three.js来绘制三维图形

    如果你在使用一个前端框架，例如 Vue 或 React，你可以使用相应的库，例如 vue-threejs 或 react-three-fiber 作者这里用的vue3的框架 直接上命令，npm安装或者pnpm...``` # 六：使用体验 自从我开始接触并深入使用Three.js这个强大的WebGL 3D库以来，我深刻感受到了它在网页上创建沉浸式三维体验的巨大潜力和灵活性。...从基础的几何体（如立方体、球体等）到复杂的模型加载（支持多种格式，如FBX、OBJ、GLTF等），再到材质、纹理、阴影、光照、动画等高级特性的应用，Three.js都能提供全面的支持。...这意味着使用Three.js创建的三维场景可以在绝大多数现代浏览器上运行，无需担心兼容性问题。...同时，社区中的开发者们也非常乐于分享自己的经验和知识，这为你解决遇到的问题提供了有力的支持。

    2K10

    Three.JS编程中如何切换gltf模型动画？

    在Threejs编程中，处理GLTF模型动画的切换主要涉及对模型中的动画剪辑（AnimationClip）进行管理和播放控制。下面的代码，展示如何在Three.js中切换GLTF模型的动画。...步骤 1: 加载GLTF模型首先，你需要使用GLTFLoader来加载包含动画的GLTF模型。...通过这些步骤，就能够在Three.js中实现加载、播放和切换GLTF模型的动画。...此外，threejs开发的项目，是JS编程、运行于浏览器，他人只需在浏览器中右键查看网页源码，便可得获得源码，进而可以分析功能逻辑、可以复制、运行调试、了解功能原理。...threejs开发的功能在发布前通常需要先用JShaman、JS-Obfuscator、JsJiaMi.Online等工具进行JS代码混淆加密，以解决JS代码公开透明特性带来的不安全问题。

    1.2K20

    两种通过Plist加载图片的方法及问题，九宫格的算法，字典转模型1. 序列帧动画实现2. 图片浏览器-两种加载plist的方式3. 图片浏览器-内存问题4 MVC简单介绍和类前缀5 应用管理-两种加载

    图片浏览器-两种加载plist的方式 1方式1，通过文件路径加载（本地） NSString *path = [[NSBundle mainBundle] pathForResource:@"images.plist...图片浏览器-内存问题 3.1 加载图片的两种方法 1.1 通过imageNamed方法 系统会进行缓存,程序员无法销毁....4 MVC简单介绍和类前缀 模型 : 数据 视图 : 负责显示 控制器 : 处理逻辑,如跳转界面 类前缀苹果推荐使用三个或三个以上字母,防止重名 5 应用管理-两种加载xib的方式 从 NSBundle...一般情况下，设置数据和取出数据都使用“字符串类型的key”，编写这些key时，编辑器没有智能提示，需要手敲。...- 根据view提供的方法添加到视图上(c不关心view具体是如何创建的),并且,把解析的模型数据复制给view.h里面用来接收模型类型的属性

    1.5K30

    如何在页面极速渲染3D模型

    但是在 H5 中引入 3D 模型往往存在资源太大、性能损耗严重、还原不真实的问题，这也让许多 3D 创意止步于开发阶段。 如何更好地在 H5 中还原模型呢？...本文将从模型网格和贴图文件两方面分析，介绍几种通过技术角度优化加载速度和提高渲染性能的途径，在保证 3D 模型不减面，贴图不缩小的情况下，将模型精致地还原在 H5 或其他应用程序中。...效果测试 我们以太空鹅模型为例，只加载模型几何体，不带入材质属性，通过ThreeJS 分别加载 FBX / glTF / 压缩后的glTF 的格式，第三种格式以默认参数压缩。测试效果对比如下： ?...应用程序加载 basis 文件后，可通过 basis 转码器快速转换成适用于设备的压缩纹理格式。如下图(图片来自Google Blog)所示： ?...效果测试 为了数据更加明显，我们在Mac Chrome 浏览器performance模式下，针对同一个电视机模型利用 ThreeJS 各自加载了 4096 x 4096 大小的颜色贴图、法线贴图、金属与粗糙贴图

    9.4K32

    用Threejs在你的网页里放一个冰墩墩！

    模型优点 这里我再给没看过之前文章的小伙伴们分享下GLTF的格式的特点以及如何在Threejs里加载GLTF模型。...加载GLTF模型 const loader = new GLTFLoader().setPath( 'model/' ); loader.load( 'dwendwen.gltf', function...我在导出GLTF格式之前设置的可不是这样呀。 可能由于兼容性的问题，脸部的卡通材质丢失了，还有冰晶外壳需要的环境反射贴图也没有了。...我也不清楚具体是哪里兼容性的问题，不过，我们依然可以用代码重新把材质给模型加上呀。...那是因为原本的身体模型对象上就有贴图，我直接拿去作为卡通渲染材质的贴图，省的再加载一遍了。 现在我们的冰墩墩就很BlingBling了对吧~ Enjoy~

    2.7K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券