Issue with updating Three.js Mesh position

I have been working on mapping lat/long data to a sphere. I am successfully generating vectors with different positions and setting the cube mesh position accordingly. However, when I merge and display the cubes, it seems like there is only one cube showing up. It appears that all the cubes are located at the same position. I'm trying to figure out where I might be making a mistake in my code. (latLongToSphere function returns a vector);

// this function converts the data into markers displayed on the screen
function renderData() {

    // create geometry to hold all the cubes
    var geom = new THREE.Geometry();

    // add material for non-reflective cubes
    var cubeMat = new THREE.MeshLambertMaterial({color: 0xffffff, opacity: 0.6, emissive: 0xffffff});

    for (var i = quakes.length - 1; i >= 0; i--) {

        var objectCache = quakes[i]["geometry"]["coordinates"];

        // calculate starting position for the cube
        var position = latLongToSphere(objectCache[0], objectCache[1], 600);

        // create the cube
        var cubeGeom = new THREE.BoxGeometry(2, 2, 2000, 1, 1, 1),
            cube = new THREE.Mesh(cubeGeom, cubeMat);

        // set cube's position correctly
        cube.position.set(position.x, position.y, position.z);
        cube.lookAt(new THREE.Vector3(0, 0, 0));

        // merge with main model
        geom.merge(cube.geometry, cube.matrix);
    }

    // create a new mesh containing all the merged meshes
    var combined = new THREE.Mesh(geom, cubeMat);

    // add the total mesh to the scene
    scene.add(combined);
}

Answer №1

Make sure to always refresh the mesh matrix before combining its shape:

sphere.updateMatrix();
geometry.merge(sphere.geometry, sphere.matrix);

Example on code playground: http://example.com/codeplayground/123/

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

Using tsc with skipLibCheck flag will still perform checks on the node_modules directory

When I run the CLI command npx tsc --noEmit --skipLibCheck, I still encounter errors: node_modules/@types/node/util.d.ts:1631:41 - error TS1005: '(' expected. 1631 keys(): IterableIterator<string>; ...

My HTML gets rearranged by browsers, causing a change in appearance

UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...

How can I change the background color of the initial word in a textbox?

In my HTML, I have a text box input. While I am familiar with how to use CSS to set the background color of the entire textbox using background-color, I am wondering if it is possible to specifically target and change the background color of only the first ...

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

Generating a multidimensional associative array based on user inputs from a form

What is the best way to transform form input data into a multidimensional associative array? This is how the form appears: <div id="items"> <h4>Engraving Text</h4> <div class="item" data-position="1"> <h4 id="en ...

Why does `window.location.reload()` only refresh the home page and not the other pages when using Angular?

After transitioning from the home page to the menu page, I expect the menu page to refresh automatically once. However, when implementing the code below, the home page is refreshed first before navigating to the menu page without an auto-refresh. 1)Initia ...

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascr ...

Tips on hovering over information retrieved from JSON data

Within my code, I am extracting information from a JSON file and placing it inside a div: document.getElementById('display_area').innerHTML += "<p>" + jsonData[obj]["name"] + "</p>"; I would like the abi ...

I am trying to set up an AJAX call in my index.html to connect to a React endpoint, but instead of accessing the intended page, I am getting

I am attempting to execute an AJAX call in my static file index.html to a React endpoint, but instead of the desired response, I am seeing the React homepage. Here is the code snippet from my index.html: <div id="data"></div> <scr ...

Simple Easyui design featuring collapsible regions

I'm currently working on a frontend application and I've decided to utilize the Easyui library to help with managing the page layout. One particular section of code is causing me some trouble: <div id="stgis-app" class="stgis stgis-content e ...

Having difficulty retrieving additional arguments within createAsyncThunk when dispatched

When attempting to update the user thunk action by passing an axios instance as an extra argument, I am encountering difficulties in accessing the extra argument. Despite being able to access other fields such as getState</coode> and <code>disp ...

When PHP is connected to the database, Ajax remains inactive and does not perform any tasks

I am currently working on setting up a simple connection between JavaScript and my database using ajax and PHP. The goal is for JavaScript to receive a name from an HTML form, make changes to it, send it to PHP to check if the name already exists in the da ...

What could be causing the Babel installation to fail within Electron? Is Babel necessary for my project or can it be avoided?

Having trouble using the npm package https://www.npmjs.com/package/swipe-detect and encountering the following error message: export default function(target, callback, threshold=150) { ^^^^^^ SyntaxError: Unexpected token export at Module._compile (i ...

Is there a way to accurately retrieve the width of an element within setInterval without any delay?

I'm currently experimenting with increasing a progress bar using the setInterval function. So far, it seems to be functioning properly. var progressBar = $('.progress-bar'); var count = 0; var interval = setInterval(function () { va ...

Vite.js, specifically in conjunction with Vue.js, experiences an issue with undesired page reloads, but this

Encountering an unusual issue with Vite.js specifically on Samsung Internet while using the development server... The problem at hand involves a continuous automatic page reload every 3 seconds, without any intentional intervals being set or written. This ...

Tap on the link but remain on the anchor

I'm having a problem with my navbar that uses anchors instead of links. Whenever a user inputs something into the chat and hits enter, they get redirected to the first anchor. I believe I need to implement AJAX to resolve this issue, but I'm stru ...

Implement a countdown and reset feature using JavaScript

I'm trying to display a countdown on my website for all users without using any backend language. The countdown starts at 20 and decreases by 1 every 1min. So after 2mins, the value should be 18, and when it reaches 3mins, it should reset back to 20. ...

"JQuery's selector is failing to locate elements once they have been loaded through an

I am facing an issue where jQuery selectors are not working on elements loaded from the server via Ajax requests, but they work fine in normal mode. $('#myid').change(function(){ alert('OK!'); }); <select id="myid"> <optio ...

Internet Explorer causing problems with JQuery

I encountered an error with the following code snippet: jQuery.post('/user/result/generate',{ 'id': getHidden() }, function(html) { $('#result').html(html); }); The error message is: ...

Is dynamic data supported by Next.js SSG?

I'm currently developing a web application with Next.js and I need clarification on how Static generated sites work. My project is a blog that necessitates a unique path for each blog entry in the database. If I were to statically generate my web appl ...