[ main ]
[ anim.Loop ]
[ three.WebGLRenderer ]
[ three.Scene ]
[ three.Mesh -----------------------------------]
[ three.Rotation.x ] [ three.Rotation.y ] [ ... ]
[ time.Now ]         [ time.Now ]         [ ... ]

import { Context, Node } from './context'

// Context phase (1)
// The 'object3D' received here is the three.Scene
export function init({ THREE, object3D, cache, detached }: Context): Node {
  const mesh = cache('object3D', () => {
    const dim = 1
    const geometry = new THREE.BoxGeometry(dim, dim, dim)
    const material = new THREE.MeshPhongMaterial({
      color: 0x156289,
      emissive: 0x072534,
      side: THREE.DoubleSide,
      flatShading: true,
    })

    const mesh = new THREE.Mesh(geometry, material)
    object3D.add(mesh)
    return mesh
  })

  if (detached) {
    if (mesh.parent) {
      mesh.parent.remove(mesh)
    }
  }
  // Context update. Now 'object3D' for children is the
  // cube mesh.
  return { object3D: mesh }
}

import { Context, Node } from './context'

// Context phase (1)
// The 'object3D' object is the cube from three.Mesh
export function init({ object3D, detached }: Context): Node {
  const rotation = object3D.rotation
  rotation.x = 0
  if (detached) {
    return {}
  }

  return {
    // Link phase (2)
    // Arguments are the linked children.
    link({ number: rotateX }) {
      const x = rotateX || () => 0
      return {
        // Update phase (3)
        update() {
          rotation.x = x()
        },
      }
    },
  }
}

import { Context, Node } from './context'

// Context phase (1)
// Receives the "time" object from anim.Loop far up
// in the tree.
export function init({ time }: Context): Node {
  return {
    // Link phase (2)
    // Does not have children
    link: () => ({
      // Update phase (3)
      // Returns a number. This is the function called by
      // three.Rotation.x on update.
      number: () => time.now,
    }),
  }
}