trois js objet cliquable

J'ai deux objets 3d "mailles" que j'ai créé dans three.js.
Je veux ajouter cliquez sur l'événement pour ces objets, de sorte que quand je clique sur l'un d'eux, il est mis à l'échelle et quand je clique sur l'autre, il tourne.

J'ai essayé cette méthode pour ajouter un événement click d'un objet et il ne fonctionne pas.

<script src='threex.domevent.js'> </script>
<script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 1, 1000);
        camera.position.z = 100;

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        cube.addEventListener( 'click',function(){cubeScale()} , false );

        function cubeScale()
            {
            cube.scale.x *= 20;
            }


        var render = function () {
            requestAnimationFrame(render);
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        };

        render();

    </script>
voir mrdoob.github.io/trois.js/exemples/...
voir aussi threejs.org/examples/canvas_interactive_cubes_tween.html

OriginalL'auteur Mashael | 2013-07-14

  1. 7

    Absolument vous avez besoin pour mettre en œuvre raycaster sélectionnez/cliquez sur/choisir certain objet dans three.js. J'ai déjà mis en œuvre dans un de mes projet à l'aide de three.js et raycaster contre collada modèle. Pour votre référence, ces liens peuvent vous aider à:

    1. http://soledadpenades.com/articles/three-js-tutorials/object-picking/
    2. http://jensarps.de/2012/08/10/mouse-picking-collada-models-with-three-js/
    le premier lien en plus de ce lien: stackoverflow.com/questions/29366109/..." m'ont beaucoup aidé.

    OriginalL'auteur Ratih Nurmalasari

  2. 0

    Vous pouvez utiliser pickingRay à effectuer en cliquant avec caméra orthographique comme qui suit dans le présent code:

    var vector = new THREE.Vector3(
      (event.clientX / window.innerWidth) * 2 - 1,
      -(event.clientY / window.innerHeight) * 2 + 1, 0.5);

var rayCaster = projector.pickingRay(vector, camera);

var intersectedObjects = rayCaster.intersectObjects(scene.children, true);

    Mais si vous voulez exécuter en cliquant sur le point de vue de la caméra, vous devez effectuer un clic à l'aide de la unprojectVector comme qui suit ci-dessous:

    var vector = new THREE.Vector3( 
     (event.clientX / window.innerWidth) * 2 - 1, 
     - (event.clientY / window.innerHeight) * 2 + 1, 
                0.5 );

var rayCaster = projector.unprojectVector(vector, camera);

var intersectedObjects = rayCaster.intersectObjects(objects);

    OriginalL'auteur Filipe