Three.js - 我想让我的爱尔兰三维模型在某个地方可点击

时间:2014-03-22 22:10:13

标签: model 3d three.js

这是我的代码

任何人的想法?

<script>
    var scene, camera, renderer;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
        HEIGHT = window.innerHeight;

        renderer = new THREE.WebGLRenderer({alpha: true});
        renderer.setSize(800, 900);
        document.getElementById("mapofireland").appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(65, 600 / 700, 5, 500);
        camera.position.set(1,24,15);
        scene.add(camera);

        window.addEventListener('resize', function() {
            var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
            renderer.setSize(800, 900);
            camera.aspect = 600 / 700;
            camera.updateProjectionMatrix();
        });

        renderer.setClearColorHex(0x000000, 0);

        var light = new THREE.PointLight(0xFFFFFF);
        light.position.set(-100,200,100);
        scene.add(light);

        //var directionalLight = new THREE.DirectionalLight(0xffffff);
        // directionalLight.position.set(10, 1, 1).normalize();
        //scene.add(directionalLight);

        var loader = new THREE.JSONLoader();
        loader.load( "models/mapwithmountains.js", function(geometry, materials){

            var material = new THREE.MeshLambertMaterial({
                map: THREE.ImageUtils.loadTexture('maps/Ireland_map.jpg')
            });
            mesh = new THREE.Mesh( geometry, material );
            scene.add(mesh);
        });

        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function onDocumentMouseDown( event ) {

        event.preventDefault();

        var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
        projector.unprojectVector( vector, camera );

        var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

        var intersects = raycaster.intersectObjects( geometry );

        if ( intersects.length > 0 ) {

            intersects[ 0 ].geometry.material.color.setHex( Math.random() * 0xffffff );

            var particle = new THREE.Sprite( particleMaterial );
            particle.position = intersects[ 0 ].point;
            particle.scale.x = particle.scale.y = 16;
            scene.add( particle );
        }

        /*
        // Parse all the faces
        for ( var i in intersects ) {

            intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
        }
        */
    }

    function animate() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
        controls.update();
    }
</script>

1 个答案:

答案 0 :(得分:0)

在您的代码段中,缺少mousedown eventlistener,请在代码中包含mousedown事件的以下行..

document.addEventListener('mousedown',
        function(e) {
            onDocumentMouseDown(e);
        },
        false);