click

by bizamajig

HTML

<body>
<body>
 <script src="https://mrdoob.github.io/three.js/build/three.js"></script>
<script src="https://mrdoob.github.io/three.js/examples/js/controls/OrbitControls.js"></script> 
<script src="https://mrdoob.github.io/three.js/examples/js/renderers/Projector.js"></script> 
</body>

JavaScript

var Scene;
var Renderer;
var Camera;
var Light1;
var Light2;
var Controls;
var Mesh;
var Width;
var Height;
var points = ['mesh', 0, 50, 10, 10, 40, 10, 20, -10, 30, -50, 0, -20, -30, -50, -20, -10, -40, 10, -10, 10];

function mouseClick(event) {
    var mouse3D = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1,
        0.5);

    var Projector = new THREE.Projector();
    Projector.unprojectVector(mouse3D, Camera);
    mouse3D.sub(Camera.position);
    mouse3D.normalize();

    var raycaster = new THREE.Raycaster(Camera.position, mouse3D);
    var intersects;


    intersects = raycaster.intersectObjects(Scene.children);
    if (intersects.length > 0) {
        switch (intersects[0].object.name) {
            case 'mesh':
                Scene.getObjectByName('mesh').material.color.setHex(Math.random() * 0xffffff);
                break;
            default:
                console.log("invalid 3d model clicked");
                break;
        }

    }

}


document.addEventListener('mousedown', mouseClick, false);


function addMesh(point) {

    var Points = [];

    for (var i = 1; i < point.length; i++) {
        //console.log(point[i],point[++i]);
        Points.push(new THREE.Vector2(point[i], point[++i]));
    }

    var Shape = new THREE.Shape(Points);

    var ExtrusionSettings = {
        curveSegments: 3,
        bevelThickness: 0,
        bevelSize: 0,
        bevelEnabled: false,
        material: 0,
        extrudeMaterial: 1,
        amount: 10
    };

    var Geometry = new THREE.ExtrudeGeometry(Shape,ExtrusionSettings);

    var Material = new THREE.MeshLambertMaterial({
        color: 0xff8800
    });
    Mesh = new THREE.Mesh(Geometry, Material);
    Mesh.position.z = -100;
    Scene.add(Mesh);
    Mesh.name = point[0];
    console.log(Mesh.name);
}

function initialize() {
    Width = window.innerWidth;
    Height = window.innerWidth;

    Scene = new THREE.Scene();

    Camera =...