使用A-Frame用户编写的组件中的实体材质定义。

huangapple
go评论56阅读模式
英文:

Use an entity's material definition within a user written A-Frame component

问题

I have written an A-Frame component (simplified for the purpose of this question).

I would like my component to be able to receive the material information from the owning entity.

<!DOCTYPE html>
<html>
<head>
    <title>Component Test</title>
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
    <script>
        AFRAME.registerComponent('square', {
            schema: {
                size: { type: 'number' }
            },
            init: function () {

                const sizeOffset = this.data.size / 2;
                const points = [];
                points.push(new THREE.Vector2(-sizeOffset, -sizeOffset));
                points.push(new THREE.Vector2(sizeOffset, -sizeOffset));
                points.push(new THREE.Vector2(sizeOffset, sizeOffset));
                points.push(new THREE.Vector2(-sizeOffset, sizeOffset));
                var shape = new THREE.Shape(points);
                var geometry = new THREE.ShapeGeometry(shape);

                //var material = *** How do I get/inherit the component's material (to pass in to the Mesh method below)

                var mesh = new THREE.Mesh(geometry);
                this.el.object3D.add(mesh);
            },
        });

    </script>
</head>

<body>
    <a-scene>
        <a-sky color="#606060"></a-sky>
        <a-entity material="color: purple;" position="-0.5 1.6 -2" geometry="primitive: box; width: 0.2; height: 0.2;"></a-entity>
        <a-entity material="color: green;" position="0.5 1.6 -2" square="size: 0.3;"></a-entity>
    </a-scene>
</body>
</html>

But when I run this code, it displays the square in white, not green, as specified in the material definition. However, the geometry box does respect the material definition (on the left in purple).

使用A-Frame用户编写的组件中的实体材质定义。

I know that I could create a parameter for my component receiving the color, but I'd like to keep the component generic and also be able to change other properties of the material without having to add each one to my component.

英文:

I have written an A-Frame component (simplified for the purpose of this question).

I would like my component to be able to receive the material information from the owning entity.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Component Test&lt;/title&gt;
    &lt;script src=&quot;https://aframe.io/releases/1.4.1/aframe.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        AFRAME.registerComponent(&#39;square&#39;, {
            schema: {
                size: { type: &#39;number&#39; }
            },
            init: function () {

                const sizeOffset = this.data.size / 2;
                const points = [];
                points.push(new THREE.Vector2(-sizeOffset, -sizeOffset));
                points.push(new THREE.Vector2(sizeOffset, -sizeOffset));
                points.push(new THREE.Vector2(sizeOffset, sizeOffset));
                points.push(new THREE.Vector2(-sizeOffset, sizeOffset));
                var shape = new THREE.Shape(points);
                var geometry = new THREE.ShapeGeometry(shape);

                //var material = *** How do I get/inherit the component&#39;s material (to pass in to the Mesh method below)

                var mesh = new THREE.Mesh(geometry);
                this.el.object3D.add(mesh);
            },
        });

    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;a-scene&gt;
        &lt;a-sky color=&quot;#606060&quot;&gt;&lt;/a-sky&gt;
        &lt;a-entity material=&quot;color: purple;&quot; position=&quot;-0.5 1.6 -2&quot; geometry=&quot;primitive: box; width: 0.2; height: 0.2;&quot;&gt;&lt;/a-entity&gt;
        &lt;a-entity material=&quot;color: green;&quot; position=&quot;0.5 1.6 -2&quot; square=&quot;size: 0.3;&quot;&gt;&lt;/a-entity&gt;
    &lt;/a-scene&gt;
&lt;/body&gt;
&lt;/html&gt;

But when I run this code, it displays the square in white, not green, as specified in the material definition. However, the geometry box does respect the material definition (on the left in purple).

使用A-Frame用户编写的组件中的实体材质定义。

I know that I could create a parameter for my component receiving the color, but I'd like to keep the component generic and also be able to change other properties of the material without having to add each one to my component.

答案1

得分: 1

由于 material 组件将材质分配给通过 .getObject3D(&quot;mesh&quot;) 获取的 THREE.Object，您可以简单地将您的网格设置为默认的 mesh，如下所示：

<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('square', {
    schema: {
      size: { type: 'number' }
    },
    init: function() {
      const sizeOffset = this.data.size / 2;
      const points = [];
      points.push(new THREE.Vector2(-sizeOffset, -sizeOffset));
      points.push(new THREE.Vector2(sizeOffset, -sizeOffset));
      points.push(new THREE.Vector2(sizeOffset, sizeOffset));
      points.push(new THREE.Vector2(-sizeOffset, sizeOffset));
      var shape = new THREE.Shape(points);
      var geometry = new THREE.ShapeGeometry(shape);

      var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
      this.el.setObject3D("mesh", mesh); // 将网格设置为默认的 "mesh" 对象
    },
  });
</script>

<a-scene>
  <a-sky color="#606060"></a-sky>
  <a-entity material="color: purple;" position="-0.5 1.6 -2" geometry="primitive: box; width: 0.2; height: 0.2;"></a-entity>
  <a-entity material="color: green;" position="0.5 1.6 -2" square="size: 0.3;"></a-entity>
</a-scene>

如果需要进一步的帮助，请随时告诉我。

英文:

Since the material component assigns the material to a THREE.Object acquired by .getObject3D(&quot;mesh&quot;);, you can simply set your mesh as the default mesh with <br>
setObject3D(&quot;mesh&quot;, mesh_object);:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://aframe.io/releases/1.4.1/aframe.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
  AFRAME.registerComponent(&#39;square&#39;, {
    schema: {
      size: { type: &#39;number&#39; }
    },
    init: function() {
      const sizeOffset = this.data.size / 2;
      const points = [];
      points.push(new THREE.Vector2(-sizeOffset, -sizeOffset));
      points.push(new THREE.Vector2(sizeOffset, -sizeOffset));
      points.push(new THREE.Vector2(sizeOffset, sizeOffset));
      points.push(new THREE.Vector2(-sizeOffset, sizeOffset));
      var shape = new THREE.Shape(points);
      var geometry = new THREE.ShapeGeometry(shape);

      var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
      this.el.setObject3D(&quot;mesh&quot;, mesh); // set the mesh as the default &quot;mesh&quot; object
    },
  });
&lt;/script&gt;

&lt;a-scene&gt;
  &lt;a-sky color=&quot;#606060&quot;&gt;&lt;/a-sky&gt;
  &lt;a-entity material=&quot;color: purple;&quot; position=&quot;-0.5 1.6 -2&quot; geometry=&quot;primitive: box; width: 0.2; height: 0.2;&quot;&gt;&lt;/a-entity&gt;
  &lt;a-entity material=&quot;color: green;&quot; position=&quot;0.5 1.6 -2&quot; square=&quot;size: 0.3;&quot;&gt;&lt;/a-entity&gt;
&lt;/a-scene&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月31日 23:40:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/75900373.html
  • aframe
  • three.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定