Three.js 通过加载模型上的材质名称为材质添加边框

2024-04-14

是否可以在材料周围添加边框,如图所示,

我可以通过以下代码设置材质颜色

object.traverse( function ( child )
    {
        if ( child instanceof THREE.Mesh )
            child.material.color.setRGB (1, 0, 0);
    });

where object is my loaded 3d model, so am assume there should be a way to draw the border, is there any option in three.js.enter image description here

根据@shiva的评论,我尝试使用以下代码来绘制发光效果

if(childObject.material.name=="material4046")
     {
      mesh  = new THREE.Mesh( globalGeomtry, material );
    // mesh.visible = false
    scene.add( mesh );

    console.log(mesh);

    // create a glowMesh
    var glowMesh    = new THREEx.GeometricGlowMesh(mesh);
    mesh.add(glowMesh.object3d);

            // example of customization of the default glowMesh
    var insideUniforms  = glowMesh.insideMesh.material.uniforms;
    insideUniforms.coeficient.value = 2;
    insideUniforms.power.value      = 1.4;
    insideUniforms.glowColor.value.set('red');

    var outsideUniforms = glowMesh.outsideMesh.material.uniforms;
    outsideUniforms.coeficient.value    = 2;
    outsideUniforms.power.value     = 1.4;

    outsideUniforms.glowColor.value.set('red');

     }

now the ouput is looking as like in the second imageenter image description here, i want this glow effect as the border around that material, is it is possible


我想这就是你所追求的。它是通过以下方式实现的:

new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.BackSide } );

您可以在这里查看演示:https://stemkoski.github.io/Three.js/Outline.html https://stemkoski.github.io/Three.js/Outline.html

演示源代码:https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Outline.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js 通过加载模型上的材质名称为材质添加边框 的相关文章

  • Three.js 中的文本几何

    我在 Three js r74 中的 TextGeometry 遇到一些问题 我该如何正确实施 这是我的代码笔 codepen io cheesyeyes pen eJqZxK 提前致谢 好吧 对于每个正在寻找简单答案而不是链接和其他超载示
  • 使用三个 JS 和 React JS 加载 GLTF 模型

    我使用 React JS 加载从 sketchfab 下载的 GLTF 文件时遇到问题 当我尝试在不使用React 使用常规index html和index js 的情况下执行此操作时 它可以工作 但是当我将代码带入React应用程序时 它
  • 在 React 中渲染 Three.js 元素?

    我正在尝试制作一个渲染 Three js 场景的 React 组件 但是 每当我尝试安装组件而不是看到正在渲染的任何类型的场景时 我只看到文本 object HTMLCanvasElement 正在显示 这是我的组件 import Reac
  • Three.js:基于图像的光照(IBL)

    I m searching to add an IBL to my scene and objects But I can t find anything on the web There are some examples with an
  • Three.js 光线投射器可以与组相交吗?

    我想知道我的光线投射器是否正在查看我已加载的 OBJ 由于从 Cinema4D 导出的方式 我相信 OBJ 是一个具有 3 个子级的 THREE Group 而不是 THREE Object 我可以更改我的 raycaster 代码行来查找
  • 三.JS Shadow 到对象

    我想添加castShadow and receiveShadow在一个物体上 但是下面的代码有什么问题吗 var mtlLoader new THREE MTLLoader mtlLoader setPath objects Tree mt
  • Three.js 设置并读取相机外观向量

    而不是使用camera rotation或lookAt 函数旋转相机 我想将外观矢量直接传递给相机 是否可以直接设置相机外观矢量以及是否可以从相机读取外观矢量 相机没有 外观矢量 因此无法设置它 但是 您可以构造一个point通过将您的外观
  • Three.js - 如何翻译几何图形

    我有一个脚本 可以定位各种宽度 高度和深度的立方体 并且正在努力根据 xAxis yAxis 和 zAxis 也有所不同 将它们准确地排列起来 var geometry new THREE BoxGeometry width height
  • 如何在 Three.js 场景中包含 OVRManager?

    我创建了几个 Three js Javascript 演示应用程序 正在我的新 Oculus Go 中进行试验 我正在尝试让 Go 控制器在我的应用程序中执行某些操作 根据 Oculus 开发人员中心的说法 最好的办法是将 OVRManag
  • Three.js canvas.toDataURL 有时为空

    我正在尝试使用 html2canvas js 渲染 THREE js 场景 一些覆盖的 HTML 元素 有用大多数时候 但并非一直如此 在失败的情况下 将渲染 HTML 元素 背景 覆盖层等 但不会渲染其他元素 THREE js 场景表现得
  • (A 框架)本地 gltf 不会加载;无法读取未定义的属性“切片”

    我从A型框架学校 https aframe io aframe school 11其中加载了 gltf 模型 然后我从 Khronos 加载了示例模型 this box https github com KhronosGroup glTF
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 如何优化 Three.js 中多个 sphereGeometry 的渲染?

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher
  • 如何使用三个JS导出然后导入场景?

    我有一个用三个 JS 和大量 Javascript 代码构建的复杂 3D 场景 我需要将此场景导出为一个文件 然后通过简单的 ThreeJS 场景播放器在我的网站上使用它 我尝试过 ObjectExporter 和 SceneExporte
  • 计算顶点法线

    我正在使用 3d 修改器https github com foo123 MOD3 https github com foo123 MOD3弯曲一个立方体 几何体更新 顶点位置更改 后 灯光不会更新 立方体仍然着色 就好像没有任何变化一样 所
  • Three.js、自定义着色器和具有透明度的 png 纹理

    我有一个非常简单的 PNG 纹理 一个带有透明背景的灰色圆圈 我用它作为制服map for a THREE ShaderMaterial var uniforms THREE UniformsUtils merge basicShader
  • 如何检查 webgl(two.js) 的客户端性能

    我有一个使用 Three JS 的图形项目 现在我想自动检查客户端 GPU 性能并计算可以在应用程序中加载多少元素 我想到了诸如 GPU 基准测试之类的东西 看一眼stats js https github com mrdoob stats
  • Morph 目标为 Three.js

    我正在尝试开始使用变形目标和 Three js 然而 关于这个主题的文档似乎并不多 当我查看源代码时 morphTargetInfluences 似乎是有魔力 这是如何运作的 我该如何使用这个 值为1就是全力吗 如何区分同一模型上的不同变形
  • 三种js更新纹理生成Canvas的最佳性能方式

    I have THREE Points with THREE PointsMaterial As a map我使用生成的动态cavas image 我需要重新渲染canvas在每一帧上 我的部分代码 function makeEnemyBa
  • Three.js WebGL 从着色器绘制圆形自定义填充和边框颜色

    我将 Three js 与 WebGLRenderer 一起使用 我试图找出或查看如何使用 CircleGeometry 绘制圆圈的示例 并能够从顶点或片段着色器控制其填充和边框颜色 如果不使用图像作为纹理 这是否可能 抱歉 如果这真的很简

随机推荐

  • 什么是 PHP 匿名函数?

    PHP 中的匿名函数是什么 请给我一个简单的例子好吗 PHP net 有一个关于匿名函数 http php net manual en functions anonymous php在维基百科上你可以读到匿名函数 http en wikip
  • 使图表 js 中的标签响应式

    我很难使 y 轴上的标签响应 我希望标签移动到多行 并在空间不足时具有响应式字体大小 我正在使用 Chart js 数据标签库进行标签在水平条形图的顶部 由于外部图表容器 标签也被隐藏 var chart new Chart ctx typ
  • Redis 块推送直到列表有空位

    我正在寻找类似的东西BLPUSH该命令将阻塞 直到列表的长度低于指定值max size 目的是防止生产者运行速度快于消费者时列表无限增长 功能与 python 非常相似Queue put https docs python org 3 li
  • 如何使用 Memchached 后端和 Zend Framework 有选择地清除缓存(使用标签或其他选项)

    我们在 Web 项目中使用 Memcached 和 Zend Framework 现在 我们需要使用指定的标签有选择地清理缓存Zend Cache API http framework zend com manual 1 10 en zen
  • 带有工作单元/存储库模式的微风

    我只是想知道我应该如何实施微风EFContextProvider在一个单独的数据层项目中 另外 由于该项目是一个类库而不是 MVC 4 应用程序 我应该如何将其包含到我的项目中 我真的不需要 Breeze NuGet 包中的全部技巧 只需E
  • SymPy 的多彩图

    我试图在 SymPy 中绘制函数 x 2 的图 并希望用线 x 3 y 9 覆盖它 然后在某些点周围画一个圆 我已经用代码完成了上述所有操作 import sympy as sp x sp Symbol x first plot the f
  • 如何配置 Android sdkmanager 命令行工具以使用自定义存储库?

    是否可以配置 Google 的 Android sdkmanager 通过自定义存储库而不是下载依赖项dl google com android repository 背景 我正在公司防火墙后面设置 Android 构建代理 无法直接访问
  • Python:导入模块

    假设我有一个 python 模型fibo py定义如下 Fibonacci numbers module print This is a statement def fib n a b 0 1 while b lt n print b a
  • Wix 安装程序 - 根据属性创建文件夹层次结构

    我在用Wix 3 6 http wixtoolset org 创建一个设置 我仍在不断学习 那里的信息仍然分散 我正在等待我的 Wix 开发人员指南书到达 我目前有一个自定义 UI 对话框 用户可以在其中输入一些应用程序配置 该配置的一部分
  • 创建 IIS 网站的代码

    我需要以编程方式创建一个 IIS 网站 有人可以告诉我执行此操作的代码吗 请不要使用 WMI DirectoryEntry 如果可能的话 当目标是 IIS 7 或更高版本时 有一个API叫做ServerManager http msdn m
  • 为什么创建文件夹后不存在?

    这似乎没有意义 所以我显然做错了什么 DirectoryInfo folder new DirectoryInfo Environment CurrentDirectory Test if folder Exists false folde
  • 当用户向下滚动时显示内容

    您好 请检查此网站 您会看到向下滚动时会自动加载下一个内容 http wallbase net search http wallbase net search 我用谷歌搜索过但找不到它的名字 有例子 教程吗 您可以使用无限滚动 jQuery
  • 添加 NOT LIKE 条件后查询返回的结果太少

    我的 Access 2010 数据库在我稍微更改用户请求的查询时表现得很奇怪 我有一个非常大的表 不要问 查询在其上运 行 然后提供给用户输入表单 不管怎样 今天 一种特殊的形式开始返回的结果比我们预期的要少得多 它通常会返回大约 1200
  • NSURLSession:后台上传然后调用服务api

    我试图使用新的 ios7 后台传输 api 将一些照片上传到服务器 现在发生的是 1 我们将字节上传到s3 2 调用服务api来 完成 上传 我查看了这个文档 似乎背景 NSURLSession 不支持 数据 任务 这是否意味着实际上传完成
  • WCF:在 IErrorHandler 中提供通用的FaultException

    一些上下文 我们有一个自定义 XSD 并使用 WSCF blue 生成 WSDL 和 C 代码 客户端使用ChannelFactory
  • Redux Connect w/ HOC - TypeError:无法设置未定义的属性“props”

    我正在 Next js 中构建快速身份验证高阶组件 但在使用以下代码时遇到了一些问题 import SignIn from components sign in import connect from react redux import
  • iOS - 架构 i386 的 3 个重复符号

    我在理解链接器命令错误时遇到问题 我收到以下信息 duplicate symbol OBJC IVAR XYZAddToDoItemViewController toDoItem in Users Library Developer Xco
  • WindowFromPhysicalPoint 和 WindowFromPoint 之间有什么区别?

    WindowFromPhysicalPoint http msdn microsoft com en us library aa969270 aspx是 Vista 中的新功能 它的文档几乎与WindowFromPoint http msd
  • 如何获取请求Referer路径?

    我需要引用者的路径 我不想要域名 例如 如果引用者是http www google com adsense I want adsense request referer返回一个字符串 但您可以使用Ruby 的 URI 模块 http www
  • Three.js 通过加载模型上的材质名称为材质添加边框

    是否可以在材料周围添加边框 如图所示 我可以通过以下代码设置材质颜色 object traverse function child if child instanceof THREE Mesh child material color se