lowpoly.js

/* global AFRAME, THREE */

AFRAME.registerComponent('lowpoly', {
  schema: {
    color: { type: 'string', default: '#FFF'},
    nodes: { type: 'boolean', default: false },
    opacity: { type: 'number', default: 1.0 },
    wireframe: { type: 'boolean', default: false }
  },

  init: function() {
    // Get the ref of the object to which the component is attached
    const el = this.el;
    const obj = el.getObject3D('mesh');
    const position = obj.el.getAttribute('position');
  
    // Grab the reference to the main WebGL scene
    const scene = document.querySelector('a-scene').object3D
  
    // Modify the color of the material
    obj.material = new THREE.MeshPhongMaterial({
      color: this.data.color,
      emissive: this.data.color,
      emissiveIntensity: 0.5,
      flatShading: THREE.FlatShading
    })
  
    // Define the geometry for the outer wireframe
    const frameGeom = new THREE.OctahedronGeometry(2.5, 2)
  
    // Define the material for it
    const frameMat = new THREE.MeshPhongMaterial({
      color: this.data.color,
      opacity: this.data.opacity,
      transparent: true,
      wireframe: true
    })
  
    // The final mesh is a composition of the geometry and the material
    this.icosFrame = new THREE.Mesh(frameGeom, frameMat)
  
    // Set the position of the mesh to the position of the sphere
    const { x, y, z } = position
    this.icosFrame.position.set(x, y + 0.2, z)
  
    // If the wireframe prop is set to true, then we attach the new object
    if (this.data.wireframe) {
      scene.add(this.icosFrame)
    }
  
    // If the nodes attribute is set to true
    if (this.data.nodes) {
      let spheres = new THREE.Group()
      let vertices = this.icosFrame.geometry.vertices
  
      // Traverse the vertices of the wireframe and attach small spheres
      for (var i in vertices) {
        // Create a basic sphere
        let geometry = new THREE.SphereGeometry(0.045, 16, 16)
        let material = new THREE.MeshBasicMaterial({
          color: this.data.color,
          opacity: this.data.opacity,
          flatShading: THREE.FlatShading,
          transparent: true
        })
  
        let sphere = new THREE.Mesh(geometry, material)
        // Reposition them correctly
        sphere.position.set(
          vertices[i].x + x,
          vertices[i].y + y + 0.2,
          vertices[i].z + z
        )
  
        spheres.add(sphere)
      }
      scene.add(spheres)
    }
  },

  update: function() {
    // Get the ref of the object to which the component is attached
    const obj = this.el.getObject3D('mesh')

    obj.material.color = new THREE.Color(this.data.color)
  },

  tick: function() {
    this.icosFrame.rotation.y += 0.005;
  }
})

AFRAME.registerComponent('low-poly', {
  schema: {
    color: { type: 'string', default: '#FFF'},
    nodes: { type: 'boolean', default: false },
    opacity: { type: 'number', default: 1.0 },
    wireframe: { type: 'boolean', default: false }
  },

  init: function() {
    // Get the ref of the object to which the component is attached
    const el = this.el;
    const obj = el.getObject3D('mesh');
    const position = obj.el.getAttribute('position');
  
    // Grab the reference to the main WebGL scene
    const scene = document.querySelector('a-scene').object3D
  
    // Modify the color of the material
    obj.material = new THREE.MeshPhongMaterial({
      color: this.data.color,
      flatShading: THREE.FlatShading
    })
  
    // Define the geometry for the outer wireframe
    const frameGeom = new THREE.IcosahedronGeometry(2.5, 3)
  
    // Define the material for it
    const frameMat = new THREE.MeshPhongMaterial({
      color: '#FFFFFF',
      opacity: this.data.opacity,
      transparent: true,
      wireframe: true
    })
  
    // The final mesh is a composition of the geometry and the material
    const icosFrame = new THREE.Mesh(frameGeom, frameMat)
  
    // Set the position of the mesh to the position of the sphere
    const { x, y, z } = position
    icosFrame.position.set(x, y, z)
  
    // If the wireframe prop is set to true, then we attach the new object
    if (this.data.wireframe) {
      scene.add(icosFrame)
    }
  
    // If the nodes attribute is set to true
    if (this.data.nodes) {
      let spheres = new THREE.Group()
      let vertices = icosFrame.geometry.vertices
  
      // Traverse the vertices of the wireframe and attach small spheres
      for (var i in vertices) {
        // Create a basic sphere
        let geometry = new THREE.SphereGeometry(0.045, 16, 16)
        let material = new THREE.MeshBasicMaterial({
          color: '#FFFFFF',
          opacity: this.data.opacity,
          flatShading: THREE.FlatShading,
          transparent: true
        })
  
        let sphere = new THREE.Mesh(geometry, material)
        // Reposition them correctly
        sphere.position.set(
          vertices[i].x + x,
          vertices[i].y + y,
          vertices[i].z + z
        )
  
        spheres.add(sphere)
      }
      scene.add(spheres)
    }
  },

  update: function() {
    // Get the ref of the object to which the component is attached
    const obj = this.el.getObject3D('mesh')

    obj.material.color = new THREE.Color(this.data.color)
  }
})