Selecting object with mouse - Three.js

Question

I know that the question has already been asked. I want to be able to change the color of an object if selected with the mouse. I tried writing the code myself but it seems not to work, so I guess that I am missing something. That's basically the script:

    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
        renderer.setClearColor( 0xcccccc, 1 ); 
        document.body.appendChild( renderer.domElement );
        scene.add(camera);

        var geometry = new THREE.Geometry();
        geometry.vertices.push(
            new THREE.Vector3( -5,  5, 0 ),
            new THREE.Vector3( -5, -5, 0 ),
            new THREE.Vector3(  5, -5, 0 )
        );
        var face = new THREE.Face3(0, 1, 2);
        geometry.faces.push(face);
        var material = new THREE.MeshBasicMaterial({color: 0x3300ff});
        var triangle = new THREE.Mesh(geometry, material);
        scene.add(triangle);

        camera.position.z = 10;

        document.addEventListener( 'mousedown', onDocumentMouseDown );

        function onDocumentMouseDown( event ) {    
            event.preventDefault();
            var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,   
                                    -( event.clientY / window.innerHeight ) * 2 + 1,  
                                    0.5 );     
            var projector = new THREE.Projector();                                        
            var raycaster = projector.pickingRay( mouse3D.clone(), camera );
            var intersects = raycaster.intersectObjects( objects );

            if ( intersects.length > 0 ) {
                intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
            }
        }

        var render = function () {
            requestAnimationFrame( render );
            camera.lookAt( scene.position );
            renderer.render( scene, camera );
        };

        render();
    </script>

If someone could help me I would appreciate it.

use eventcontrols ) alexan0308.github.io/threejs/examples/… — gevaraweb
– gevaraweb, Commented Oct 5, 2015 at 21:42
Let me remind you that raycasting is done on CPU and is exceptionally slow. Better approach can be found by keyword "gpu picking": you'd like to render your scene with each clickable face having different color, and then just get a color of pixel by mouse coordinates. — polkovnikov.ph
– polkovnikov.ph, Commented Mar 20, 2017 at 21:40

uhura · Accepted Answer · 2015-10-05 19:31:58Z

3

Updated your code and made jsfiddle

In onDocumentMouseDown added

var raycaster =  new THREE.Raycaster();                                        
raycaster.setFromCamera( mouse3D, camera );

instead of

var projector = new THREE.Projector();                                        
var raycaster = projector.pickingRay( mouse3D.clone(), camera );

To objects array added triangle mesh and updated size of the renderer. I suggest you to start using Console and do some debugging. You can easily find these errors yourself.

answered Oct 5, 2015 at 19:31

uhura

2,69325 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vixenn Over a year ago

Thanks, but could you explain a little why I should use those stuff and why we add the triangle to objects. Also why is this console.log(intersects) in the code?

uhura Over a year ago

Raycaster documentation, converts 2D mouse coordinates to the 3D world. Casts a ray from 3d mouse position, following the direction of the camera, and checks if hit any object on the way. Objects array is to check for intersection with the ray and we want to check if triangle is selected. console.log was for debugging, you can remove it. JavaScript console in different browsers

TheHaloDeveloper Over a year ago

@uhura Please attach a snippet

Collectives™ on Stack Overflow

Selecting object with mouse - Three.js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related