AFrame：如何将 THREE.LineBasicMaterial 放入 Aframe

Question

我正在努力将 LineBasicMaterial 放入 AFrame，但遇到了一些问题：

1。变量以某种方式注入到架构中，并且无法在没有错误的情况下取出

我有一个盒子：

<a-box material="shader: linebasic;"></a-box>

并且已经注册了一个自定义着色器：

AFRAME.registerShader('linebasic', {
    schema: {
        blending:       {default: THREE.NormalBlending},
        color:          {type: 'color', default: 0xffffff, is: 'uniform'},
        depthTest:      {default: true},
        depthFunc:      {default: THREE.LessEqualDepth},
        depthWrite:     {default: true},
        fog:            {default: false},
        linewidth:      {default: 10},
        linecap:        {default: 'round'},
        linejoin:       {default: 'round'},
        needsUpdate:    {default: true},
        opacity:        {default: 1},
        side:           {default: THREE.FrontSide},
        transparent:    {default: true},
        vertexColors:   {default: THREE.NoColors},
        visible:        {default: true}
    },
    init: function (data) {
        console.log(data);
        delete data.flatShading;
        this.material = new THREE.LineBasicMaterial(data);
        this.update(data);
    },
    update: function (data) {
        this.material.clone(data);
    }
});

尽管对象和着色器上没有设置 data.flatShading ，但不知何故。这就是我delete data.flatShading的原因。

数据中的另一个属性是shader。如果我删除它，控制台会给我这个错误信息：

components:material:error Unknown shader schema undefined +0ms

如果我把它留在里面，我会收到一条通知消息：

THREE.LineBasicMaterial：“着色器”不是此材质的属性。

所以无论哪种方式显然都有问题。

#1 的更新：

@ngokevin 发布的以下修复 #1：

AFRAME.registerShader('linebasic', {
    schema: {
        blending:       {default: THREE.NormalBlending},
        color:          {type: 'color', default: 0xffffff, is: 'uniform'},
        depthTest:      {default: true},
        depthFunc:      {default: THREE.LessEqualDepth},
        depthWrite:     {default: true},
        fog:            {default: false},
        linewidth:      {default: 10},
        linecap:        {default: 'round'},
        linejoin:       {default: 'round'},
        needsUpdate:    {default: true},
        opacity:        {default: 1},
        side:           {default: THREE.FrontSide},
        transparent:    {default: true},
        vertexColors:   {default: THREE.NoColors},
        visible:        {default: true}
    },
    init: function (data) {
        data = AFRAME.utils.extend({}, data);
        delete data.flatShading;
        delete data.shader;
        this.material = new THREE.LineBasicMaterial(data);
        this.update(data);
    },
    update: function (data) {
        this.material.clone(data);
    }
});

2。 LineBasicMaterial 显示为纯白色块

即使我使用 THREE.LineBasicMaterial 及其 所有 属性以及 THREE.Material 的许多属性，该材质也不会显示为线条，而是显示为实心块。

Material 和 LineBasicMaterial 没有“线框”，所以我不知道如何在不添加线框和“破解”LineBasicMaterial 的情况下完成这项工作。

数字 2 对我来说是最重要的，但我也想修复 1。我认为它们是相关的，因此我将它们放在一个问题中

Answer 1

对于#1，由于当前传递的是对data 对象的直接访问，因此您不应该删除它，而是克隆它然后删除。文件中存在一个问题，只需执行 this.data 而不是将其作为函数接收。

data = AFRAME.utils.extend({}, data);