Enhance Your Three.js Experience: Implementing Dots on Vertices

Question

Enhance Your Three.js Experience: Implementing Dots on Vertices

I am working with a wireframe sphere and looking to add dots to the vertices. Something similar to this image: https://i.sstatic.net/pzNO8.jpg.

Below is all of my JavaScript code:


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

[View code on CodePen]

My question is: How can I add a dot to each vertex?

javascript three.js

Answer 1

Answer №1

Let me demonstrate how you can achieve similar outcomes:

I've introduced a new kind of geometry named IcosahedronGeometry, utilizing its vertices to form points, and for the lines, I'm utilizing MeshPhongMaterial with wireframe set as true.

You have the ability to adjust the size of the points or replace them with various shapes/textures.

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

// Setting up the 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);

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

Answer 2

Let me demonstrate how you can achieve similar outcomes:

I've introduced a new kind of geometry named IcosahedronGeometry, utilizing its vertices to form points, and for the lines, I'm utilizing MeshPhongMaterial with wireframe set as true.

You have the ability to adjust the size of the points or replace them with various shapes/textures.

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

// Setting up the 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);

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

Enhance Your Three.js Experience: Implementing Dots on Vertices

Answer №1

Similar questions

Is there an error when iterating through each table row and extracting the values in the rows?

Error: Encountering difficulty locating the necessary stylesheet for import during the construction of an Angular15 build, while also utilizing Kendo UI

The function queryDatabases is not supported in the DocumentDB JavaScript API

Angular JS Tab Application: A Unique Way to Organize

NextJs issue: Your `getStaticProps` function failed to return an object

The Rtk query function does not generate endpoints

Guide on integrating database information into an array with Vue.js

What is the reason for JSON.parse throwing errors on the same strings that eval does not?

Developing a Typescript module, the dependent module is searching for an import within the local directory but encounters an issue - the module cannot be found and

The button will continue to be enabled even if the textfield is empty

Is there a simple method to refresh a JSP or Spring MVC page using AJAX?

What could be causing my directive to not display the String I am trying to pass to it?

Using JQuery's $.post function can be unreliable at times

Encountering difficulties in loading my personal components within angular2 framework

Display a loading progress bar with jQuery AJAX as your single page website content loads

Capture and handle JavaScript errors within iframes specified with the srcDoc attribute

The Material-ui paper component fails to display on the screen

Looking to obtain the coordinates of a draggable element?

What is the process for outputting JSON data from a script page?

I am currently in the process of cross-referencing the tags that have been retrieved with those that have been selected or created. If a tag does not exist