三.js 创建数千个可点击元素的最佳方法是什么？答案

【问题标题】：three.js What is the best approach to create a thousands elements that can be clickable?三.js 创建数千个可点击元素的最佳方法是什么？
【发布时间】：2013-09-18 11:18:55
【问题描述】：

我需要绘制一个具有图像纹理的数千个正方形，该纹理必须具有稳定的尺寸，尽管缩放并且它必须是可点击的。所有正方形的图像纹理都相同。

使用 ParticleSystem 不允许我让它可点击。

如果我使用 CubeGeometry，我必须在每个缩放事件上进行缩放，而且速度非常缓慢。创建每个人都可以点击的数千个元素的最佳方法是什么？

我使用 THREE.WebGLRenderer 61。

事件点击处理程序：

function onDocumentMouseClick(event) {
        layerMap.update();
        var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
        var ray = projector.pickingRay(vector, camera);
        var intersects = ray.intersectObjects(objects);
        if (intersects.length > 0) {
            intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
        }
    }

【问题讨论】：

数千纹理 THREE.CubeGeometry...听起来太多了，无法响应。一个古怪的想法：如何将您的 3d 画布限制为包含数千个对象的“视口”（在视口中仅渲染 50-100 个立方体）。要处理缩放过程，您可以覆盖画布（2d 上下文）以呈现缩放。 2d 在缩放过程中不会响应——但您可能不需要它。然后当缩放完成后，隐藏 2d 画布并在新的视口位置以 3d 继续。

标签： javascript canvas html5-canvas three.js

【解决方案1】：

我找到了解决方案，我使用 ParticleSystem 来显示许多带有纹理的对象。在单击事件中，我检查所有顶点以找到最接近单击点的顶点，如果距离足够近，我将调用所需的方法。它的工作速度非常快。

【讨论】：