Three.js DOM CSS3D + WebGL + LookAt Controls

Mixing HTML Elements and WebGL together using CSS3DRenderer and WebGLRenderer.

by Joe Pea

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

<div id="css"></div>
<div id="webgl"></div>

CSS

body {
    background-color: #ffffff;
    margin: 0;
    overflow: hidden;
}

#css, #webgl {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
}

#css {
  background: black;
}

#webgl {
  pointer-events: none;
}

JavaScript

var camera, scene, renderer;

var scene2, renderer2;

var mouseX = 0, mouseY = 0;

var controls;

var cube;

var lookAt = new THREE.Vector3(0, 0, 0);

init();
animate();

function init() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 225 );
    camera.position.set( 0, 0, 300 );

    scene = new THREE.Scene();
    scene2 = new THREE.Scene();

    for ( var i = 0; i < 10; i ++ ) {

        var element = document.createElement( 'div' );
        element.style.width = '100px';
        element.style.height = '100px';
        element.style.opacity = 0.999;
        element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
        element.textContent = "Mixed Mode!"

        var domObject = new THREE.CSS3DObject( element );
        domObject.position.x = Math.random() * 200 - 100;
        domObject.position.y = Math.random() * 200 - 100;
        domObject.position.z = Math.random() * 200 - 100;
        domObject.rotation.x = Math.random();
        domObject.rotation.y = Math.random();
        domObject.rotation.z = Math.random();
        //domObject.scale.x = Math.random() + 0.5;
        //domObject.scale.y = Math.random() + 0.5;
        scene2.add( domObject );

        // make an invisible plane for the DOM element to see if we can chop
        // the cube with it.
        ~function() {
            var material = new THREE.MeshBasicMaterial({
                //color: new THREE.Color('blue'),
                //transparent: true,
                //opacity: 0,

                opacity	: 0,
                color	: new THREE.Color('black'),
                blending: THREE.NoBlending,
                side	: THREE.DoubleSide,
            });
            var geometry = new THREE.PlaneGeometry( 100, 100 );
            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.copy( domObject.position );
        ...