three.js: is it possible to render THREE.Points and THREE.Mesh in the same scene?

Question

I tried to add a Points Object and a Mesh Object into the same scene. But once I add the Mesh the Points disappear. When I remove the Mesh the Points appear again. Is it possible with three.js to have both in the scene at the same time? I'm using r76 now. It worked before with Three.ParticleSystem in threejs r63. Is this a bug or missed I something conceptual between r63 and r76?

Same behaviour seems to be with Three.Line and Three.Points which I can't render together either.

Any ideas about that? Thank you in advance.

IT JUST CAME TO ME! Your points and lines are behind the mesh! — dcromley
@dcromley: your code below works perfectly, thanks for that. But as you assume in the comment my points are filtered out by the depthTest, as I put the points exactly on the mesh surface with a picking ray. This worked fine with the older version (r63) and the Projector.pickingRay. Probably the new renderer changed the renderingOrder. I could fix the issue by giving my points a negative renderOrder property to force them being rendered first. — mcauer
Thanks for the feedback --and I have, for example, put "lips" a little in front of a "face" to avoid that issue. — dcromley

dcromley dcromley · Accepted Answer · 2016-05-10T19:38:22

Well, I'll bite (you don't have any code) -- what's wrong with

// - - - - points
  geometry = new THREE.Geometry();
  material = new THREE.PointsMaterial( { size:.1 } );
  for (i1=1; i1<=10; i1+=1) {
    var x1 = Math.random()*2-1;
    var y1 = Math.random()*2-1;
    var z1 = Math.random()*2-1;
    geometry.vertices.push(new THREE.Vector3(x1,y1,z1));
  }
  object3d = new THREE.Points(geometry, material);
  scene.add(object3d);
// - - - - line
  geometry = new THREE.Geometry();
  geometry.vertices = [ new THREE.Vector3(-1,1,0), new THREE.Vector3(0,-1,0), new THREE.Vector3(1,1,0) ];
  material = new THREE.LineBasicMaterial( { color:0xffffff } );
  object3d = new THREE.Line(geometry, material);
  scene.add(object3d);
// - - - - sphere
  geometry = new THREE.SphereGeometry(.5);
  material = new THREE.MeshPhongMaterial( {color:0xffffff} );
  mesh = new THREE.Mesh(geometry, material);
  mesh.scale.x = 2;
  mesh.position.set(0, 1, 0);
  scene.add(mesh);

three.js: is it possible to render THREE.Points and THREE.Mesh in the same scene?

1 Answers