Mouse hovering in three.js editor

Questions
1

Whats the simplest way to change color and size of mesh when the mouse hover over it and also make it clickable with url directly in three.js editor? I read docs tried codes for raycasting/intersection but it doesnt work.
How to apply it on simple box for example?

2

The simplest interaction. When you hover over a cube, it becomes (and still remains) “yellow”.

  1. Add a box.
  2. Add a direcitonal light.
  3. On the “Scene” tab, in the object tree, choose “Scene”
  4. Below on the same tab there’s the “Script” section. Click the “New” button, enter the name of the script and click the “Edit” button.
  5. In the code editor:
    var box = this.getObjectByName("Box");

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2(1, 1);
    var intersects = [];

    function mousemove(event){
    	mouse.x = ( event.clientX / player.width ) * 2 - 1;
    	mouse.y = - ( event.clientY / player.height ) * 2 + 1;
    }

    function update( event ) {
    	raycaster.setFromCamera(mouse, camera);
    	intersects = raycaster.intersectObject(box);
    	if (intersects.length !== 0) {
    		let obj = intersects[0].object;
    		obj.material.color.set(0xffff00);
    	}
    }
  1. Click “Play”
4 Likes
3

Perfect! Any similar basic example how to make box as hyperlink that open in same window? By the way great editor.

1 Like
4

Hey Nobertino - just wondering if you ever were able to make a box a hyperlink? I’m trying to figure out how to do it but not having much luck. Thanks!

5

Instead of changing the material color in @prisoner849 code snippet, you execute

window.open( url, '_blank' );

You can assign the value for url from a custom property in Object3D.userData.

3 Likes
6

Hi, I tried this code but nothing happened, can you help me?

7

@herfeiha
Try to change this
function mousemove(event){
to this
function pointermove(event){

8

thanks.
Can you change the color by clicking the mouse?

13

Of course, use window.addEventListener(‘pointerup’, listener); use the raycaster to get the object, and then change the material color…