three.js：是否可以在同一场景中渲染 THREE.Points 和 THREE.Mesh？答案

【问题标题】：three.js: is it possible to render THREE.Points and THREE.Mesh in the same scene?three.js：是否可以在同一场景中渲染 THREE.Points 和 THREE.Mesh？
【发布时间】：2016-05-11 03:38:22
【问题描述】：

我尝试将点对象和网格对象添加到同一个场景中。但是一旦我添加了网格，点就会消失。当我删除网格时，点再次出现。 three.js 是否可以同时在场景中使用它们？我现在正在使用 r76。它以前在 threejs r63 中与 Three.ParticleSystem 一起使用。这是一个错误还是错过了 r63 和 r76 之间的一些概念？

Three.Line 和 Three.Points 似乎也有相同的行为，但我也无法一起渲染。

对此有什么想法吗？提前谢谢你。

【问题讨论】：

它刚刚来找我！你的点和线在网格后面！
@dcromley：您下面的代码运行良好，谢谢。但是正如您在评论中假设的那样，我的点被 depthTest 过滤掉了，因为我用拾取射线将点精确地放在网格表面上。这适用于旧版本 (r63) 和 Projector.pickingRay。可能新的渲染器改变了renderingOrder。我可以通过给我的点一个负的 renderOrder 属性来强制它们首先被渲染来解决这个问题。
感谢您的反馈——例如，为了避免这个问题，我将“嘴唇”放在“脸”前面一点。

标签： three.js

【解决方案1】：

好吧，我会咬人（你没有任何代码）——有什么问题

// - - - - 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);

【讨论】：