如何将简单的点击事件添加到“多维数据集”答案

【问题标题】：How to add simple click event to `cube`如何将简单的点击事件添加到“多维数据集”
【发布时间】：2017-12-11 17:53:58
【问题描述】：

我使用three.js 创建了一个cube。但是如何将click 事件添加到cube？

是否需要任何额外的js 库或者我们可以直接将事件添加到对象中？

这是我的代码：

$(function () {


        var scene           = new THREE.Scene();
        var camera          = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);
        var webGLRenderer   = new THREE.WebGLRenderer({ antialias : true });

        webGLRenderer.setClearColor (0xEEEEEE, 1.0);
        webGLRenderer.setSize ( window.innerWidth, window.innerHeight );
        webGLRenderer.shadowMapEnabled = true;

        var cube = createMesh(new THREE.CubeGeometry(5, 5, 5), "floor-wood.jpg" );
        cube.position.x = -12;
        scene.add(cube);
        // console.log(cube.geometry.faceVertexUvs);

        var step = 0;

        render ();

        camera.position.x = 00;
        camera.position.y = 12;
        camera.position.z = 28;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var ambiLight = new THREE.AmbientLight(0x141414)
        scene.add(ambiLight);

        var light = new THREE.DirectionalLight();
        light.position.set(20, 30, 20);
        scene.add(light);

        function createMesh (geo, imgFile) {

            var texture = THREE.ImageUtils.loadTexture ("images/" + imgFile);
            var mat      = new THREE.MeshPhongMaterial();
            mat.map = texture;

            var mesh = new THREE.Mesh ( geo, mat);

            return mesh;

        }

        function render () {

            cube.rotation.y = step;
            cube.rotation.x = step;

            requestAnimationFrame ( render );
            webGLRenderer.render( scene, camera );
        }


        $('#webGL-output')
            .append(webGLRenderer.domElement);



    });

【问题讨论】：

标签： jquery three.js

【解决方案1】：

您不能将事件直接附加到网格，因为它不是 DOM 元素。

有一个名为 threex.domevents 的 Three.js 扩展，它允许您将所有鼠标事件附加到网格，例如单击、悬停、鼠标移入/鼠标移出。

它的作用基本上是当您触发 DOM 事件时在您的网格上进行光线投射，非常简单。它适用于最新的 r71。

用法：

var domEvents   = new THREEx.DomEvents(camera, renderer.domElement)

domEvents.addEventListener(mesh, 'click', function(event){
    console.log('you clicked on mesh', mesh)
}, false)

【讨论】：

我只有不到 5 天的时间来学习 three.js。我需要用这个做一个项目。对于轻松快速地学习three.js，您有什么建议？你能给我列出一些在线学习的好教程吗？
时间很短，因为three.js已经发展了很多。我将从查看Lee Stemkoskis examples 开始，因为它们很清楚并且代码有很好的文档记录。在编写官方three.js documentation 编码时，可以方便地查找参数或快速查看源代码，以防它不是最新的（有时会发生这种情况）。