add sprite raycast demo

c6639997 · 06wj · 020b8874 · c6639997 · c6639997
隐藏空白更改
内联并排

Showing with 178 addition and 0 deletion

examples/files.js examples/files.js +1 -0

examples/webgl_raycast_sprite.html examples/webgl_raycast_sprite.html +177 -0

未找到文件。
--- a/examples/files.js
+++ b/examples/files.js
@@ -242,6 +242,7 @@ var files = {
 		"webgl_postprocessing_taa",
 		"webgl_postprocessing_unreal_bloom",
 		"webgl_raycast_texture",
+		"webgl_raycast_sprite",
 		"webgl_read_float_buffer",
 		"webgl_refraction",
 		"webgl_rtt",

--- a/examples/webgl_raycast_sprite.html
+++ b/examples/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>
\ No newline at end of file