He estado tratando de establecer un efecto de "pasar el mouse" que da transparencia solo a la geometría de la caja, pero esto se aplica también a la geometría del suelo y no puedo excluir el suelo de este efecto, alguna sugerencia sobre cómo lograr esto. ? Creo que necesito pasar algunos argumentos en intersectObject (scene.something)
import * as THREE from '../../build/three.module.js'; import { OrbitControls } from '../../src/OrbitControls.js'; var controls; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const pointer = new THREE.Vector2(1,1); const raycaster = new THREE.Raycaster(); const renderer = new THREE.WebGLRenderer({alpha:false,antialias:true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); const light = new THREE.AmbientLight(0x303030); const dLight = new THREE.DirectionalLight(0xffffff, 0.5); light.add(dLight); scene.add(light); const geometry = new THREE.BoxGeometry(50,0.1,50); const material = new THREE.MeshPhysicalMaterial( { color: 0x0fa8dc } ); const ground = new THREE.Mesh( geometry, material ); scene.add( ground ); camera.position.set(5,15,15); controls = new OrbitControls(camera, renderer.domElement); controls.maxPolarAngle = Math.PI / 2.1; //Raycaster reset materials function resetMaterials() { for ( let i = 0; i < scene.children.length; i ++ ) { if (scene.children[i].material) { scene.children[i].material.opacity = 1; } } } //raycast hover function hoverObject() { raycaster.setFromCamera( pointer, camera ); const intersects = raycaster.intersectObjects( scene.children ); for ( let i = 0; i < intersects.length; i ++ ) { intersects[ i ].object.material.transparent = true; intersects[ i ].object.material.opacity = 0.75; } } function animate() { controls.update() requestAnimationFrame( animate ); camera.lookAt(ground.position) resetMaterials() hoverObject() renderer.render( scene, camera ); } animate(); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } //on pointer mover function onPointerMove( event ) { pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1; pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1; } window.addEventListener('resize', onWindowResize); window.addEventListener( 'mousemove', onPointerMove, false ); const boxGeometry = new THREE.BoxGeometry(6, 6, 6); const boxMaterial = new THREE.MeshPhongMaterial( { color: 0xffc000 } ); const box = new THREE.Mesh( boxGeometry, boxMaterial); box.position.set(0,3,0); scene.add(box);