s

我不知道的threejs(6)-开发中的容易被忽略的


在threejs Editor中调好一些样式属性后, 可以直接选择导出具体的格式,或者导出成json【json 一般体积大很多,比glb】(场景,通过objectLoader 加载json!!!)

自发光属性和自发光贴图:

.emissive

.emissiveMap

【有时候模型导出后,使用threejs展示的时候,现实的效果会和在3d编辑器中效果有差异, 具体到,就比如手机模型,编辑器里的效果是屏幕很亮,而且是贴图颜色的亮, 但是使用threejs  加载屏幕会暗很多,仅仅调节自发光强度,屏幕是发白的亮,而不是贴图的那种颜色的亮度,这时候就可以加载这张自发光贴图即可 】

设置一些金属效果,毛绒反光效果,等都是通过

一些室内的模型,比如vr 看房, 限制控制器位移,旋转角度避免穿帮

控制思路:

1,首先将摄像机定位在一个合适的角度(集合 axesHelper xyz坐标轴辅助器,看调节哪些个方向)

2.控制器 controls.target.set(设定在和相机lookat 的同一位置)

3. 一般禁用  鼠标右键移动模型  controls.enablePan = false

4.设置缩放的最大最小距离(指的是离这个controls.target的距离)controls.minDistance/maxDistance

5.设置垂直Polar/水平Azimuth的旋转角度, 一般都需要 controls.minPolarAngle/maxPolarAngle[minAzimuthangle/maxAzimuth]

 

纹理:

1.重复   texture.wrapS(水平)/wrapT(竖直) 方向上重复 + texture.repeat.set(4, 4) [表示x,y轴都重复四次]

2.偏移:  texture.offset.set(x, y )

3旋转:texture.rotation (默认 center为 0 0) 可以通过 texture.center.set()  修改旋转中心点 

4.  纹理翻转flipY和 预乘alpha premultiplyAlpha (存在alpha 的话)(最常见的效果就是贴图会出现描边效果)

 一些优化项    

 动态【Hdr格式|EXR格式|Tif|png】全景背景图色调曝光度的自适应: 主要是用于处理如果是很亮的场景, 不注意曝光度太高导致晃眼,看不清, 太暗的也不会乌漆嘛黑

渲染器设置【

render.toneMapping = 设置曝光模式

render.toneMappingExposure = 1 设置曝光度 【可以模拟关灯和 开灯,天亮了等场景】

 

纹理的各项异性过滤(Anisotropic filtering)贴图当中解决角度失真问题的技术,通常在地面、墙面或其他倾斜的表面上观察到这种现象。

当视角接近平行于纹理表面时,例如查看地平线上的地板纹理,由于取样密度的不均匀,导致远离观察者的纹理区域显得模糊。各向异性过滤通过沿着轴取样更多的纹理像素以解决这个问题,使纹理在不同的观察角度下看起来更清晰。

 texture.anisotropy = 1~16 区间 默认为1

 

压缩图片纹理 :可以借助 mvidia  的 图片压缩工具, 支持多种格式:

 

Threejs 中使用KTX2/DDS/TGA \EXR\TIF/PNG纹理

1. 加载KTX2  :需要借助 ktx2Loader.js  以及工具类 basis  [位置:three/axamples/jsm/lib/basis] 复制basis到public下最好

const  ktx2loader = new KTX2Loader().setTranscodePath('basis').detectSupport(renderer)

(有个重要的点就是,使用nvidia贴图压缩的时候,如果压缩导出的时候,设置了 生产mipmap的话, 那么全景环境贴图可能就会失效)

 2.dds 

 3. tga

 4.EXR

 5. tif

6.png 

 

本文作者:努力不搬砖的iori

本文链接:https://www.cnblogs.com/Hijacku/p/17547146.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   努力不搬砖的iori  阅读(416)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.