three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<script src="https://mrdoob.github.io/three.js/build/three.min.js"></script>
<script src="https://mrdoob.github.io/three.js/examples/js/libs/stats.min.js"></script>

<div id="background" onmousemove="console.log('OK')"></div>
<div id="container"></div>

CSS

body {
    font-family: Monospace;
    margin: 0px;
    overflow: hidden;
    pointer-events: none;
}

div#background {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 100px;
    height: 100px;
    background-color: green;
    z-index: -1;
    pointer-events: auto;
}

JavaScript

/* NEW CODE */
var divBox = document.getElementById("background");
divBox.addEventListener("mouseover", mouseOver, false);
divBox.addEventListener('mouseout', mouseOut, false);
var mouseOverBox = false;
function mouseOver () {
    mouseOverBox = true;
}
function mouseOut () {
    mouseOverBox = false;
}
function changeTheDivBox () {
    if ( mouseOverBox ) {
        divBox.style.backgroundColor = 'blue';
    }
    else {
        divBox.style.backgroundColor = 'green';
    }
}


/* YOUR CODE */
var container, stats;
var camera, scene, projector, renderer;
var particleMaterial;

var objects = [];

init();
animate();

function init() {
    container = document.getElementById( 'container' );
    document.body.appendChild( container );
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 0, 300, 500 );
    scene = new THREE.Scene();
    var geometry = new THREE.BoxGeometry( 100, 100, 100 );
    for ( var i = 0; i < 10; i ++ ) {
        var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
        object.position.x = Math.random() * 800 - 400;
        object.position.y = Math.random() * 800 - 400;
        object.position.z = Math.random() * 800 - 400;
        object.scale.x = Math.random() * 2 + 1;
        object.scale.y = Math.random() * 2 + 1;
        object.scale.z = Math.random() * 2 + 1;
        object.rotation.x = Math.random() * 2 * Math.PI;
        object.rotation.y = Math.random() * 2 * Math.PI;
        object.rotation.z = Math.random() * 2 * Math.PI;
        scene.add( object );
        objects.push( object );
    }
    
    var PI2 = Math.PI * 2;
    particleMaterial = new THREE.SpriteCanvasMaterial( {
        color: 0x000000,
        program: function ( context ) {
            context.beginPath();
            context.arc( 0, 0, 0.5, 0, PI2, true );
            context.fill();
        }
    } );
    projector = new...