如何在框架中创建线框 3D 立方体？
Posted
技术标签:
【中文标题】如何在框架中创建线框 3D 立方体？【英文标题】：How to create a wire-frame 3D cube in a-frame? 【发布时间】：2016-08-09 12:13:32 【问题描述】：我正在努力为盒子图元创建线框。尝试了颜色、不透明度和透明属性，但似乎都不起作用。这是代码 -
<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1" position="0 1 0" material="color: #0000FF; opacity: 0.5;" rotation="0 0 120"></a-entity>
需要渲染这样的东西 -
【问题讨论】：
【参考方案1】：您需要稍微检查一下THREE.Material docs，因为 A-Frame 无法公开所有选项。这是一个示例组件，使用 wireframe 选项：
AFRAME.registerComponent('wireframe',
dependencies: ['material'],
init: function ()
this.el.components.material.material.wireframe = true;
);
<a-entity geometry="primitive: box" material="color: blue" wireframe></a-entity>
【讨论】：
只需注意可以放置 JS 的位置，您可以将 JS sn-p 放在场景之前或将其包含在<head>....<body><script>AFRAME.registerComponent...</script><a-scene>...</a-scene></body>
@ngokevin 如果您愿意，也可以随时编辑我的答案。【参考方案2】：
在 A-Frame 0.9.0 中，您可以将 wireframe: true 定义为 standard material 的属性，例如：
<a-entity geometry="primitive: box; width: 1; height: 1; depth: 1"
position="0 1 0"
material="color: #0000FF; opacity: 0.5; wireframe: true"
rotation="0 0 120">
</a-entity>
也许你会得到比你需要的更多的电线（至少在我得到的渲染中，有一些对角线的电线，不仅仅是边缘），但也许足够好而且非常简单。
【讨论】：
以上是关于如何在框架中创建线框 3D 立方体？的主要内容，如果未能解决你的问题，请参考以下文章
100个 Unity踩坑小知识点| 在编辑器中绘制正方体虚线球体虚线(Gizmos 辅助线框)
ShaderJoy —— 纯 shader 实现立方体的渲染（含线框效果，虚线线框效果），带你了解渲染管线内部细节和原理GLSL