Sample IntersectsObject

by chilipeppr

HTML

<body>
    <script src="http://mrdoob.github.io/three.js/build/three.min.js"></script>
    <script src="http://mrdoob.github.io/three.js/examples/js/renderers/Projector.js"></script>
    <script src="http://mrdoob.github.io/three.js/examples/js/renderers/CanvasRenderer.js"></script>
    <script src="http://mrdoob.github.io/three.js/examples/js/libs/stats.min.js"></script>
</body>

CSS

body {
    font-family: Monospace;
    background-color: #f0f0f0;
    margin: 0px;
    overflow: hidden;
}

JavaScript

var container, stats;
var camera, scene, renderer;
var particleMaterial;

var raycaster;

var objects = [];

init();
animate();

function init() {
    
    container = document.createElement('div');
    document.body.appendChild(container);
    
    var info = document.createElement('div');
    info.style.position = 'absolute';
    info.style.top = '10px';
    info.style.width = '100%';
    info.style.textAlign = 'center';
    info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> - clickable objects';
    container.appendChild(info);
    
    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();
            
        }
        
    });
    
    //
    
    raycaster = new THREE.Raycaster();
    
    renderer =...