Three.js Picking is working with custom geometry having multiple materials -

Three.js Picking is working with custom geometry having multiple materials -

here jsfiddle: here

here previous version jsfiddle without implementing picking, if want seek start: here

my custom geometry in scene having multiple materials couldn't pick them. please help me resolve issue.

<script type="text/javascript"> var subset; var meshmaterial, camera, projector = new three.projector(), scene, renderer, container; var width = window.innerwidth, height = window.innerheight; var mouse = { x: 0, y: 0 }, intersected; function change() { subset = new array(); init(); animate(); } meshmaterial = [ new three.meshlambertmaterial({ color: 0xffffff, opacity: 0.6, depthwrite: false, depthtest: false, vertexcolors: three.vertexcolors }), new three.meshlambertmaterial({ color: 0xffffff, opacity: 1, depthwrite: false, depthtest: false, vertexcolors: three.vertexcolors })]; // photographic camera = new three.combinedcamera(width / 2, height / 2, 70, 0.1, 1000, -1000, 1000); camera.position.z = 45; scene = new three.scene(); function init() { (var = 0; < document.getelementbyid('txtn').value; i++) { var conegeo = new three.mesh(getgeometry(meshmaterial), new three.meshfacematerial(meshmaterial)); subset.push(conegeo); conegeo.doublesided = true; conegeo.overdraw = true; conegeo.position.set(i * (0.5 - math.random()) * scale, (0.5 - math.random()) * scale, (0.5 - math.random()) * scale); conegeo.updatematrix(); conegeo.matrixautoupdate = false; scene.add(conegeo); } document.addeventlistener('mousemove', ondocumentmousemove, false); } var scale = 10; var lite = new three.directionallight(0xffffff, 0.6); light.position.y = 1; light.position.x = 1; light.position.z = 1; scene.add(light); lite = new three.directionallight(0xffffff, 0.6); light.position.y = -1; light.position.x = -1; light.position.z = -1; scene.add(light); lite = new three.directionallight(0xffffff, 0.6); light.position.y = 1; light.position.x = 0; light.position.z = 0; scene.add(light); renderer = new three.webglrenderer({ antialias: false }); renderer.setclearcolorhex(0xffffff, 1); renderer.setsize(window.innerwidth, window.innerheight); container = document.getelementbyid('container'); container.appendchild(renderer.domelement); function ondocumentmousemove(event) { event.preventdefault(); mouse.x = (event.clientx / window.innerwidth) * 2 - 1; mouse.y = -(event.clienty / window.innerheight) * 2 + 1; } function animate() { requestanimationframe(animate); render(); } function render() { var vector = new three.vector3(mouse.x, mouse.y, 1); projector.unprojectvector(vector, camera); var raycaster = new three.raycaster(camera.position, vector.sub(camera.position).normalize()); var intersects = raycaster.intersectobjects(scene.children); if (intersects.length > 0) { if (intersected != intersects[0].object) { if (intersected) intersected.material.emissive.sethex(intersected.currenthex); intersected = intersects[0].object; intersected.currenthex = intersected.material.emissive.gethex(); intersected.material.emissive.sethex(0xff0000); } } else { if (intersected) intersected.material.emissive.sethex(intersected.currenthex); intersected = null; } renderer.render(scene, camera); } function getgeometry(meshmaterial) { var cone; // objects var geo = new three.geometry(); geo.vertices.push(new three.vector3(0, 0, 0)); geo.vertices.push(new three.vector3(-0.5, 0.5, 10)); geo.vertices.push(new three.vector3(0.5, 0.5, 10)); geo.vertices.push(new three.vector3(-0.5, -0.5, 10)); geo.vertices.push(new three.vector3(0.5, -0.5, 10)); geo.faces.push(new three.face3(0, 1, 2)); geo.faces[0].vertexcolors[0] = new three.color(0xcc00cc); geo.faces[0].vertexcolors[1] = new three.color(0xcc00cc); geo.faces[0].vertexcolors[2] = new three.color(0xcc00cc); geo.faces.push(new three.face3(4, 3, 0)); geo.faces[1].vertexcolors[0] = new three.color(0xcc00cc); geo.faces[1].vertexcolors[1] = new three.color(0xcc00cc); geo.faces[1].vertexcolors[2] = new three.color(0xcc00cc); geo.faces.push(new three.face3(3, 1, 0)); geo.faces[2].vertexcolors[0] = new three.color(0xcc00cc); geo.faces[2].vertexcolors[1] = new three.color(0xcc00cc); geo.faces[2].vertexcolors[2] = new three.color(0xcc00cc); geo.faces.push(new three.face3(0, 2, 4)); geo.faces[3].vertexcolors[0] = new three.color(0xcc00cc); geo.faces[3].vertexcolors[1] = new three.color(0xcc00cc); geo.faces[3].vertexcolors[2] = new three.color(0xcc00cc); geo.faces.push(new three.face3(2, 1, 4)); geo.faces[4].vertexcolors[0] = new three.color(0x0000ff); geo.faces[4].vertexcolors[1] = new three.color(0x0000ff); geo.faces[4].vertexcolors[2] = new three.color(0x0000ff); geo.faces.push(new three.face3(1, 3, 4)); geo.faces[5].vertexcolors[0] = new three.color(0x0000ff); geo.faces[5].vertexcolors[1] = new three.color(0x0000ff); geo.faces[5].vertexcolors[2] = new three.color(0x0000ff); geo.faces[4].materialindex = 1; geo.faces[5].materialindex = 1; (var f = 0; f < geo.faces.length; f++) { if (typeof geo.faceuvs[0][f] == "undefined") { geo.faces[f].materialindex = geo.faces[f].materialindex || 0; //geo.faceuvs[0][f] = new three.uv(0,1); geo.faceuvs[0][f] = new three.vector2(0, 1); var faceuv = [ new three.vector2(0, 1), new three.vector2(1, 1), new three.vector2(1, 0), new three.vector2(0, 0)]; geo.facevertexuvs[0][f] = faceuv; } } geo.computecentroids(); geo.computefacenormals(); geo.computevertexnormals(); geo.computetangents(); geo.materials = meshmaterial; homecoming geo; } </script>

three.js picking ray-picking mouse-picking