three.js
文章平均质量分 87
Felicia_方
这个作者很懒,什么都没留下…
展开
-
实例化网格模型InstancedMesh 点击相交部分实例闪烁
当我一个实例化网格模型里面的小实例们相交时,他们本身都是同一种材质,在都是同一种颜色时没有问题,而在我点击更改了其中一个的颜色后,就会出现闪烁问题,这种现象的本质还是Z-Fighting。在之前关于Z-Fighting的文章中(three.js 模型重合相交部分闪烁 Z-Fighting)我已经说了几种解决闪烁的方法,但是面对实例化网格模型用的是一个材质时,我们的多边形偏移就没法奏效了。于是我想到一个曲线救国的方式:1. 在点击之后,把这个小实例隐藏;那么怎么隐藏实例呢,我们可以使用setMatr原创 2021-01-21 09:35:47 · 1352 阅读 · 6 评论 -
three.js 性能优化 实例化网格模型InstancedMesh
使用场景当我们有大量的相同的几何体形状和相同的材质时,比如我有一千个立方几何体要渲染,他们的材质时相同的,但是坐标、大小矩阵变换这些不相同。如果按照常规的一个个Mesh的渲染,要生成一千个geometry,一千个material,一千个Mesh,占用太多内存和性能。我们可以使用合并几何体的方式,但这样合并后变为一个个体 ,失去了对单个小模型的控制。three.js还提供了InstanceMesh实例化模型可以实现。关于两种方法的对比:InstanceMesh合并几何体Mate原创 2021-01-20 16:04:18 · 4949 阅读 · 1 评论 -
three.js 点击交互事件 含解决点击的物体与看到的不一致问题(非全屏/多边形偏移)
首先关于Three.js鼠标点击交互事件的基础部分的推导及写法不再详细赘述,可参考:ThreeJS中的点击与交互——Raycaster的用法1. 先上基础的写法://点击物体触发clickGoujian(event) { var width = document.getElementById("canvas-frame").clientWidth; var height = document.getElementById("canvas-frame").clientHeight; var原创 2021-01-19 17:14:14 · 3241 阅读 · 4 评论 -
three.js 模型重合相交部分闪烁 Z-Fighting
Z-Fighting当场景中两个模型在同一个位置时,渲染器会根据它们的深度值来显示前面的模型,隐藏背后的部分。而当他们的位置及深度值相同时,渲染器则不确定哪个将被绘制到颜色缓冲区中,相机旋转时,情况会变得更糟,于是就出现了闪烁现象,这就是“Z-Fighting”...原创 2021-01-19 15:15:56 · 3832 阅读 · 2 评论