删除后，Three.js选择对象

Picking and objects code is one of the most popular:

挑选和对象代码是最受欢迎的代码之一:

function Picking(event) {
var raycaster = new THREE.Raycaster();
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects);
if (intersects.length > 0) {
    if (INTERSECTED != intersects[0].object) {

    }
} else {
     INTERSECTED = null;
}
}

The description: in scene are two objects - cube and sphere. Sphere is first to camera and cube is second. The Sphere has ID1 and cube ID2. Picking is working.

描述:场景中有两个对象 - 立方体和球体。球体是第一个到相机,立方体是第二个。 Sphere具有ID1和立方体ID2。采摘工作正在进行中。

The problem: after deleting the sphere (scene.remove(sphere)); Picking is giving the ID1, so, it seems like sphere is invisible. What is the problam? The picture of the example: Picture

问题:删除球体后(scene.remove(sphere));拣选给出ID1,因此,看起来球体是不可见的。什么是problam?示例图片:图片

This code is not giving the result:

此代码未给出结果:

for (i = sphere.children.length - 1; i >= 0 ; i--) {
       object = sphere.children[i];
       object.geometry.remove;
       object.material.remove;
       object.geometry.dispose();
       object.material.dispose();
       scene.remove(object);
       sphere.remove(object);
   }

or

recur(sphere);
    for (var i in objects) {
        objects[i].geometry.remove;
        objects[i].material.remove;
        objects[i].geometry.dispose();
        objects[i].material.dispose();
        scene.remove(objects[i]);
        sphere.remove(objects[i]);
    }

function recur(obj) {
  if (obj instanceof THREE.Mesh) {
    objects.push(obj);
  }

  for (var i in obj.children) {
    recur(obj.children[i]);
  }
}

The code that add objects:

添加对象的代码:

var ObjLoader = new THREE.ObjectLoader();
var ii;
var group = new THREE.Object3D();
var oldModel = scene.getObjectByName('group');
if (oldModel !== undefined) { scene.remove(oldModel); }

      ObjLoader.load("path/model.json", addModelToScene);
      group.name = "group";
      scene.add(group);


function addModelToScene(model) {
     recur(model);
    for (var i in objects) {
        objects[i].castShadow = true;
        objects[i].receiveShadow = true;
    }
    model.name = "ModelName";
    group.add(model)
 }

So, The .json model consists of some objects (1..n); This .json model is added into group. With picking the side of the cube (may be material) is selectable, but not removable. but the position can be changed.

因此,.json模型由一些对象组成(1..n);这个.json模型被添加到组中。选择立方体的一侧(可能是材料)是可选择的,但不可移动。但是这个位置可以改变。

Thank you.

1 个解决方案

#1

Change your picking logic a little, store all your objects into array when creating them:

稍微更改您的选择逻辑,在创建它们时将所有对象存储到数组中:

 /*var objects = [];
  var  group = new THREE.Object3D();
 create your mesh add to array*/
 objects.push(MyMesh);
 /*now we have a reference all the time in objects[0] , objects[1]*/
 objects[0].displose();   check syntax been a while*/

customMaterial = new THREE.ShaderMaterial( 
{
    uniforms: customUniforms,
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
    //wireframe: true,
    side: THREE.FrontSide 

}   );


function ground (){

var map = new THREE.PlaneGeometry(1024,1024, 128, 128);//Use planebufferGeo

map.dynamic = true;

_terrain = new THREE.Mesh(  map, customMaterial );

_terrain.material.needsUpdate = true;

_terrain.geometry.dynamic = true;

_terrain.geometry.vertexColors = true; 

_terrain.material.uvsNeedUpdate = true;

_terrain.geometry.normalsNeedUpdate = true;

_terrain.rotation.x = -Math.PI / 2;

objects.push(_terrain);

scene.add(_terrain );
}

So I used this in a situation where it was a picking game type, I used an array to store the mesh and i could manipulate the vertices / faces etc edit the array to make changes. It was an easier way to compare things and check data.

所以我在一个采摘游戏类型的情况下使用它,我使用一个数组存储网格,我可以操纵顶点/面等编辑数组进行更改。这是一种比较事物和检查数据的简单方法。

function animate() {

var raycaster = new THREE.Raycaster();

raycaster.setFromCamera(mouse, camera);

var intersects = raycaster.intersectObjects(objects);

if ( intersects.length > 0 ) {
    var faceIndex = intersects[0].faceIndex;
    var obj = intersects[0].object;
    var geom = obj.geometry;
     //etc