Creating a 3D 'rope' using three.js to link two dynamic objects动态对象

Question

Creating a 3D 'rope' using three.js to link two dynamic objects动态对象

Currently, I am in the process of designing an industrial robot model consisting of moving parts, with movement controlled via a dat.GUI panel.

Here is a screenshot depicting the model

My current dilemma lies in figuring out how to create the rope component (identified as number 3 in the image) in a way that allows it to adjust its length dynamically as the 'hook' part (number 2) is moved up and down. It is crucial that the rope remains connected to both the hook and the base (number 1) throughout this movement.

In my initial attempts, I experimented with tube geometry. However, I encountered challenges in manipulating it effectively to achieve the desired outcome.

If you are interested, you can access the source code for this project here

Do you have any suggestions on a specific shape that may be easier to work with in this scenario? I welcome any feedback or tips you may have!

javascript graphics three.js 3d-modelling dat.gui

Answer 1

Answer №1

If I understand correctly, one way to achieve this is by using the scaling feature of the rope's mesh:

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

var base = new THREE.Mesh(new THREE.BoxGeometry(3, 1, 3), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
base.position.setY(5);
scene.add(base);

var hook = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
  color: "green",
  wireframe: true
}));
hook.position.set(0, -5, 0);
base.add(hook);

var rope = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1, 0.1), new THREE.MeshBasicMaterial({
  color: "blue"
}));
rope.geometry.translate(0, -0.5, 0);
rope.scale.y = Math.abs(hook.position.y);
base.add(rope);

var gui = new dat.GUI();
gui.add(hook.position, "y", -5, -1).onChange(v => {
  rope.scale.y = Math.abs(v) // adjust the scale of the rope along Y-axis
});

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

Answer 2

If I understand correctly, one way to achieve this is by using the scaling feature of the rope's mesh:

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

var base = new THREE.Mesh(new THREE.BoxGeometry(3, 1, 3), new THREE.MeshBasicMaterial({
  color: "red",
  wireframe: true
}));
base.position.setY(5);
scene.add(base);

var hook = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
  color: "green",
  wireframe: true
}));
hook.position.set(0, -5, 0);
base.add(hook);

var rope = new THREE.Mesh(new THREE.BoxGeometry(0.1, 1, 0.1), new THREE.MeshBasicMaterial({
  color: "blue"
}));
rope.geometry.translate(0, -0.5, 0);
rope.scale.y = Math.abs(hook.position.y);
base.add(rope);

var gui = new dat.GUI();
gui.add(hook.position, "y", -5, -1).onChange(v => {
  rope.scale.y = Math.abs(v) // adjust the scale of the rope along Y-axis
});

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/98/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.3/dat.gui.min.js"></script>

Creating a 3D 'rope' using three.js to link two dynamic objects动态对象

Answer №1

Similar questions

Creating a dynamic search bar with multiple input fields in HTML

Randomly undefined custom jQuery function

Creating a Social Media Platform with JavaScript, Bootstrap, JQuery, PHP, and Mysqil

extract keys and values from an array of objects

Encountering an error when attempting to include React TypeScript onChange with a Material UI switch component

Introducing HTML elements into pre-existing web pages

Looking for a Regex pattern for this example: 12345678/90 MM/DD/YYYY

What steps can I take to stop the textfield from automatically changing the ID "myid" to "myid-tokenfield" when using Tokenfield for Bootstrap?

How to create a looping animation effect for a div using CSS on hover

Tips for including parameters in the existing URL using AngularJS

Choosing an element in JQuery based on the value of its style property

The React Testing Library encountered an error: TypeError - actImplementation function not found

What exactly does the symbol "++" signify in the context of jQuery and JavaScript

Is it possible to access the ID element of HTML using a variable in jQuery?

Angular is unable to successfully send a post request to Node

Implementing a function in jQuery to create a "Check All" and "Uncheck All" button

Tips for optimizing search functionality in Angular to prevent loading all data at once

Issue with the useState hook not correctly updating a value

Ace Code Editor: Turn off highlighted line beneath cursor

Can you switch out the double quotation marks for single quotation marks?