Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

254
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda