A-Frame 中的虚线着色器答案

【问题标题】：Dashed line shader in A-FrameA-Frame 中的虚线着色器
【发布时间】：2020-06-30 20:45:08
【问题描述】：

所以，我在 A-Frame 中添加了一条基本线，我希望它是虚线/虚线。我知道有一种名为 LineDashedMaterial 的 ThreeJS 材料，它与 this 完全一样，但是我如何在 A-Frame 中使用它？

知道我必须在这段代码中添加什么来做到这一点吗？我知道我必须创建一个使用 ThreeJS 材质的自定义着色器，但是如何？

链接：https://codepen.io/marcel_pi/pen/wvMrPXj

谢谢。

<html lang="en">
<head>
    <script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>
    <script src="https://unpkg.com/aframe-orbit-controls@1.0.0/dist/aframe-orbit-controls.min.js"></script>
</head>

<body>
    <a-scene id="scene" vr-mode-ui="enabled: false" cursor="rayOrigin: mouse">
      
        <a-camera id="camera" name="mainCamera" camera="fov: 45;" position="0 0 0" look-controls orbit-controls="target: 0 0 0; minDistance: 0.5; maxDistance: 1500; initialPosition: 20 20 20;" camera-distance position-listener>
        </a-camera>

        <a-entity line="start: 0 -10 -10; end: 0 10 10; color: #000;"></a-entity>
    </a-scene>
</body>
</html>

【问题讨论】：

标签： shader line aframe

【解决方案1】：

A-Frame 基于three.js。关键是要找出如何将 three.js 对象添加到 A-Frame 场景中。

两步：

使用三个.js 函数创建虚线
将线条添加到 A-Frame 场景中

var material = new THREE.LineDashedMaterial({
  color: "white",
  dashSize: 0.5,
  gapSize: 0.5
});

var geometry= new THREE.Geometry();
geometry.vertices.push(
  new THREE.Vector3(0, -10, -10),
  new THREE.Vector3(0, 10, 10)
);

var line = new THREE.Line(geometry, material);
line.computeLineDistances();
document.querySelector("a-scene").object3D.add(line);

<script src="https://rawgit.com/aframevr/aframe/master/dist/aframe-master.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.0.0/dist/aframe-orbit-controls.min.js"></script>

<a-scene id="scene" vr-mode-ui="enabled: false" cursor="rayOrigin: mouse" background="color:black">
  <a-camera id="camera" name="mainCamera" camera="fov: 45;" position="0 0 0" look-controls orbit-controls="target: 0 0 0; minDistance: 0.5; maxDistance: 1500; initialPosition: 20 20 20;" camera-distance position-listener>
  </a-camera>
</a-scene>

有关在 A-Frame 中使用 three.js 的更多信息：https://aframe.io/docs/1.0.0/introduction/developing-with-threejs.html

【讨论】：

感谢您的回答。这是threejs的画线方式。我的问题更像是：有没有一种方法可以通过将 LineDashedMaterial 注册为 A-Frame 中的着色器然后将其应用到来使用 LineDashedMaterial 而不是以threejs方式手动执行所有操作在javascript中？如果有人分享您如何声明该着色器，或者是否有可能，我将不胜感激。然后 a-frame 文档没有提供很多信息。
您可以做的是基于“line”组件创建一个自定义组件，如“dashed-line”（参见github上的源代码），并结合提供的代码ffmaer以您想要的方式构建它.然后您可以在任何实体中使用它，例如常规行，它将使用您的自定义代码:)
我确实基于 a-frame 'line' 组件创建了一个组件，并将其添加到一个线实体中，然后.. 没有任何反应。你能告诉我我做错了什么或者我需要补充吗？ codepen.io/marcel_pi/pen/wvMrPXj