Creating distinctively tinted vertices for every subdivision step is simple with the following technique

Question

Creating distinctively tinted vertices for every subdivision step is simple with the following technique

I am currently working on an application that utilizes different standard geometries, such as box geometry. The application can apply up to 5 levels of subdivision on the original geometry. I am facing challenges in coding a color-coding system for the vertices to visualize the disparity between the iterations/levels of subdivision.

My goal is to have the vertices of the original geometry (no subdivision applied) colored one way (e.g., purple), and then differentiate the new vertices created from the subdivision with another color (e.g., red) in subsequent iterations. Is there a method to achieve this?

UPDATE: While I have managed to add colored points to each vertex, I still encounter certain issues. Specifically, when it comes to shapes like cylinders, extra vertices seem to be present, creating confusion about their placement and how to remove them.

I am also struggling to distinguish between the various subdivision levels. Any insights or assistance would be highly appreciated.

https://i.sstatic.net/KcJDC.png

https://i.sstatic.net/9PgqY.png


import * as THREE from 'three';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import LoopSubdivision from './LoopSubdivision.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';

// Rest of the JavaScript code goes here...

javascript three.js 3d geometry vertices

Answer 1

Answer №1

I'm unsure of the specific behavior you're aiming for.

Here's a suggestion that might work: https://i.sstatic.net/7ayUj.png

body{
  overflow: hidden;
  margin: 0;
}

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e9f3e4e4c1b1afb0b4b9afb1">[email protected]</a>/build/three.module.js",
      "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9f5eff8f8ddadb3aca8a5b3ad">[email protected]</a>/examples/jsm/"
    }
  }
</script>
<script type="module">
import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let colors = ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f"].map(c => new THREE.Color(c));
console.log(colors);

for(let i = 0; i < colors.length; i++){
  
  let mesh = new THREE.Mesh(
    new THREE.IcosahedronGeometry(1, i),
    new THREE.MeshBasicMaterial({color: "gray", wireframe: true})
  );
  setPointsColor(mesh, i);
  
  mesh.position.x = (-(colors.length - 1) * 0.5 + i) * 3;
  
  scene.add(mesh);

}

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
})

function setPointsColor(mesh, colorIndex){
  let g = mesh.geometry;
  let p = new THREE.Points(g, new THREE.PointsMaterial({size: 0.2, color: colors[colorIndex]}));
  mesh.add(p);
}
</script>

Answer 2

I'm unsure of the specific behavior you're aiming for.

Here's a suggestion that might work: https://i.sstatic.net/7ayUj.png

body{
  overflow: hidden;
  margin: 0;
}

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81f5e9f3e4e4c1b1afb0b4b9afb1">[email protected]</a>/build/three.module.js",
      "three/addons/": "https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9de9f5eff8f8ddadb3aca8a5b3ad">[email protected]</a>/examples/jsm/"
    }
  }
</script>
<script type="module">
import * as THREE from "three";
import {OrbitControls} from "three/addons/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let colors = ["#f00", "#0f0", "#00f", "#ff0", "#0ff", "#f0f"].map(c => new THREE.Color(c));
console.log(colors);

for(let i = 0; i < colors.length; i++){
  
  let mesh = new THREE.Mesh(
    new THREE.IcosahedronGeometry(1, i),
    new THREE.MeshBasicMaterial({color: "gray", wireframe: true})
  );
  setPointsColor(mesh, i);
  
  mesh.position.x = (-(colors.length - 1) * 0.5 + i) * 3;
  
  scene.add(mesh);

}

renderer.setAnimationLoop(() => {
  controls.update();
  renderer.render(scene, camera);
})

function setPointsColor(mesh, colorIndex){
  let g = mesh.geometry;
  let p = new THREE.Points(g, new THREE.PointsMaterial({size: 0.2, color: colors[colorIndex]}));
  mesh.add(p);
}
</script>

Creating distinctively tinted vertices for every subdivision step is simple with the following technique

Answer №1

Similar questions

Using AngularJS to dynamically swap out {{post.title}} with a different HTML file

Using Bootstrap multiselect, you can easily control the display of a second menu based on the selection in the first menu

Encountering difficulty inserting ajax response into a specific div element

List of nested objects converted into a flat array of objects

Angular: utilizing a ng-false-value function

What is preventing the text of the elements from being updated?

I am attempting to link my Firebase real-time database with Cloud Firestore, but I am encountering import errors in the process

Guide on how to validate react-multiselect with the use of Yup validation schema

Library of User Interface components for React Native applications

A stateless component in React must always return a valid React element or null

Creating a full-width tab card with Bootstrap-Vue: A step-by-step guide

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

Obtain facial rotation using Three.js

creating a post action using Node.js with Express and Angular

Steps to completely eliminate all elements from an object using specific keys

Looking to display a single Angular component with varying data? I have a component in Angular that dynamically renders content based on the specific URL path

Enhancing your scheduling capabilities with Kendo UI Web Scheduler - Dynamically managing resources dataSource

Using C# Selenium WebDriver to interact with JavaScriptExecutor for handling prompt windows

The unusual spinning behavior of child elements in three.js

Sort through the data that is already populated and proceed to paginate within Mongodb