我跟随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 );
}
});
答案 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 ));
}
});