Is object position cloning performed by the three.js renderer?

I recently designed a small scene featuring 3 spheres connected by a triangle with vertices at the centers of the spheres. Surprisingly, when I moved one of the spheres, the triangle did not move with it as expected. It appears that the renderer may not be using the original position objects but rather clones of them.

Q: How can I prevent this cloning behavior and ensure that changing the position of one object affects another linked object? Or is there something wrong with my approach?

Below is the code snippet:

var width = window.innerWidth;
var height = window.innerHeight;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
var scene = new THREE.Scene;

var camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 10000);
camera.position = new THREE.Vector3(50, 50, 50);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position = camera.position;
scene.add(pointLight);

var sphere = [];
var sphereGeometry = new THREE.SphereGeometry(1, 8, 8);
var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
var triGeom = new THREE.Geometry();
for (var i = 0; i < 3; i++) {
    sphere[i] = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere[i].position = new THREE.Vector3(10 * i, 20 + 5 * (i - 1) ^ 2, 0);
    scene.add(sphere[i]);
    triGeom.vertices.push(sphere[i].position);
}
triGeom.faces.push(new THREE.Face3(0, 1, 2));
triGeom.computeFaceNormals();
var tri = new THREE.Mesh(triGeom, new THREE.MeshLambertMaterial({ side: THREE.DoubleSide, color: 0x00ff00 }));
scene.add(tri);

sphere[0].position.x += 10; // this changes both sphere and triangle vertex
renderer.render(scene, camera);
sphere[1].position.x += 10; // this changes only the sphere
renderer.render(scene, camera);

Answer №1

The reason for this issue is most likely related to the geometry caching functionality. It is necessary to remember to update triGeom.verticesNeedUpdate = true whenever there is a change in the vertex position.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to divide a string that includes commas into separate parts?

When splitting input strings by commas using .split(','), I encountered an issue with strings that contain commas within a single name. For example: "John, Smith". Typically, my strings appear like this: "Emily, Sasha Flora, Camille-O'neal" ...

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

Merging classes from several files into a unified namespace in typescript

When working with typescript, my goal is to instantiate a class by using its name as a string. After some research, I discovered the following approach: const googlecommand = Object.create((Commands as any)['GoogleCommand'].prototype); This lin ...

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

I'm currently trying to customize the appearance of these MUI tabs, specifically the tab color and bottom border color. Despite my attempts using makeStyles and other methods, I haven't been able to achieve the desired result. https://i.sstatic.n ...

Error retrieving data from JSON

I'm attempting to extract a value from the JSON data retrieved via Ajax. Take a look at the example I'm working on here: http://jsfiddle.net/NNrcp/6/. jQuery.ajax({ url:"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20geo.pla ...

IE8 experiencing issues with jQuery live click event functionality

I have this code snippet that is working perfectly fine in all browsers except for IE8. The #cal_popup_table element is dynamically added to the page. $("#cal_popup_table tbody tr td a").live('click', function() { $('.da ...

Tips on utilizing useStyle with ReactJS Material UI?

Is there a way to utilize a custom CSS file in the useStyle function of Material UI? I have created a separate useStyle file and would like to incorporate its styles. Can someone explain how this can be accomplished? input[type="checkbox"], inp ...

Utilize npm node to dynamically adjust screen resolution

Currently developing a game using electron. I'm experiencing FPS drops when running it in full-screen mode. To improve the game's performance, I need to change the screen resolution programmatically. My current resolution is 1280x800, but I would ...

While attempting to retrieve images from S3 using the AWS-SDK Nodejs, users may experience issues with downloading

My goal is to retrieve images from AWS S3 using the AWS-SDK for Node.js. Although the file is successfully downloaded and its size appears correct, it seems to be corrupted and displays a Decompression error in IDAT. async download(accessKeyId, secretAcce ...

When utilizing AJAX, certain web pages may contain a querystring

Encountering an issue with ajax when using query strings. Data can be successfully sent when the page does not have any query string and Info.aspx/Save works perfectly fine. However, when I include query strings and post the same data, it results in a HTTP ...

How can you ensure an element's height matches its width within an Ionic framework?

I am currently creating an application using the Ionic framework, and I am looking to set a square image as the background. The challenge is to ensure that the image scales appropriately for different screen resolutions; ideally, it should occupy the full ...

What could be causing my form to malfunction when attempting to submit data using Ajax and an external PHP script that is handling two string inputs?

Hello, I am facing an issue while trying to utilize Ajax to interact with a PHP file and submit both inputs (fullname and phonenumber). When I click the submit button, it simply refreshes the page without performing the desired action. Below is the code I ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

Submission form fails to go through or button for submitting is malfunctioning

After researching, I believed that this code would function properly. However, upon implementation, it is not working as expected. The main issue is that the form is failing to submit. How can I troubleshoot this problem? Furthermore, I am unable to re ...

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Hello everyone, I recently created a small AngularJS application and utilized a JSON server for my backend operations. Unfortunately, I am encountering an issue with the provider in my code. Upon running it, I am receiving errors as shown below: Uncaugh ...

What is the process of invoking a secondary "external" function with Nodejs, Expressjs, and bluebird?

Struggling with creating a nodejs application, a new area for me. I've managed to work with Promises and fetch data from a database. Take a look at the code below: myModel.js var express = require('express'); var app = express(); var Promi ...

Look for a file within a directory based on its name without knowing the file extension

I am seeking a way to locate a specific file in a designated directory based on its name, without prior knowledge of its file extension. app.get("/test/:id", (req, res) => { const mongo_id = req.params.id; const file_path = ...

Modifying Image on Tab Click using jQuery

In my current WordPress project, I am working on dynamically changing an image based on the tab that is clicked. I would like to use jQuery's fade effect to smoothly replace the image with a new one that is relative to the specific tab being clicked. ...

Steps to show a message on screen for a duration of 3 seconds using JavaScript

setTimeout(function(){ document.getElementById("alarmmsg").innerHTML=msg; },3000); The code above is successfully displaying the message but it's not going off the screen as expected. What might be causing this issue? ...

What is the speed of retrieving new data once it has been inserted into a firebase real-time database?

In the midst of developing my personal project using next.js, I've encountered an issue with a component that includes a getstaticprops function. This function scrapes a website and then posts the extracted data to a firebase realtime database. Howeve ...