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>