Three.js删除后选择对象

Question

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.

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

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.

Thank you.

Answer 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