Add Dots to Vertices in Three.js

Question

I have a wireframe sphere, and I'd like to add dots to the vertices. Something similar to this:

.:

Here's all my 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]

How do I add a dot to each vertex?

Answer 1

Here's an example how you can achieve similar results.

I've added an extra geometry type called IcosahedronGeometry and I'm using it's vertices to create points, for the lines I'm using MeshPhongMaterial with wireframe set to true.

You can change the point's size or replace them with shapes/textures.

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