Three.js

Topic Progress:

Use Three.js Objects (Example)

<script>
  AFRAME.registerComponent('mythreejsthing', {
    init: function () {
      var el = this.el;  // Entity.
      var shape_wuerfel = new THREE.CubeGeometry(3, 2, 3); // Breite, Höhe, Tiefe 
      var material_wuerfel = new THREE.MeshBasicMaterial({
        color: this.data.color,
        wireframe: false
      });
      this.el.setObject3D('mesh', new THREE.Mesh(shape_wuerfel, material_wuerfel));
    }
  });  
</script>
</head>
<body>
  <a-scene>
    <a-entity mythreejsthing="color: green;" position="0 1 -15"> </a-entity>
    <a-box depth="5" height="0.1" width="5" position="0 -0.55 -10" color="#FFFF00"></a-box>
  </a-scene>
 </body>

AFRAME.registerComponent('mythreejsthing', {

init: function () {

var el = this.el; // Entity.

var shape_wuerfel = new THREE.CubeGeometry(3, 2, 3); // Breite, Höhe, Tiefe

var material_wuerfel = new THREE.MeshBasicMaterial({

color: this.data.color,

wireframe: false

});

this.el.setObject3D('mesh', new THREE.Mesh(shape_wuerfel, material_wuerfel));

}

});

</script>

</head>

<body>

<a-scene>

<a-entity mythreejsthing="color: green;" position="0 1 -15"> </a-entity>

<a-box depth="5" height="0.1" width="5" position="0 -0.55 -10" color="#FFFF00"></a-box>

</a-scene>

</body>

← Previous Topic Next Topic →

P5.js; A-Frame.js

Tutorials

Three.js

Use Three.js Objects (Example)