时间戳

首页 > 解决方案 > A-Frame 中的虚线着色器

shader - A-Frame 中的虚线着色器

问题描述

所以，我在 A-Frame 中添加了一条基本线，我希望它是虚线/虚线。我知道有一种名为LineDashedMaterial的 ThreeJS 材料正是这样做的，但我如何在 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>

标签： shaderlineaframe

解决方案

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

两步：

  1. 使用 three.js 函数创建虚线
  2. 将线条添加到您的 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

推荐阅读