选中物体变红色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 rendererrenderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );// init scenescene = new THREE.Scene();scene.background = new THREE.Color( 0xffffff ); // init cameracamera = 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
ThreeJs 选中物体事件
原文地址：https://www.cnblogs.com/xuejianxiyang/p/9732632.html