ThreeJs 选中物体事件
Posted Ace007
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于ThreeJs 选中物体事件的主要内容，如果未能解决你的问题，请参考以下文章