关于Three.js 加载地面贴图的坑

最新推荐文章于 2024-07-16 09:50:03 发布
最新推荐文章于 2024-07-16 09:50:03 发布
阅读量2.8k 收藏 3
点赞数
文章标签： three.js JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zoye_cheer51/article/details/103278545
版权
本文讲述了在使用Three.js时遇到的Plane贴图加载问题，详细描述了从贴图无法显示到发现问题所在的过程，即缺少灯光设置。添加灯光代码后，贴图成功显示，但作者对为何Box贴图不受影响而Plane贴图变黑的原因进行了初步猜测，认为可能与不同的shader有关。
摘要由CSDN通过智能技术生成

关于Three.js 加载Plane贴图的坑

刚开始学Three.js，按照官方的案例，给一个box和地面plane添加texture，诶，奇了怪了。box能正常加载显示出来，地面死都加载不出来。而且network明明就显示成功加载了两张图片啊~~~当时我已经气的快吐血了。后来冷静下来，一步一步的对着官方案例看到底漏了啥。当我一看到灯光信息的时候，突然恍然大悟！！！没有光咋显示出来，于是我就加了一条代码。困扰我良久的问题终于解决了。哭惹…

scene.add(new THREE.AmbientLight(0x666666));

之前
之前
之后
加了之后

不过为什么box贴图不黑，plane就黑啊。嗯！以后我肯定知道原因的！我猜测，应该是对应的shader不一样吧。

源代码

 var loader=new THREE.TextureLoader();
			var boxTexture=loader.load('../textures/cube/pisa/nz.png'
最低0.47元/天 解锁文章
Zoye_cheer51
关注
threejs学习笔记：贴图实现木地板效果
九段刀客的博客
08-11 1231
代码】threejs学习笔记：贴图实现木地板效果。
three贴图地面，雾气，克隆，贴图，打印所有模型，模型光源，旋转角度
qq_34631220的博客
03-18 655
import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera' const ge.
Three.js常见的贴图类型及其用途
最新发布
weixin_42776027的博客
07-16 683
每种贴图都有其独特的作用，通过合理组合和使用这些贴图，可以极大地提升3D模型的视觉质量和真实感。这种贴图可以是立方体贴图（Cubemap）或球面环境贴图（Spherical Environment Map），用于捕捉全景环境，使物体表面能够反映出周围环境的细节。位移贴图是最具真实感的贴图类型之一，它实际上会改变模型表面的几何形状，根据贴图中的数据来移动顶点位置，从而创建真实的物理凹凸效果。除了之前提到的贴图类型，Three.js还支持一些其他类型的贴图，用于更高级的视觉效果和物理模拟。
three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型
acoolgiser的博客
11-30 3558
概述： 现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltf Viewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章，最后才试出来解决办法。 一、模型 首先看一下在https://gltf-viewer.donmccurdy.com/上预览的效果，直接上图： 二、下载源码，本地运行 下载它的源码，https://github.com/donmccurdy/three-gltf-viewer，在本地运行起
关于小程序中使用three.js，预览无法显示贴图图片问题，图片的像素必须为2^n，且最大像素为1024*2048，且宽高比为1:1或者1:2。
selectDele的博客
06-17 705
图片的像素必须为2^n，且最大像素为1024*2048，且宽高比为1:1或者1:2。
threejs贴图的几个问题
lisiur的博客
03-21 7554
需要运行在服务器中，这个一般书籍都有提示。 由于目前的书籍（本人已知）所使用的threejs都不是当前最新版本，所以书中或博客中提到的THREE.ImageUtils.loadTexture()函数已被丢弃，请使用THREE.TextureLoader().load()函数。（更新于2016.03.01） 贴图（使用图片）的3D模型需要不断渲染才能显示。（只贴颜色的则不需要，实验所得，仅供参考）。
ThreeJs法向贴图
u010664247的博客
04-26 7118
皮肤的皱纹，砖墙表面的凹凸，衣服的褶皱，树皮的纹路… 这些丰富的细节在计算机的3D世界中，最常用的展现方式就是法相贴图了。 对于高模来说，如果精度足够高，近似认为一个面就是一个点，那么将其贴图揭下就是一张图片。 这张高模贴图上的每个点拥有一个法向量，反应出高模上的细节。 对于低模来说，一个面对应高模中的很多个面，每个面看作是一面镜子，将其贴图揭下来就是一张很多三角形镜子拼接的图，每个三角
three.js 加载光影贴图
w__qwwq的博客
09-08 622
three.js 加载光影贴图
Three.js加载obj+mtl文件，（机房演示效果图）
12-26
压缩文件包含了一个使用Three.js框架加载obj+mtl模型文件的3d机房实例效果，可用于参考如何使用Three.js加载3dMax之类的软件做出来的obj模型文件以及mtl材质文件。可本地运行（使用火狐浏览器），或者开启本地服务...
THREE.JS开发指南 资源包 素材 learning-threejs
08-28
THREE.JS开发指南 资源包 素材 learning-threejs Three.js开发指南
Three.js加载外部模型的教程详解
11-29
要开始使用Three.js，首先需要从官方网站<https://threejs.org/>下载最新版本的压缩包，并在HTML文件中引入`three.js`库。 1. 引入Three.js库： 在HTML文件中，通过`<script>`标签将`three.js`库的`build`文件夹下...
Threejs中的材质贴图
weixin_33681778的博客
12-04 1805
最近项目需要折腾three.js，有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图（如：室内模型图）需要美术3D制作，前端导成特定格式文件(如*.mtl/*.obj 格式文件)， 之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可 基础案例https://github.com/AragornZJF/...
three.js(5)：纹理贴图和遇到的问题
spider_man
08-27 2439
完整代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>正方体贴图</title> <style> .body{ margin: 0; overflow: hidden; } </style> </head> <body> </body>
threejs中纹理贴图不会立即显示问题
weixin_40856652的博客
04-26 2086
1、问题描述： 在three.js中加载图片作为纹理贴图时， 页面加载完后贴图不显示；触发一下鼠标事件后就显示出来了。 2、原因分析： 因为在renderer.render(scene, camera)执行在前，图片加载完成在后；所以图片纹理没有显示。使用了OrbitControls ，我们在触发一下鼠标事件后重新调用了 render 方法，所以图片纹理就显示出来了。 3、解决办法： 使用 requestAnimationFrame 循环调用 render 方法 render(); function ren
three.js纹理贴图大小—性能优化
u014291990的博客
03-28 552
红绿灯贴图，500左右的像素和250左右的像素，收费站都可以正常渲染，这时候你就可以选择像素更小的图片作为纹理。jpg、png格式图片通过简单压缩后，文件缩小，这样三维场景gltf文件就会更小，可以提升三维模型加载速度。同样清晰情况下，对比收费站模型，天空盒背景图，红绿灯的贴图，你会发现像素宽高度差别很大。一般来说在网页上渲染范围越大，需要纹理图像像素越大，渲染范围越小，需要纹理图像越小。对于不需要背景透明的纹理，大部分情况下，选择jpg格式，要比png格式更小一些。，另一方面网页从服务器加载图片文件的。
基于vue3.2、three实现地图在地图加载
qq_24343389的博客
04-04 465
基于vue3.2、three实现地图展示
three.js纹理贴图不清晰，颜色失真
qq_45331969的博客
12-13 1556
【代码】three.js纹理贴图不清晰，颜色失真。
three.js加载hdr贴图
03-28
要加载HDR贴图，首先需要确保three.js的版本大于等于r84。 接下来，我们需要使用THREE.RGBELoader来加载hdr贴图。在加载完成后，我们需要将其转换为THREE.DataTexture并将其用作环境贴图。 以下是完整的示例代码，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值