我创建了一些几何体和一些移动和检测它的函数。 它工作得很完美，但现在我已将其插入到javascript UI库http://dhtmlx.com/中并且效果不佳。问题是这样的：例如使用raycaster，当几何体不在鼠标下时，它也会找到与几何体的交点。看起来所有几何图形都从原始位置向上移动并且绘制是假的。
我在这个网址中做了一个例子：http://www.felpone.netsons.org/web-threejs%20-%20Copia/contact_manager/prova1.html。您可以在控制台中看到完整的代码。
以下只是代码的一部分：
<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 );
}