Registring线作为A-Frame中的自定义几何体

时间:2017-04-29 04:48:50

标签: aframe

我跟随Register a Custom Geometry示例注册了一行。它在THREE.js中生成错误。以下是错误的痕迹:

Uncaught (in promise) TypeError: Cannot read property '0' of undefined
    at Mt.fromGeometry (three.js:12300)
    at St.fromGeometry (three.js:14186)
    at toBufferGeometry (geometry.js:134)
    at createGeometry (geometry.js:106)
    at r.getOrCreateGeometry (geometry.js:48)
    at i.update (geometry.js:41)
    at i.updateProperties (component.js:212)
    at i.module.exports.Component (component.js:37)
    at new i (component.js:330)
    at HTMLElement.value (a-entity.js:366)

这是应该重新创建错误的HTML:

<head>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
  <script src="./a-line.js"></script> 
</head>

<body>
    <a-scene>
        <a-entity geometry="primitive:line"></a-entity>
    </a-scene>
</body>

这是a-line.js:

AFRAME.registerGeometry('line', {
    schema: {
       start: {default: '0 0 -5'},
       end: { default: '0 10 -5'}
    },
    init: function (data) {

    var material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
    var geometry = new THREE.Geometry();
    var inputPts = [data.start, data.end];
    geometry.vertices.push.call(
      geometry.vertices,
      inputPts.map(function (vertex) {
          var points = vertex.split(' ').map(parseFloat);
          return new THREE.Vector3(points[0], points[1], points[2]);
      })
    );

   this.geometry = new THREE.Line( geometry, material );
   }
});

1 个答案:

答案 0 :(得分:1)

由于线是网格,而不是由几何和材质组成的几何体,因此正确的方法是创建line组件,而不是line几何体。

AFRAME.registerGeometry('line', {
schema: {
   start: {default: '0 0 -5'},
   end: { default: '0 10 -5'}
},
init: function () {
var data = this.data

var material = new THREE.LineBasicMaterial({ color: 0x0077ff }); 
var geometry = new THREE.Geometry();
var inputPts = [data.start, data.end];
geometry.vertices.push.call(
  geometry.vertices,
  inputPts.map(function (vertex) {
      var points = vertex.split(' ').map(parseFloat);
      return new THREE.Vector3(points[0], points[1], points[2]);
  })
);

this.el.setObject3D('mesh', new THREE.Line( geometry, material ));
}
});