whs-reduce-links.js

const links = [{
  title: 'About',
  position: [2, 1.5, 0],
  color: 0x00ff00
},
{
  title: 'Contact',
  position: [2, -1.5, 0],
  color: 0xff0000
},
// If this is uncommented, the sphere component for Portfolio shows in scene
// Else, it still shows up in children of app.$scene, but does not seem to render
// {
//   title: 'Portfolio',
//   position: [-2, 1, 0],
//   color: 0x0000ff
// },
{
  title: 'Portfolio',
  position: [-2, 1, 0],
  color: 0x0000ff
}
].reduce(function (links, { title, position, color }) {
  const sphere = new Sphere({
    buffer: true,
    geometry: {
      radius: 0.1,
      widthSegments: 16,
      heightSegments: 16
    },
    position,
    material: new THREE.MeshBasicMaterial({ color })
  })

  // app.add(sphere)
  mouse.track(sphere)

  sphere.on('click', () => console.log(`${title} clicked`))
  sphere.on('mouseover', () => {
    document.body.style.cursor = 'pointer'

    hoverDown.stop(app)
    hoverUp.start(app)
  })
  sphere.on('mouseout', () => {
    document.body.style.cursor = 'auto'

    hoverUp.stop(app)
    hoverDown.start(app)
  })

  return { ...links, [title]: sphere }
}, {})

links.About.addTo(app)
links.Portfolio.addTo(app)
links.Contact.addTo(app)