创建可点击的多边形three.js

问题描述

我使用three.js来创建可点击的多边形，当我以这种方式创建多边形时

I'm using three.js for creating clickable polygons, when i create polygon in this way

var geo = new THREE.Geometry();
            geo.vertices.push(new THREE.Vector3(0.3, 0.3, 0.5));
            geo.vertices.push(new THREE.Vector3(0.3, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.4, 0.5));
            geo.vertices.push(new THREE.Vector3(0.6, 0.35, 0.5));
            geo.vertices.push(new THREE.Vector3(0.4, 0.3, 0.5));

            for (var face = 0 ; face < 5 - 2; face++) {
                // this makes a triangle fan, from the first +Y point around
                geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
            }

            var mesh = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));
            geo.computeFaceNormals();

            layer.add(mesh);
            objects.push(mesh);

它显示，但多边形不可点击.如果我以这种方式创建

it displaying, but the polygon is not clickable.If I cretae in this way

var geometry = new THREE.CubeGeometry(0.02, 0.02, 0.02);
            var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 0.5 }));

            object.position.x = 0.5;
            object.position.y = 0.5;
            object.position.z = 0.5;

            layer.add(object);
            objects.push(object);

一切正常，立方体可点击，但我需要一个多边形.点击事件方法

everything is work fine and cube is clickable, but I need a polygon.Click Event method

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);
        }
    }

我有太多不同的多边形如何创建可点击的多边形?

I have too much different polygonsHow to create clickable polygon?

推荐答案

您有两个错误.

你的 OrthographicCamera 构造函数参数不正确——它是倒置的，近平面在相机后面.

Your OrthographicCamera constructor args are incorrect -- it is upside down, and the near plane is behind the camera.

//this.camera = new THREE.OrthographicCamera(0, 1, 0, 1, -3000, 3000);
this.camera = new THREE.OrthographicCamera(0, 1, 1, 0, 1, 3000);

几何上的缠绕顺序是顺时针；应该是逆时针(CCW).

The winding order on your geometry is clockwise; it should be counter-clockwise (CCW).

//geo.faces.push(new THREE.Face3(0, face + 1, face + 2));
geo.faces.push(new THREE.Face3(0, face + 2, face + 1));

提示:使用three.js的非缩小版本进行调试.此外，下载本地副本供您使用.

Tip: debug with the non-minified version of three.js. Also, download a local copy for your use.

three.js r.60

three.js r.60

这篇关于创建可点击的多边形three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！