可点击的三个JS凸对象(点击一次即可显示图像）

我从三个js网站中调整了一个例子。

我正在寻找使小的浮动对象有一个点击事件。

点击事件将触发显示在中心中较大凸起形状上的图像或视频

概念+图像

http://kevinwitkowski.tumblr.com/post/109592122645/workshop-update

工作样品

这是我当前的代码。

            var container;
        var camera, scene, renderer;
        var mesh;
        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        // array of functions for the rendering loop
        var onRenderFcts= [];
        init();
        animate();
        function init() {
            container = document.createElement( 'div' );
            document.body.appendChild( container );
            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xd6e3e8, 0.0030 );
            camera  = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
            camera.position.z = 0;
            controls    = new THREE.OrbitControls(camera)


            var light, object, materials;
            light = new THREE.DirectionalLight( 0xe8dbd6 );
            light.position.set( -50, -80, -10 );
            scene.add( light );
            light = new THREE.DirectionalLight( 0xd6dae8 );
            light.position.set( 20, 120, 1 );
            scene.add( light );
            light = new THREE.DirectionalLight( 0xd6e8e4 );
            light.position.set( 0, 1, 30 );
            scene.add( light );
            var map = THREE.ImageUtils.loadTexture( 'textures/1.jpeg' );
            map.wrapS = map.wrapT = 
            THREE.RepeatWrapping;
            map.anisotropy = 16;
            var materials = [
                new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } )
                //new THREE.MeshBasicMaterial( { color: 0x00000, shading: THREE.FlatShading, wireframe: true, transparent: false, opacity: 0.5} )
            ];

            // random convex 1
            points = [];
            for ( var i = 0; i < 30; i ++ ) {
                points.push( randomPointInSphere( 50 ) );
            }
            object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
            object.position.set( 0, 0, 0);
            scene.add( object );
            // random convex 2
            points = [];
            for ( var i = 0; i < 30; i ++ ) {
                points.push( randomPointInSphere( 15 ) );
            }
            object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
            object.position.set( 15, 50, -60 );
            scene.add( object );

            // random convex 3
            points = [];
            for ( var i = 0; i < 30; i ++ ) {
                points.push( randomPointInSphere( 15 ) );
            }
            object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
            object.position.set( 30, 10, 80 );
            scene.add( object );
            // random convex 4
            points = [];
            for ( var i = 0; i < 30; i ++ ) {
                points.push( randomPointInSphere( 8 ) );
            }
            object = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
            object.position.set( -80, -50, 20 );
            scene.add( object );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor( 0xf5f5f5 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            //


            window.addEventListener( 'resize', onWindowResize, true );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function onDocumentMouseMove( event ) {
            mouseX = ( event.clientX - windowHalfX );
            mouseY = ( event.clientY - windowHalfY );
        }
        //
        function randomPointInSphere( radius ) {
            return new THREE.Vector3(
                ( Math.random() - 0.5 ) * 1 * radius,
                ( Math.random() - 0.5 ) * 2 * radius,
                ( Math.random() - 0.5 ) * 2 * radius
            );
        }
        function animate() {
            requestAnimationFrame( animate );
            render();

        }
        function render() {
            var timer = Date.now() * 0.00005;
            camera.position.x = Math.cos( timer ) * 300;
            camera.position.z = Math.sin( timer ) * 300;
            camera.lookAt( scene.position );
            for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
                var object = scene.children[ i ];
                object.rotation.x = timer * 1;
                object.rotation.y = timer * 3;
            }
            // handle window resize
    window.addEventListener('resize', function(){
    renderer.setSize( window.innerWidth, window.innerHeight )
    camera.aspect   = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()     
    }, true)

            renderer.render( scene, camera );
        }
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
    // keep looping
    requestAnimationFrame( animate );
    // measure time
    lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
    var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
    lastTimeMsec    = nowMsec
    // call each update function
    onRenderFcts.forEach(function(onRenderFct){
        onRenderFct(deltaMsec/1000, nowMsec/1000)
    })
})