javascript - 在 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();

[codepen here]

如何为每个顶点添加一个点？

Answer 1

这是一个如何获得类似结果的示例。

我添加了一个名为 IcosahedronGeometry 的额外几何类型，我使用它的顶点来创建点，因为我使用 MeshPhongMaterial 和 线框设置为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>