在Three.js中为顶点添加圆点

Question

我有一个线框球体，希望在顶点处添加点。与此类似：。

这是我的全部js代码：

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer( { alpha: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

var geometry = new THREE.SphereGeometry( 3.25, 32, 20 );
var material = new THREE.MeshLambertMaterial( { color: 0x43CC4C, wireframe: true } );

var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 80;
pointLight.position.y = 80;
pointLight.position.z = 130;
scene.add(pointLight);

camera.position.z = 5;

function render() {
    renderer.render( scene, camera );
}

render();

[这里是代码片段]

如何在每个顶点上添加一个点？

- kanga

Answer 1

这里有一个例子，演示如何实现类似的效果。

我添加了一个名为“IcosahedronGeometry”的额外几何类型，并使用它的顶点创建点，对于线条，我使用了“MeshPhongMaterial”，并将“wireframe”设置为true。

您可以更改点的大小或用图形/纹理替换它们。

// Extra geometry
THREE.IcosahedronGeometry = function(radius, detail) {
  var t = (1 + Math.sqrt(5)) / 2;
  var vertices = [-1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 0,
    0, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t,
    t, 0, -1, t, 0, 1, -t, 0, -1, -t, 0, 1
  ];
  var indices = [
    0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11,
    1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8,
    3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9,
    4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1
  ];
  THREE.PolyhedronGeometry.call(this, vertices, indices, radius, detail);
  this.type = 'IcosahedronGeometry';
  this.parameters = {
    radius: radius,
    detail: detail
  };
};

THREE.IcosahedronGeometry.prototype = Object.create(THREE.PolyhedronGeometry.prototype);
THREE.IcosahedronGeometry.prototype.constructor = THREE.IcosahedronGeometry;

// Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({
  antialias: 1
});

renderer.setClearColor(0xf7f7f7);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.fog = new THREE.Fog(0xd4d4d4, 8, 20);

// Create vertex points
var mesh = new THREE.IcosahedronGeometry(10, 1); // radius, detail
var vertices = mesh.vertices;
var positions = new Float32Array(vertices.length * 3);
for (var i = 0, l = vertices.length; i < l; i++) {
  vertices[i].toArray(positions, i * 3);
}

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));

var material = new THREE.PointsMaterial({
  size: 0.4,
  vertexColors: THREE.VertexColors,
  color: 0x252525
});
var points = new THREE.Points(geometry, material);

var object = new THREE.Object3D();

object.add(points);



object.add(new THREE.Mesh(
  mesh,
  new THREE.MeshPhongMaterial({
    color: 0x616161,
    emissive: 0xa1a1a1,
    wireframe: true,
    fog: 1
  })

));

scene.add(object);

camera.position.z = 20;

var render = function() {
  requestAnimationFrame(render);

  object.rotation.x += 0.01;
  object.rotation.y += 0.01;

  renderer.render(scene, camera);
};

render();

body {
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

- Stubbies

---

不错，但是你的变量名非常令人困惑。mesh 是一个几何体，sphere 是一个点云，而 mesh2 则是一个 Object3D。transparent 应该是一个布尔值。 - WestLangley

@WestLangley 我已经将它们改名，使其更有意义，并删除了 transparent 参数，因为对于 LineBasicMaterial 不存在该参数。 - Stubbies

是的，它是Material的一个属性。 - WestLangley

太好了！谢谢大家。 - kanga