Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

250
Vistas
three.js raycaster mouseover

I've been trying to set a "mouseover" effect that gives transparency to the box geometry only, but this applies also on the ground geometry and I'm not able to exclude the ground form this effect, any suggestions on how to achieve this? I think I need to pass some arguments in intersectObject (scene.somenthing)

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);
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda