选中物体变红色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;
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