Three.js使用技巧

three.js中大多数材质需要有了光照才可以看到， MeshBasicMaterial 是一种不需要光照就可以见的材质。看看你那显示不了的东西，是不是缺少了光照～
物体不在相机的视锥体内，是会被裁剪掉，看不到滴，相机的视锥体以米为单位。为了获得最佳性能，应设置的尽可能的小（FPS提升一小步，性能提升一大步）。
不要把物体放在远剪裁平面上（特别是如果你的远剪裁平面真的很大），因为这会引起闪烁。
three.js中的一个单位对应的是一米。如果你加载了模型看不到，找找屏幕中间的小黑点～，可以用scale把它放大。
three.js处处都是用的国际单位制。如果处于某种原因使用不同类型的单位（例如：英寸），让人头秃。
国际单位制（SI Units）
○ 距离以米为单位（three.js的1单位 = 1米）
○ 时间以秒为单位
○ 光照以国际光照强度单位测量，坎德拉(cd)、流明(lm)和勒克斯(lx)。至少需要开启renderer.physicallyCorrectLights
如果你要创建史诗级规模场景（空间模拟或类似的东西），请使用缩放因子或切换到使用对数深度缓冲区-logarithmic depth buffer
如果你需要操作大量物体可见和不可见（或从场景中添加/删除它们），请考虑使用图层-Layers以获得最佳性能。
永远不要移动你的场景（Scene）。在(0,0,0)位置创建，这是其中所有物体的默认参考系。
尽可能减少渲染循环中的消耗，不要每帧都创建新的对象。应创建一个单一的对象，例如Vector3并使用**vector.set()**或类似的方法来重用循环内的对象。
总是使用BufferGeometry,而不是Geometry,它更快，性能更好。预先封装好的对象也是如此，始终使用缓冲几何版本BoxBufferGeometry而不是BoxGeometry。始终尝试重用对象，例如物体，材质，纹理等（尽管更新某些内容可能比创建新内容慢）
避免使用常见的基于文本的3D数据格式（例如obj）进行数据交付。取而代之，请使用针对Web端优化的格式，例如gltf。可以使用Draco对gltf进行网格压缩，或者使用gltfpack。
针对渲染器方面：非必要就不要启用preserveDrawingBuffer,禁用透明缓冲区，禁用深度缓冲区，禁用模版缓冲区。创建渲染器时使用powerPreference:"high-performance",这可能会促使用户系统在多GPU系统中选择高性能GPU。仅在相机位置发生变化或动画发生时才考虑渲染。使用OrbitControls相机，可以监听控件的change事件。在相机移动时渲染场景：
OrbitControls.addEventListener("change", () => renderer.render(scene, camera));
光照方面：
a. 直射光（SpotLight、PointLight、RectAreaLight和DirectionalLight）很影响性能，尽可能少使用直射光。
b. 避免在场景中添加和删除光，因为这需要WebGLRenderer重新编译所有着色器程序，使用light.visible = false 或light.intensiy = 0
c. 打开renderer.physicallyCorrectLights,使用国际单位制的正确光照。
阴影方面：
a. 如果场景是静态的，仅在事物发生变化时更新阴影贴图。
b. 使用CameraHelper可视化阴影相机的视锥体，使阴影视锥体尽可能小，使阴影纹理的分辨率尽可能低。
c. 点光源阴影比其他阴影类型更消耗性能，因为它们必须渲染六次（每个方向一次），而DirectionalLight和SpotLight阴影则需要渲染一次。
d. 使用PointLight阴影时，请注意，当用于可视化点光源阴影时，CameraHelper只可视化了六个阴影方向中的一个。
材质方面：
a. MeshLambertMateria不适用于闪亮拉丝的材质，当对于像布料这样的哑光材质，它会产生非常相似MeshPhongMaterial的结果，但性能更高。
b. 如果使用的是顶点变形目标（morph targets），请确保你在材质中设置了morphTargets = true，否则它们将不起作用，这同样适用于变形法线（morph normals）。
c. 使用SkinnedMesh来制作骨骼动画，确保material.skinning = true。
d. 与变形目标，变形法线或蒙皮一起使用的材质无法共享。需要为每个蒙皮或变形的网格创建单独的材质（material.clone()在这里非常适用）
e. 自定义材质：仅在你的uniform变量发生变化时更新它，而不是每一帧。
几何：避免使用LineLoop，因为它必须由直线拟合而成。
纹理
a. 纹理需要是2的幂次方（POT）大小
b. 不要更改纹理的尺寸，而是创建新的，性能更高。
c. 尽可能使用最小尺寸的纹理。
d. 非2的幂次方（NPOT）纹理需要linear或nearest filtering滤镜参数设置，以及clamp-to-border 或clamp-to-edge包裹方式（详见textures常量）不支持Mipmap过滤和重复包裹。（还是不要使用NPOT纹理啦）
e. 具有相同尺寸的纹理在内存中的大小相同，因此JPG的文件可能比PNG小，但它会在你的GPU上占用相同数量的内存。
抗锯齿：抗锯齿的最坏情况是几何体由许多相互平行排列的细直片组成。想想金属百叶窗或格子栅栏。如果可能的话，不要在场景中包含这样的几何体。如果别无选择，请考虑用纹理替换晶格，因为这可能会产生更好的结果。
后处理
a. 内置抗锯齿功能不适合用于后期处理（至少在WebGL 1中）。您需要手动使用FXAA或SMAA（可能更快，更好）。
b. 没有使用内置抗锯齿的时候，请禁用它。
c. three.js中有大量的后处理着色器。但请记住，每个通道都需要渲染整个场景。完成测试后，请考虑是否可以将你的通道合并为一个自定义通道。这样虽要多做一些工作，但可以显著提高性能。
物体的释放
a. 如果你稍后还需要添加回来。你可以暂时隐藏对象，设置object.visible = false(也适用于光照)或material.opacity = 0。你可以设置light.intensity = 0禁用光照而不会导致着色器重新编译。
b. 如果你确实需要从场景中永久的移除物品，请看：如何释放物体-How to dispose of objects
更新场景中的对象：如何更新 - How to update things
性能：
a. 为静态或很少移动的物体设置object.matrixAutoUpdate = fase,并手动调用object.updateMatrix()在（位置/旋转/四元数/缩放）更新时。
b. 透明物体很消耗性能，在场景中尽可能少使用透明物体。
c. 尽可能使用alphatest，而不是标准透明度，它会更快。
d. 在测试应用程序的性能时，你需要做的第一件事就是检查它是受CPU限制还是受GPU限制。使用基础材质替换所有材质scene.overrideMaterial。如果性能提高，那么你的应用程序受GPU限制。如果性能没有提高，则你的程序受CPU限制。
e. 在性能好的机器上进行性能测试时，你可能最多获得60FPS的帧率。运行chrome以open -a "Google Chrome" --args --disable-gpu-vsync获得无限制的帧率。
f. 现代移动设备的像素比高达5。考虑将这些设备上的最大像素比限制为2或3。以场景的一些非常轻微的模糊为代价，你将获得可观的性能提升。
g. 烘培光照和阴影贴图以减少场景中的光照数量。
h. 密切关注场景中的绘制方法的（drawcalls）调用次数。一个好的经验法则是更少的绘制调用 = 更好的性能。
i. 远处的物体不需要同靠近相机的物体具有相同的模型精度。有许多可以降低远处物体的精度的技巧来提高性能。考虑使用LOD（细节层次）物体。你也可以只为远处的物体每2或3帧更新位置/动画，或者用billboard替换它们-即物体的图片。
不要使用TriangleFanDrawMode，很耗性能。
当你有成百或上千个相似的几何图形时，请使用几何实例化。
在GPU而非CPU上进行动画处理，尤其是在为顶点或粒子设置动画时（参阅THREE.Bas）

推荐阅读：
Threejs 技巧和窍门大清单！

Three.js使用技巧相关推荐

【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
快过年了，分享 25 个 JS 实用技巧送给大家吧
本文主要介绍一些JS中用到的小技巧,可以在日常Coding中提升幸福度,将不定期更新~ 类型强制转换 1.1 string强制转换为数字可以用 *1来转化为数字(实际上是调用 .valueOf方法) ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...
你不知道的十个 JS 小技巧
总结了一些开发常用的 JS 小技巧,让你的代码更优雅! 1. 使用 const 定义在开发中不要过度声明变量,尽量使用表达式和链式调用形式.然后一般能用 const 就不要用 let .这种模式写多 ...
JS简写技巧（来自于微信公众号-前端之巅）
JS简写技巧来自于微信公众号-前端之巅 1 声明变量 //Longhand// let x ;// let y = 20;// shortandlet x, y = 20; 2 给多个变量赋值我们 ...
2022前端应该掌握的10个 JS 小技巧
你知道 0 ?? 1等于多少吗? 大家好,我是 LBJ,今天我们聊聊2022一些值得掌握的新特性! 现在前端发展很快,各种技术和框架层出不穷.百花齐放,很多人都喊学不动啦!事实上JavaScript ...
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
本文实例总结了JS数组排序技巧.分享给大家供大家参考,具体如下: 1.冒泡排序 var temp = 0; for (var i = 0; i < array.length; i++) { fo ...
一探前端开发中的JS调试技巧
转自:http://seejs.me/2016/03/27/%E3%80%90%E5%8E%9F%E5%88%9B%E3%80%91%E4%B8%80%E6%8E%A2%E5%89%8D%E7%AB% ...
vue双击事件_我总结了12个Vue.js开发技巧和窍门
我真的很喜欢使用Vue.js,每次使用框架时,我都会喜欢深入研究其功能和特性.通过这篇文章,我向你介绍了12个很酷的提示和技巧,你可能尚未意识到这些技巧和窍门,以帮助你成为更好的Vue开发人员. 更漂 ...
js多层对象数组合并_13个你必须知道的JS数组技巧
在Javascript中,数组是一个重要且常见的知识点,我们经常将数据存储在数组中.作为一名Javascript工程师,数组必须要运用自如.这篇文章,向大家展示了在日常开发中,数组有哪些奇淫技巧值得关 ...

Three.js使用技巧

Three.js使用技巧相关推荐

最新文章

热门文章