How can you resize a circle in Three.js without resizing its outline?

Question

How can you resize a circle in Three.js without resizing its outline?

I'm currently using a THREE.Path to generate a Circular path and then utilizing a TubeGeometry to form a circle with transparent fill and an adjustable stroke thickness. My main query revolves around the process of scaling up the Circular path dynamically during runtime.

When attempting to access the vertices via mesh.vertices, I encounter unexpected results since I am fetching data from the Tube's Geometry rather than the original Path. Adjusting the path necessitates creating a new instance of TubeGeometry and updating the Tube with the updated geometry through mesh.geometry = newTubeGeometry, which unfortunately does not yield the desired outcome. Simply scaling the Tube causes its radius to increase as well, making it an unsuitable solution.

Any suggestions or thoughts on how to address this issue? Appreciate any input. Thanks!

javascript 3d three.js

Answer 1

Answer №1

To modify the geometry property effectively, creating a new instance of THREE.Mesh is necessary. Don't forget to also invoke geometry.dispose() on your previous geometry to clear up cached WebGLBuffer objects in the renderer. For further details, check out:

Answer 2

To modify the geometry property effectively, creating a new instance of THREE.Mesh is necessary. Don't forget to also invoke geometry.dispose() on your previous geometry to clear up cached WebGLBuffer objects in the renderer. For further details, check out:

Answer 3

Answer №2

Here is a demonstration of how you can perform a cool trick using THREE.TorusGeometry():

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

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.TorusGeometry(5, 0.5, 8, 32);
geometry.rotateX(Math.PI * -0.5);
geometry.vertices.forEach(v => {
  v.initPosition = new THREE.Vector3().copy(v);
});
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));

scene.add(mesh);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);

  time += clock.getDelta();

  geometry.vertices.forEach(v => {
    v // take a vertex
      .setY(0) // make it scalable in two dimensions (x, z)
      .normalize() // create a normal from it
      .multiplyScalar(Math.sin(time) * 2) // set the distance
      .add(v.initPosition); // add the initial position of the vertex
  });
  geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 4

Here is a demonstration of how you can perform a cool trick using THREE.TorusGeometry():

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

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.TorusGeometry(5, 0.5, 8, 32);
geometry.rotateX(Math.PI * -0.5);
geometry.vertices.forEach(v => {
  v.initPosition = new THREE.Vector3().copy(v);
});
var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));

scene.add(mesh);

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);

  time += clock.getDelta();

  geometry.vertices.forEach(v => {
    v // take a vertex
      .setY(0) // make it scalable in two dimensions (x, z)
      .normalize() // create a normal from it
      .multiplyScalar(Math.sin(time) * 2) // set the distance
      .add(v.initPosition); // add the initial position of the vertex
  });
  geometry.verticesNeedUpdate = true;

  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

How can you resize a circle in Three.js without resizing its outline?

Answer №1

Answer №2

Similar questions

The AWS API Gateway quickly times out when utilizing child_process within Lambda functions

Attempting to execute a code snippet using Express framework on the local server at port 3000

Effects of jQuery Show / Hide on adjacent select box operations

Tips for synchronizing text field and formula field content on MathQuill 0.10

Leveraging geoPosition.js in conjunction with colobox

Align elements on the left side with some space between them

Sinon - using callbacks in stubbed functions leading to test method exceeding time limit

How can I prevent event propagation in Vuetify's v-switch component?

I noticed that my API call is being executed twice within the router function

What is the best way to retrieve the Axios response using Express?

issues with jquery functionality on mobile devices

Utilize a directive every instance

Defining Higher Order Components in ReactJS: A comprehensive guide

Angular does not wait for the backend service call response in tap

The HTML slideshow is not automatically showing up as intended

Modify the collapse orientation in Bootstrap

Is it possible to animate the innerHTML of a div using CSS?

Using jQuery to remove the last two characters from a specified class

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

Angular : How can a single item be transferred from an array list to another service using Angular services?