I have created some geometry and some functions to move and detect it. It works perfect but now I have inserted it into a javascript UI library http://dhtmlx.com/ and doesn't work well. The problem is this: for example using raycaster, it find intersection with geometry also when geometry isn't under the mouse. It looks like all geometries are moved up from original position and draw is a fake.
I made an example in this url : http://www.felpone.netsons.org/web-threejs%20-%20Copia/contact_manager/prova1.html. You can see the complete code in the console.
Below only a part of code:
<html lang="en">
<head>
<title>Stereos + Three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum- scale=1.0">
<script src="codebase/dhtmlx.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlx.css">
<link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<body>
<script src="threejs/Three.js"></script>
<script src="threejs/Detector.js"></script>
<script src="threejs/OrbitControls.js"></script>
<script src="threejs/BufferAttribute.js"></script>
<script src="threejs/BufferGeometry.js"></script>
<script src="threejs/EdgesHelper.js"></script>
<script src="threejs/THREEx.KeyboardState.js"></script>
<script src="threejs/THREEx.FullScreen.js"></script>
<script src="threejs/THREEx.WindowResize.js"></script>
<!-- ------------------------------------------------------------->
<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>
<!-- <input type="button" style="position: absolute; left:0px; top:0px; z-index:1;" onclick="params()"/> -->
<script>
var FONT_SIZE = 22;
var container, scene, camera, renderer, controls, scene_text,raycaster, projector, mouse2D;
var plane,INTERSECTED, SELECTED;
var verticesSphere = [];
var geometryContainer=[];
var offset=offset = new THREE.Vector3();
var layout,menu,toolbar;
dhtmlx.image_path = "codebase/imgs/";
dhtmlxEvent(window,"load",function(){
var layout = new dhtmlXLayoutObject(document.body,"1C");
layout.cells("a").setText("Contacts");
var obj = document.getElementById("ThreeJS");
layout.cells("a").attachObject(obj);
menu = layout.attachMenu(); //initializes dhtmlxMenu
menu.setIconsPath("icons/"); //sets the path to custom icons
menu.loadXML("data/menu.xml"); //loads items from the "data/menu.xml" file to the menu
toolbar = layout.attachToolbar(); //initializes dhtmlxToolbar
toolbar.setIconsPath("icons/"); //sets the path to custom images
toolbar.loadXML("data/toolbar.xml"); //loads items from the "data/toolbar.xml" file to the toolbar
});
init();
render();
function init()
{
// SCENE
scene = new THREE.Scene();
scene_text = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth-5, SCREEN_HEIGHT = window.innerHeight-5;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.01, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
var r = 4, phi = Math.PI/4, theta = Math.PI/4;
camera.position.set(r*Math.cos(phi)*Math.sin(theta),r*Math.sin(phi), r*Math.cos(phi)*Math.cos(theta));
// RENDERER
if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
else
renderer = new THREE.CanvasRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.autoClear = false;
// CONTAINER
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );
// EVENTS
THREEx.WindowResize(renderer, camera);
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
// CONTROLS
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );
controls.target = new THREE.Vector3(0, 0, 0);
// LIGHTS
var light1 = new THREE.PointLight(0xffffff);
light1.position.set(0,1000,1000);
scene.add(light1);
var light2 = new THREE.PointLight(0xffffff);
light2.position.set(0,-1000,-1000);
scene.add(light2);
/////////////
// OBJECTS //
/////////////
geometry0 = new THREE.Geometry();
geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)];
geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)];
geometry0.computeFaceNormals();
geometry0.computeVertexNormals();
var material0 = new THREE.MeshBasicMaterial( { color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0 });
mesh0 = new THREE.Mesh( geometry0, material0);
scene.add(mesh0);
egh0 = new THREE.EdgesHelper( mesh0, 0x000 );
egh0.material.linewidth = 2;
scene.add( egh0 );
geometry1 = new THREE.Geometry()
geometry1.vertices = [new THREE.Vector3(-3.43321e-11, -0.5, 0.5), new THREE.Vector3(1.29324e-12, -0.5, -0.5), new THREE.Vector3(-0.5, -0.5, 4.98925e-11), new THREE.Vector3(-0.5, -0.166667, -0.5), new THREE.Vector3(-0.5, 0.166667, -0.5), new THREE.Vector3(-0.5, 0.166667, 0.5), new THREE.Vector3(-0.5, -0.166667, 0.5), new THREE.Vector3(0.5, -0.166667, 0.5), new THREE.Vector3(0.5, -0.5, 1.37552e-11), new THREE.Vector3(0.5, -0.166667, -0.5), new THREE.Vector3(0.5, 0.166667, -0.5), new THREE.Vector3(-9.97714e-12, 0.5, -0.5), new THREE.Vector3(-0.5, 0.5, 2.6745e-12), new THREE.Vector3(-6.41701e-13, 0.5, 0.5), new THREE.Vector3(0.5, 0.166667, 0.5), new THREE.Vector3(0.5, 0.5, 3.07725e-11)];
geometry1.faces = [new THREE.Face3(1, 3, 2), new THREE.Face3(6, 0, 2), new THREE.Face3(7, 8, 0), new THREE.Face3(8, 9, 1), new THREE.Face3(11, 12, 4), new THREE.Face3(12, 13, 5), new THREE.Face3(15, 11, 10), new THREE.Face3(15, 14, 13), new THREE.Face3(2, 0, 8), new THREE.Face3(2, 8, 1), new THREE.Face3(12, 5, 6), new THREE.Face3(12, 6, 2), new THREE.Face3(12, 2, 3), new THREE.Face3(12, 3, 4), new THREE.Face3(14, 7, 0), new THREE.Face3(14, 0, 6), new THREE.Face3(14, 6, 5), new THREE.Face3(14, 5, 13), new THREE.Face3(10, 9, 8), new THREE.Face3(10, 8, 7), new THREE.Face3(10, 7, 14), new THREE.Face3(10, 14, 15), new THREE.Face3(15, 13, 12), new THREE.Face3(15, 12, 11), new THREE.Face3(9, 10, 11), new THREE.Face3(9, 11, 4), new THREE.Face3(9, 4, 3), new THREE.Face3(9, 3, 1)];
geometry1.computeFaceNormals();
geometry1.computeVertexNormals();
var material1 = new THREE.MeshBasicMaterial( { color: 0x00ff00, transparent: true, opacity: 0.5 });
mesh1 = new THREE.Mesh( geometry1, material1);
scene.add(mesh1);
egh1 = new THREE.EdgesHelper( mesh1, 0x000 );
egh1.material.linewidth = 2;
scene.add( egh1 );
geometry2 = new THREE.Geometry()
geometry2.vertices = [new THREE.Vector3(0.5, -0.5, 0), new THREE.Vector3(0.5, -0.166667, 0.5), new THREE.Vector3(0, -0.5, 0.5), new THREE.Vector3(0.5, -0.5, 0.5)];
geometry2.faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(0, 3, 1), new THREE.Face3(1, 3, 2), new THREE.Face3(2, 3, 0)];
geometry2.computeFaceNormals();
geometry2.computeVertexNormals();
var material2 = new THREE.MeshBasicMaterial( { color: 0xffff00 });
mesh2 = new THREE.Mesh( geometry2, material2);
scene.add(mesh2);
egh2 = new THREE.EdgesHelper( mesh2, 0x000 );
egh2.material.linewidth = 2;
scene.add( egh2 );
projector = new THREE.Projector();
mouse2D = new THREE.Vector3(0, 10000, 0.5);
plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffff00, opacity: 0.25 } ) );
plane.visible = false;
scene.add( plane );
}