Access Three.js Objects

If you add an name attribute to elements which have a three.js object, you can retrieve the three.js object and use it as necessory.

<button onclick="javascript:sunset()">Sunset</button><br/>
<three-canvas width="200" height="200" antialias="true" clear-color="#000000">
  <three-camera name="camera" position="0,8,8" look-at="0,0,0"></three-camera>
  <three-light name="light1" position="0.577,0.577,0.577" color="#cccccc"></three-light>
  <three-light name="light2" type="ambient" color="#333333"></three-light>
  <three-box name="box" width="1" height="1" depth="1" rotation="0.2,0.2,0" color="#ffffff"></three-box>
</three-canvas>
<script>
  function sunset() {
    var threeCanvas = document.getElementsByTagName('three-canvas')[0];
    var threeScene = threeCanvas.scene;
    var threeCamera = threeCanvas.getObjectByName('camera'); // or threeScene.getObjectByName('camera')
    var threeLight1 = threeCanvas.getObjectByName('light1'); // or threeScene.getObjectByName('light1')
    threeCamera.position.set(0, 0, 8);
    threeCamera.lookAt(new THREE.Vector3());
    threeLight1.color = new THREE.Color('#ff0000');
  }
</script>