ThreeJs 选中物体事件

选中物体变红色demo:

https://threejs.org/examples/#webgl_raycast_sprite

<!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 {
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				margin: 0px;
				background-color: #fff;
				overflow: hidden;
			}
			#info{
				position: absolute;
				z-index: 1;
				width: 100%;
				padding: 5px;
				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="https://threejs.org/build/three.js"></script>
	<script src="js/OrbitControls.js"></script>
	<script>
		var renderer, scene, camera;
		var controls, group;
		init();
		animate();
		function init() {
			// init renderer
			renderer = new THREE.WebGLRenderer( { antialias: true } );
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			// init scene
			scene = new THREE.Scene();
			scene.background = new THREE.Color( 0xffffff );
			 
			// init camera
			camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
			camera.position.set( 15, 15, 15 );
			camera.lookAt( scene.position );
			controls = new THREE.OrbitControls( camera, renderer.domElement );
			controls.enableRotate = true;
			 
			
			group = new THREE.Group();
			scene.add(group);
			
			
			geometryP = new THREE.BoxGeometry(10,10,10);
			var materialP = new THREE.MeshBasicMaterial( { color: 0x0000ff ,side:THREE.DoubleSide} );
			circleP = new THREE.Mesh( geometryP, materialP );			
			circleP.position.set(-80, -40, 0); 
			//geometryP.rotateY(Math.PI/2);
			var group1 = new THREE.Group();
			group.add(group1);
			group1.add(circleP);
			
			
			
			geometryP1 = new THREE.BoxGeometry(-10,-10,10);	 
			var materialP1 = new THREE.MeshBasicMaterial( { color: 0x00ff00 ,side:THREE.DoubleSide} );
			circleP1 = new THREE.Mesh( geometryP1, materialP1 );			
			var group2 = new THREE.Group();
			group.add(group2);
			group2.add(circleP1);
			
			
			window.addEventListener( 'resize', onWindowResize, false );
			window.addEventListener( "mousemove", onDocumentMouseMove, false );
		}
		function animate() {
			renderer.render( scene, camera );
			requestAnimationFrame( animate );
		}
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
		}
		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 &&selectedObject!=intersects[0].object) {
				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 ) {
			x = ( x / window.innerWidth ) * 2 - 1;
			y = - ( y / window.innerHeight ) * 2 + 1;
			mouseVector.set( x, y, 0.5 );
			raycaster.setFromCamera( mouseVector, camera );
			return raycaster.intersectObject( group, true );
		}
	</script>
</body>
</html>

　　

 

From: https://www.cnblogs.com/xuejianxiyang/p/9732632.html

posted @ 2018-09-30 17:06  Ace001  阅读(9929)  评论(0)  编辑  收藏  举报