WebGL, Three.js and Babylon.js Mouse-Picking Collada Models with THREE.js [part1]

2017.07.06 05:32

Mouse-Picking Collada Models with THREE.js [part1]

Mouse-Picking Collada Models with THREE.js

Posted 10. 08. 2012 by Jens Arps filed under Experiments in Web, How to.

UPDATE: This post was written for three.js revision 49. An updated post for newer revisions of three.js is here: Mouse-Picking Collada Models with three.js, Part II.

Finding a Collada model that has been “clicked on” in a scene seems to be a common issue, and I’m getting quite some emails asking me about details. So here’s a how-to with annotated code.

The whole “finding an object” thing requires ray casting. When the user clicks anywhere on the screen, we’ll project the event coordinates into the 3D space so that we have a virtual “view-path” from the center of our view into the direction where the click took place – like our own eye does. We then follow that line until we find an intersection with an object in the scene. That line is the ray we are “casting”. OK, let’s go!

There is a demo showing this here: http://jensarps.github.com/webgl_experiments/collada_picking_ray.html

The annotated source code is available here: https://github.com/jensarps/webgl_experiments/blob/master/collada_picking_ray.html. I’ll be following along this code in this post.

For this to work, you need a ray caster that is able to detect Collada models; I extensively wrote about this before, so I just recommend you use the ReusableRay class.

Initially, we setup some vars we will later need:

	var ray = new THREE.ReusableRay();
	var projector = new THREE.Projector();
	var directionVector = new THREE.Vector3();

	var SCREEN_HEIGHT = window.innerHeight;
	var SCREEN_WIDTH = window.innerWidth;

	var clickInfo = {
	x: 0,
	y: 0,
	userHasClicked: false
	};

view raw setup.js hosted with ❤ by GitHub

The first thing we do is to record the mouse event. We do not react to it right now, because we don’t want to do anything outside of the render loop, so we keep control about what happens when. So let’s just store the coordinates and set a flag that we can later look up:

	container.addEventListener('click', function (evt) {
	// The user has clicked; let's note this event
	// and the click's coordinates so that we can
	// react to it in the render loop
	clickInfo.userHasClicked = true;
	clickInfo.x = evt.clientX;
	clickInfo.y = evt.clientY;
	}, false);

view raw connect.js hosted with ❤ by GitHub

Next, in the render loop, we check if a click has happened. If so, we start the whole ray casting thingy. To define the ray, we need two vectors: One representing the start point of the ray, and the other one representing the direction. The first is easy, it’s the camera position. The second is more interesting. We start with translating the mouse coordinates into something that’s independent of screen size, and assigning them to the direction vector:

	// The following will translate the mouse coordinates into a number
	// ranging from -1 to 1, where
	// x == -1 && y == -1 means top-left, and
	// x == 1 && y == 1 means bottom right
	var x = ( clickInfo.x / SCREEN_WIDTH ) * 2 - 1;
	var y = -( clickInfo.y / SCREEN_HEIGHT ) * 2 + 1;

	// Now we set our direction vector to those initial values
	directionVector.set(x, y, 1);

view raw setup-direction-vector.js hosted with ❤ by GitHub

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

Now, there’s a little bit of math magic happening. Currently, we have the right direction if the camera’s position and view direction wouldn’t have changed. So we need to modify the vector to take these into account; I can’t really explain why this works, you need to trust me on this one:

	// Unproject the vector
	projector.unprojectVector(directionVector, camera);

	// Substract the vector representing the camera position
	directionVector.subSelf(camera.position);

view raw find-direction.js hosted with ❤ by GitHub

Ok, now we’ve got a vector that describes the direction correctly, but if you inspect it, you’ll find that it contains some crazy numbers. We need to make sure it contains only numbers ranging from -1 to 1 before passing it on to the ray caster class and firing off the ray:

	// Normalize the vector, to avoid large numbers from the
	// projection and substraction
	directionVector.normalize();

	// Now our direction vector holds the right numbers!
	ray.setSource(camera.position, directionVector);

view raw normalizing.js hosted with ❤ by GitHub

That’s it! We can now ask the ray class for intersections, and it will report back all meshes, particles and objects that have meshes as first-level children. Intersections are ordered by distance, so in this case, we only need the first one we get. Each intersection has three properties: point, face and object. point contains a vector describing the point in space where the ray exactly intersected the object, face contains the hit face, and object the original object that has been hit — it’s exactly the object we have been adding to the scene earlier with scene.add(/* ... */).

	var intersects = ray.intersectObjects(scene.children);
	if (intersects.length) {
	// intersections are, by default, ordered by distance,
	// so we only care for the first one. The intersection
	// object holds the intersection point, the face that's
	// been "hit" by the ray, and the object to which that
	// face belongs. We only care for the object itself.
	var target = intersects[0].object;
	statsNode.innerHTML = 'Name: ' + target.name
	+ '<br>'
	+ 'ID: ' + target.id;
	}

view raw intersection.js hosted with ❤ by GitHub

Done! If there’s anything unclear, don’t hesitate and let me know. Thanks!

[출처] http://jensarps.de/2012/08/10/mouse-picking-collada-models-with-three-js/

<!doctype html>
<html>
<head>
    <title>Mouse-picking Collada models with three.js and ReusableRay</title>
    <meta charset="utf-8">
    <style>
        body {
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            font-weight: bold;
            text-align: center;
        }

        a {
            color: #0078ff;
        }

        #info {
            color: #000000;
            position: absolute;
            top: 0px;
            width: 100%;
            padding: 5px;
            z-index: 100;
        }

        #stats {
            position: absolute;
            right: 10px;
            top: 5px;
            color: #fff;
            text-align: left;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            width: 200px;
            height: 60px;
            border: solid 1px black;
            border-radius: 5px;
        }

    </style>
</head>
<body>

<div id="info">
    - mouse-picking Collada models <a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> -<br>
    crate model by <a href="http://www.turbosquid.com/FullPreview/Index.cfm/ID/631645" target="_blank">DeYogbar</a><br>
    Move around using WASD and click on objects.
</div>

<div id="stats">
</div>

<script src="three.js/build/Three.js"></script>
<script src="three.js/ColladaLoader.js"></script>

<script src="ReusableRay.js"></script>

<script src="three.js/js/Detector.js"></script>
<script src="three.js/js/Stats.js"></script>

<script>

    if (!Detector.webgl) Detector.addGetWebGLMessage();

    var container, stats;
    var camera, controls, scene, renderer;

    var clock = new THREE.Clock();

    var ray = new THREE.ReusableRay();
    var projector = new THREE.Projector();
    var directionVector = new THREE.Vector3();

    var SCREEN_HEIGHT = window.innerHeight;
    var SCREEN_WIDTH = window.innerWidth;

    var clickInfo = {
        x: 0,
        y: 0,
        userHasClicked: false
    };

    var statsNode = document.getElementById('stats');
    var marker;

    init();
    animate();

    function init () {

        container = document.createElement('div');
        document.body.appendChild(container);

        container.addEventListener('click', function (evt) {
            // The user has clicked; let's note this event
            // and the click's coordinates so that we can
            // react to it in the render loop
            clickInfo.userHasClicked = true;
            clickInfo.x = evt.clientX;
            clickInfo.y = evt.clientY;
        }, false);

        // we just do the following to hide the event from controls
        // and disable moving via mouse buttons
            var stopEvent = function (evt) { evt.preventDefault(); evt.stopPropagation(); };
            container.addEventListener('mousedown', stopEvent, false);
            container.addEventListener('mouseup', stopEvent, false);

        /* Scene & Camera */

        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(25, SCREEN_WIDTH / SCREEN_HEIGHT);
        scene.add(camera);

        /* Controls */

        controls = new THREE.FirstPersonControls(camera);
        controls.constrainVertical = true;
        controls.movementSpeed = 60;
        controls.lookSpeed = 0.05;

        /* Renderer */

        renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        container.appendChild(renderer.domElement);

        /* Lights */

        var ambientLight = new THREE.AmbientLight(0x606060);
        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(1, 0.75, 0.5).normalize();
        scene.add(directionalLight);


        directionalLight = new THREE.DirectionalLight(0xffffff);
        directionalLight.position.set(-1, 0.75, 0.5).normalize();
        scene.add(directionalLight);

        /* Ground */

        var plane = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000, 10, 10), new THREE.MeshBasicMaterial({ color: 0x808080, wireframe: true }));
        plane.name = 'Ground';
        scene.add(plane);

        /* Collada Objects */

        createBoxes();

        /* hit point marker */
        marker = new THREE.Mesh( new THREE.SphereGeometry(1), new THREE.MeshLambertMaterial( { color: 0xff0000 } ) );
        scene.add(marker);
    }

    function createBoxes () {
        var boxCount = 20;

        var loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        loader.load('models/WoodenBox02/WoodenBox02.dae', function (collada) {

            var objectProto = collada.scene;

            for (var i = 0; i < boxCount; i++) {

                var object = THREE.SceneUtils.cloneObject(objectProto);

                object.name = 'Box #' + i;

                object.position.x = Math.random() * 800 - 400;
                object.position.y = 5;
                object.position.z = Math.random() * 800 - 400;

                object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;

                object.scale.x = 10;
                object.scale.y = 10;
                object.scale.z = 10;

                scene.add(object);
            }

        });
    }

    function animate () {

        var delta = clock.getDelta();

        requestAnimationFrame(animate);

        render(delta);
    }

    function render (delta) {

        if (clickInfo.userHasClicked) {

            clickInfo.userHasClicked = false;

            statsNode.innerHTML = '';

            // The following will translate the mouse coordinates into a number
            // ranging from -1 to 1, where
            //      x == -1 && y == -1 means top-left, and
            //      x ==  1 && y ==  1 means bottom right
            var x = ( clickInfo.x / SCREEN_WIDTH ) * 2 - 1;
            var y = -( clickInfo.y / SCREEN_HEIGHT ) * 2 + 1;

            // Now we set our direction vector to those initial values
            directionVector.set(x, y, 1);

            // Unproject the vector
            projector.unprojectVector(directionVector, camera);

            // Substract the vector representing the camera position
            directionVector.subSelf(camera.position);

            // Normalize the vector, to avoid large numbers from the
            // projection and substraction
            directionVector.normalize();

            // Now our direction vector holds the right numbers!
            ray.setSource(camera.position, directionVector);

            var intersects = ray.intersectObjects(scene.children);
            if (intersects.length) {
                // intersections are, by default, ordered by distance,
                // so we only care for the first one. The intersection
                // object holds the intersection point, the face that's
                // been "hit" by the ray, and the object to which that
                // face belongs. We only care for the object itself.
                var target = intersects[0].object;
                statsNode.innerHTML = 'Name: ' + target.name
                        + '<br>'
                        + 'ID: ' + target.id;

                // let's move the marker to the hit point
                marker.position.x = intersects[0].point.x;
                marker.position.y = intersects[0].point.y;
                marker.position.z = intersects[0].point.z;
            }

        }

        controls.update(delta);
        camera.position.y = 20;

        renderer.render(scene, camera);
    }


</script>

<script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-10931011-2']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();

</script>

</body>
</html>

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
4	ActionScript 3.0 학습에 도움이 되는 팁	졸리운_곰	2014.06.22	782
3	ActionScript 3.0 : 어려울까요? 안 어려울까요? - (3)	졸리운_곰	2014.06.22	762
2	ActionScript 3.0 : 어려울까요? 안 어려울까요? - (2)	졸리운_곰	2014.06.22	799
1	ActionScript 3.0 : 어려울까요? 안 어려울까요? - (1)	졸리운_곰	2014.06.22	904