webgl_raycast_sprite.html


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - raycast - sprite</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                margin: 0px;
                background-color: #fff;
                overflow: hidden;
            }

            #info{
                position: absolute;
                z-index: 1;
                width: 100%;
                text-align: center;
            }
        </style>
    </head>
<body>
    <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raycast sprite<br></div>
    <script src="../build/three.js"></script>
    <script src="./js/controls/OrbitControls.js"></script>
    <script>
        var renderer;
        var scene;
        var spriteGroup;
        var camera;
        var controls;

        init();

        function init() {

            initRender();
            initScene();
            initCamera();
            addSprite();

            render();
            window.addEventListener( "mousemove", onDocumentMouseMove, false );

        }

        function render() {

            renderer.render( scene, camera );
            requestAnimationFrame( render );

        }

        function initRender() {

            renderer = new THREE.WebGLRenderer( {
                antialias: true
            } );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            renderer.setClearColor( 0xFFFFFF, 1.0 );

        }

        function initScene() {

            scene = new THREE.Scene();
            spriteGroup = new THREE.Object3D();
            scene.add( spriteGroup );

        }

        function initCamera() {

            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.y = 15;
            camera.position.z = 15;
            camera.position.x = 15;
            camera.lookAt( {
                x: 0,
                y: 0,
                z: 0
            } );

            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.target = new THREE.Vector3( 0, 0, 0 );
            controls.enableRotate = true;

        }

        function addSprite() {

            var sprite;

            sprite = makeSprite( '#69f', spriteGroup );
            sprite.position.set( 6, 5, 5 );
            sprite.scale.set( 2, 5, 1 );

            sprite = makeSprite( '#69f', spriteGroup );
            sprite.position.set( 8, - 2, 2 );
            sprite.center.set( 0.5, 0 );
            sprite.scale.set( 1, - 5, 1 );
            sprite.material.rotation = Math.PI / 3 * 4;

            var g = new THREE.Object3D();
            spriteGroup.add( g );
            g.scale.set( 1, 2, 1 );
            g.position.set( - 5, 0, 0 );
            g.rotation.set( Math.PI / 2, 0, 0 );

            sprite = makeSprite( '#69f', g );
            sprite.position.set( 0, 2, 5 );
            sprite.scale.set( 10, 2, 3 );
            sprite.center.set( - 0.1, 0 );
            sprite.material.rotation = Math.PI / 3;

        }

        function makeSprite( color, parent ) {

            var sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
                color: color
            } ) );
            parent.add( sprite );
            return sprite;

        }

        var selectedObject = null;

        function onDocumentMouseMove( event ) {

            event.preventDefault();
            if ( selectedObject ) {

                selectedObject.material.color.set( '#69f' );
                selectedObject = null;

            }

            var intersects = getIntersects( event.layerX, event.layerY );
            if ( intersects.length > 0 ) {

                var res = intersects.filter( function ( res ) {

                    return res && res.object;

                } )[ 0 ];

                if ( res && res.object ) {

                    selectedObject = res.object;
                    selectedObject.material.color.set( '#f00' );

                }

            }

        }

        var raycaster = new THREE.Raycaster();
        var mouseVector = new THREE.Vector3();

        function getIntersects( x, y ) {

            mouseVector.set(
                ( x / window.innerWidth ) * 2 - 1, - ( y / window.innerHeight ) * 2 + 1,
                0.5 );
            raycaster.setFromCamera( mouseVector, camera );
            var intersects = raycaster.intersectObjects( [ spriteGroup ], true );
            return intersects;

        }
    </script>
</body>
</html>