three.js的outlinePass与marchingcubes冲突

最新推荐文章于 2024-11-18 09:33:15 发布
原创 最新推荐文章于 2024-11-18 09:33:15 发布 · 425 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css #html

本文探讨了outlinePass与marchingcubes组件在使用过程中出现的冲突问题，特别是由于marchingcubes.js中的hasNormals属性动态变化导致的渲染错误，并提供了详细的背景和技术细节。

outlinePass与marchingcubes都是很有意思的组件，但是这2个放在一起会有冲突，原因是在marchingcubes.js中有个hasNormals属性，这个属性是动态的，在.begin中为false,在.end后为true, 这就造成在渲染的时候会报错：无法访问normal.local属性。

7、智慧变电站 - OutlinePass着色器实现设备告警辉光及展示告警设备详细信息
github_39988036的博客
05-02 829
创建OutlinePass通道 先在vue外层声明几个变量 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; import { OutlinePass } from 'three/examples/jsm/postprocessing/Ou.
Three.js中OutlinePass与后处理冲突问题
eevee_1的博客
06-29 2003
需求是鼠标滑过物体的时候物体显示为描边选中状态 方案一：OutlinePass 首先尝试了官方的OutlinePass来添加外边框选中功能 这是没加OutlinePass的效果： 这是使用OutlinePass后的，描边是可以了，但是锯齿严重，且模型发黑： 深入调研了一下发现是OutlinePass与renderer.outputEncoding = THREE.sRGBEnco...
threejsMarchingCubesMetaball:WebGL Marching Cubes Metaball由Three.js提供支持
05-07
three.js游行多维数据集Metaball 演示 安装 mkdir yourProject cd yourProject git clone git@github.com:takumi0125/threejsMarchingCubesMetaball . npm i npm start 如何使用开发环境参见gulp-static-website-v7。
MarchineCubes实现思路总结
信箱神、得引擎
12-07 1057
是一种基于体素构建三维模型的方式，有些类似《我的世界》中的堆方块，但实际上，建模是以方块之间的交点为中心点，每个cube表示八个象限的相交模型在三维空间中划分网格，每个网格是一个cube，其8个顶点各有两个状态{in、out}，分别表示该顶点是否位于三维模型的内部 根据这8个顶点的状态，可确定当前cube自身的模型，这个排列组合正好是一个8位二进制 这里需要对这8个顶点进行约定，为后续代码提供方便 这样约定的好处是，某些临边、对角位置可用二进制位运算方便获取，临边是相应位异或、对角是按位取反总共有255种组
OutlinePass.js
07-24
outlinepass中如果使用轮廓渲染线条，渲染一根线条所有线条类均被渲染；
新手刚接触three.js的一些报错问题及解决方法（二）
QWY1285236058的博客
10-28 791
导入图片404
MC_JAVA_Version.zip_marching_marching cubes
09-19
《Java实现Marching Cubes算法详解》 在计算机图形学领域，Marching Cubes（行进立方体）是一种常用于三维体数据表面重建的技术。它主要用于将三维的体素数据转化为连续光滑的表面模型，这对于可视化医学扫描图像、...
MITK.rar_marching_marching cubes_mitk_mitk表面重建_三维重建分割
09-14
《MITK与Marching Cubes：三维图像表面重建与分割技术详解》 MITK（Medical Imaging Interaction Toolkit）是一个开源的医学图像处理平台，专为医学影像的交互、可视化和分析提供强大支持。在这个主题中，我们将...
marchingCubes.zip_CUDA MATLAB_DEMO_MarchingCubes_cubes_marching
07-14
《MATLAB中的Marching Cubes算法与CUDA GPU优化实践》 Marching Cubes算法是一种用于三维数据体渲染的常用方法，特别是在医学成像、地质建模等领域广泛应用。它通过将三维网格划分为小的立方体（cubes）并判断每个...
raymarching-for-THREE:THREE.js中使用raymarching的助手
05-12
THREE.js中的“辅助”与raymarching一起工作。 （鼠标控件） 它很大程度上基于核心模块和脚本是一个流行的WebGL库，Raymarching Distance Fields现在很流行，这是将它们组合在一起的一种方式。 大多数（全部！）...
解决threejs后处理轮廓线outlinePass选中 transformControls的辅助线
m0_56102498的博客
03-24 860
解决threejs后处理轮廓线outlinePass选中 transformControls
MATLAB绘制3D隐函数曲面的方法总结-MarchingCubes.zip
08-13
MATLAB绘制3D隐函数曲面的方法总结-MarchingCubes.zip 本帖最后由 winner245 于 2013-10-28 00:45 编辑 背景介绍 Matlab提供了一系列绘图函数，常见的包括绘制2D曲线的plot函数、绘制2D隐函数曲线的ezplot函数、绘制3D曲面的mesh和surf函数、绘制3D显函数曲面的ezmesh和ezsurf函数。值得注意的是，ez系列的绘图函数里只有ezplot是绘制隐函数曲线的，ezmesh和ezsurf都是画显函数曲面的（不要被ez的名字误解了）。遗憾的是，matlab里并没有提供直接绘制3D隐函数曲面的函数。本帖的目的就是归纳总结几种方便易用的绘制隐函数曲面的办法。 问题描述 如何绘制3元方程f = 0确立的隐函数曲面z = g？其中，方程f = 0无法求解z关于x、y的表达式，即g的显式表达式无法获取。 准备工作——基础函数介绍 为了解决上述问题，我们需要先对几个重要的图形函数isosurface、patch、isonormals取得初步的了解，如果您已经对这三个函数很熟悉，可以直接跳过这一步。 l.  isosurface 等值面函数 调用格式：fv = isosurface作用：返回某个等值面（由isovalue指定）的表面（faces）和顶点（vertices）数据，存放在结构体fv中（fv由vertices、faces两个域构成）。如果是画隐函数 v = f = 0 的三维图形，那么等值面的数值为isovalue = 0。 2.  patch函数 调用格式：patch 以平面坐标为顶点，构造平面多边形，C是RGB颜色向量                    patch以空间3-D坐标为顶点，构造空间3D曲面，C是RGB颜色向量                    patch 通过包含vertices、faces两个域的结构体fv来构造3D曲面，fv可以直接由等值面函数isosurface得到 例如：patch) 3.  isonormals等值面法线函数 调用格式：isonormals实现功能：计算等值面V的顶点法线，将patch曲面p的法线设置为计算得到的法线（p是patch返回得到的句柄）。如果不设置法线的话，得到曲面在过渡地带看起来可能不是很光滑 有了上述三个函数后，我们已经具备间接绘制3D隐函数曲面的能力了。下面以方程 f = x.*y.*z.*log-10 = 0为例，讲解如何画3D隐函数曲面。 解决办法一：isosurface patch isonormals实现原理：先定义3元显函数v =f, 则 v = 0 定义的等值面就是z = g的3D曲面。利用isosurface函数获取v= 0 的等值面，将得到的等值面直接输入给patch函数，得出patch句柄p，并画出patch曲面的平面视角图形。对p用isonormals函数设置曲面顶点数据的法线，最后设置颜色、亮度、3D视角，得到3D曲面。 代码如下： f = @ x.*y.*z.*log-10;      % 函数表达式 [x,y,z] = meshgrid;       % 画图范围 v = f; h = patch); isonormals               set; xlabel;ylabel;zlabel; alpha    grid on; view; axis equal; camlight; lighting gouraud 复制代码 代码说明： alpha函数用于设置patch曲面的透明度（可以是0~1任意数值），1 表示不透明，0 表示最大透明度。如果想设置透明度为0.7，可以修改alpha为alpha。 使用此代码解决特定问题时，只需将第1行的函数表达式替换为特定问题的函数表达式，将第2行数据（x、y、z）范围换成合适的范围，后续代码无需任何变动。 得到图形： 1.png 解决办法二：Mupad Mupad符号引擎里提供了现成的三维隐函数画图函数：Implicit3d 在matlab里开启Mupad的方法是：在commandwindow 里输入mupad 来启动一个notebook。在启动的notebook里再输入如下代码： plot-10, x = -10..10, y = -10..10, z = -10..10), Scaling = Constrained)复制代码 回车后得到如下图形： 1.png 解决办法三：第三方工具包ezimplot3 在matlab central 的 file exchange 上有一个非常优秀的绘制3维隐函数的绘图函数，叫ezimplot3。感兴趣的可以在如下链接下载：http://www.mathworks.com/matlabcentral/fileexchange/23623-ezimplot3-implicit-3d-functions-plotter也可以直接从本帖下载： ezimplot3.zip ezimplot3一共有三种参数调用方式： ezimplot3 画函数f= 0 在-2*pi< X < 2* pi, -2* pi < Y < 2* pi, -2* pi < Z < 2* pi上的图形ezimplot3画函数f= 0 在A< X < B, A < Y < B, A < Z < B上的图形ezimplot3画函数f= 0 在XMIN< X < XMAX, YMIN < Y < YMAX, ZMIN < Z < ZMAX上的图形 ezimplot3使用方法：解压ezimplot3.zip，将解压得到的ezimplot3.m 添加到matlab当前搜索路径后就可以使用了。然后，可以直接在command window 输入代码：f = @ x*y*z*log-10; ezimplot3;  % [-10, 10] 表示图形范围x、y、z都在区间[-10, 10] 复制代码 即得到如下图形： 1.png 若干说明： ezimplot3和方法一本质上完全相同。即ezimplot3实际上也是基于isosurface patch isonormals的实现ezimplot3与方法一的图形视觉效果相同，唯一的区别是，ezimplot3的使用了0.7的透明度：alphaezimplot3在方法一基础上增加了一些外包功能，如：允许函数句柄f是非向量化的函数（即函数定义无需.*  ./  .^），这在ezimplot3内部会自动调用vectorize实现函数向量化。另外，ezimplot3可以在调用的时候方便的设定坐标范围。 常见问题和解决办法： 常见问题：很多人在使用以上方法后，经常出现的问题是代码没有任何错误，程序可以运行，就是出来的图形只有一个空坐标轴，看不到图形。 问题分析：出现这种问题的原因是图形的显示区域没设对。比如，我们上述三种方法都是在x为-10到10的范围内，如果你设的范围内本身就没有图形，那当然就看不到图形了。解决办法：把图形显示范围重新设置对即可，如果不知道图形的大致范围，就手工多改几次，直到看到图形为止 方法一，图形范围是在第2句的meshgrid函数决定的，meshgrid里给出的x、y、z范围就是最终画图范围，修改meshgrid语句即可。方法二（Mupad），x =-10..10, y = -10..10, z = -10..10是表示显示范围，修改这里即可。方法三，用ezimplot3 ezimplot3两种方式控制图形显示范围。 后记：slice切片函数 matlab还提供一种画切片图形的函数slice，slice做出的图是在切片上用颜色表示v的值。有时，我们画切片图形也有助于我们理解一个4维图形。以  v= f = x*y*z*exp)  为例，假设我们希望看 v =f 在 x =0, y = 1, z = 1 这些平面切片的图形，我们可以用以下代码： [x,y,z] = meshgrid); v = x.*y.*z.*exp); xslice = 0; yslice = 1; zslice = 1; slice xlabel; ylabel; zlabel; colormap hsv 复制代码 得到图形为： 1.png 经常听有人说想画 “4D图形”，前3维数据[x,y,z]表示空间位置，第4维数据v表示颜色（温度等），这类图形可以方便地通过slice切片实现： slice，这里就是在指定的切片上在空间坐标[x,y,z]处，用v值指定颜色画图。关于这类 “4D图形”的画法的一个典型例子：https://www.ilovematlab.cn/thread-265517-1-1.html 另外，我在 23 楼提供了一个slice 函数应用的生动例子：slice 3D 动画图形。感兴趣的朋友可以看看 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 欢迎大家踊跃讨论，给出更多更好的办法
webgl-marchingcubes:用于可变形地形的行进立方体算法的 WebGL 实现
06-23
webgl-marchingcubes 用于可变形地形的行进立方体算法的 WebGL 实现 ##立即运行应用程序 如果你只是想看看，你可以在这里做： : ##在本地运行应用程序 ###先决条件 如果您还没有静态文件服务解决方案，您将需要 不过，您不需要安装任何其他软件包。 首先，托管文件。 您可以使用位于根目录中的 Node.js 和fileserver.js来执行此操作。 > node fileserver.js 这将在http://localhost:8888/index.html上托管目录。 导航到那里查看场景。 ##控件 使用 WASD 移动相机。 使用鼠标左键和鼠标平移来更改摄像机角度。 使用 Q 建造一个方块，使用 E 摧毁一个方块。 ##备用地形 要生成具有平坦地形而不是 Perlin 噪声的场景，请将哈希添加到 URL： http://localhost:
MarchingCubes源码
06-09
是面绘制中移动立方体的源码，代码齐全。在用c++源码实现的，容易理解和编译。
可视化学习：作业3(1)（marchingcubes算法）
大羚羊的学习博客
09-20 5382
本文为我在KTH学习Visualization这门课的作业，涉及到的知识点我在这篇note3,note4有记录。课程简介链接在这儿。 由于本文是在国外发布的，在国内阅读文章时可能会出现没有图片的现象，目前我还没有找到好的解决办法，好像优快云就是这样。所以解决办法就是翻墙~ 第一题 这个题目主要是对下面这几个cubes应用marching cubes的算法，划分isosurface（...
Three.js 后期处理-物体边界线条高亮处理-OutlinePass
qq_39503511的博客
12-11 9950
Three.js 后期处理-物体边界线条高亮处理-OutlinePass概述步骤 概述 本文介绍如何使用three.js的后期处理来制作物体边界线条高亮处理，先来看效果图 步骤 添加相应的后期处理js，对应的js在three的github中全部可以获取到 <!-- 后期处理js --> <!-- EffectComposer（效果组合器）对象 --> <script src="js/postprocessing/EffectComposer.js"></scr
Three.js 射线拾取（Raycaster）与轮廓高亮（OutlinePass）
最新发布
mad970906的博客
11-18 1419
射线拾取和轮廓高亮是Three.js中两项非常有用的技术，分别用于检测用户与3D对象的交互以及对选中的物体进行高亮显示。通过本文的介绍，你可以在自己的Three.js项目中实现这些功能，增强用户体验和交互效果。
分析three.js OutlinePass 实现模式
宏斌的博客
10-18 1611
浅析 OutlinePass的工作原理
Three.js后处理(发光描边OutlinePass)
u014291990的博客
12-12 3412
查看threejs文件包目录，你可以看到Three.js提供了一个扩展库,通过EffectComposer可以实现一些后期处理效果。所谓threejs后期处理，就像ps一样，对threejs的渲染结果进行后期处理，比如添加发光效果。
Three.js实现WebGL流体模拟：Marching Cubes Metaball
- Three.js与Marching Cubes算法结合：在Three.js中，要实现Marching Cubes算法，开发者需要首先定义Metaball模型的体数据，然后实现Marching Cubes算法来根据这些数据生成网格，最后使用Three.js的渲染器将这些网格...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值