Trouble with Model Positioning in THREE.js

Currently experimenting with the code below:

var loader = new THREE.JSONLoader();
var onGeometry = function(geom) {
var tooth = new THREE.Mesh( geom, new THREE.MeshFaceMaterial());
tooth.position.set(xpos,ypos,0);
teeth.push(tooth);
scene.add(tooth);
xpos+=10;
};
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);
loader.load('js/JsonModels/teeth1.js', onGeometry);
loader.load('js/JsonModels/tooth2.js', onGeometry);

The problem I'm facing is that the models do not appear on screen in the order they are loaded, which is crucial for my project as I position objects based on their loading order. This issue also occurred when using OBJLoader and its callback to add and store objects in an array. Any suggestions on how to display multiple objects on specific screen positions?

javascriptwebglthree.js

Answer №1

Develop a callback factory that allows you to specify the desired position and store it within a closure:

function createPositionCallback(x) {
  return function(geometry) {
    var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
    mesh.position.set(x, y, 0);
    teeth.push(mesh);
    scene.add(mesh);
  };
}
var x = 123;
var loader = new THREE.JSONLoader();
loader.load('js/JsonModels/teeth1.js', createPositionCallback(x)); x += 10;
loader.load('js/JsonModels/tooth2.js', createPositionCallback(x)); x += 10;
loader.load('js/JsonModels/teeth1.js', createPositionCallback(x)); x += 10;
loader.load('js/JsonModels/tooth2.js', createPositionCallback(x)); x += 10;
loader.load('js/JsonModels/teeth1.js', createPositionCallback(x)); x += 10;
loader.load('js/JsonModels/tooth2.js', createPositionCallback(x)); x += 10;

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

Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...

javascripthtmlcssbootstrap-4

Opt for Jquery Over Traditional Functions for Retrieving Data from Tables

In the past, we have relied on JavaScript functions to transfer data from a table to perform various actions on that specific row. Consider the following example: <table class="table table-hover table-striped"> <thead> <tr> ...

javascriptjquery

Having difficulty sending ajax to the controller function

Currently, I am facing an issue with updating my database using AJAX in Laravel. The goal is to change the value in the enable column from 1 to 0 when a toggle button is clicked. Below script is included in the view: $(".toggle-btn").change(function() { ...

javascriptphpjqueryajaxlaravel-5

Retrieve the user-inputted data from an Electron BrowserView's input field

Consider this scenario where a BrowserWindow is set up with specific security settings, including enabling the webviewTag: true for project requirements. let webPrefs = { plugins: false, nodeIntegration: false, nodeIntegrationInWorker: false, ...

javascriptnpmelectronchromium

"Error encountered when trying to send form data to PHP server via ajax due to an unauthorized

I'm encountering an issue whenever I run my code and it keeps showing this error: Uncaught TypeError: Illegal invocation Any ideas on how to resolve this? const formdata = new FormData(); for (const file of myfile.files) { formdata.append("myF ...

javascriptjquery

Tips for patiently awaiting the completion of a fadeout function

After a fadeOut function completes, I want to update a value. Here is the function I am using: const fadeOut = (duration: number = 300) => { Animated.timing( opacity, { toValue: 0, dura ...

javascriptreactjstypescriptreact-native

Transforming into an input field from a dropdown with Bootstrap select when using AJAX in js.erb

I'm encountering a small issue while updating the view results via AJAX in Ruby on Rails (js.erb). Specifically, when I update/render the form using AJAX, the selectpicker transforms into a simple input and disappears from the view. Any suggestions on ...

javascriptjqueryruby-on-railsajaxbootstrap-select

Template content that is added dynamically does not interact with Javascript/AJAX/Jquery in CodeIgniter

Take a look at this example code snippet for the template design. <?php defined('BASEPATH') OR exit('No direct script access allowed'); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"& ...

javascriptphpjqueryajaxcodeigniter

Access a particular html tag as a value within an object

Recently, I've been working on AngularJS version 1.6 and am faced with an API containing multiple objects structured similar to the example below: { "description": " <p><a href=\"url">link</a>text</p><p><a href ...

javascripthtmlangularjsapiobject

Difficulty with rendering content from Angular routes

Currently, I am working on a movie application where users can click on a details button to view information about a specific movie. However, I am facing an issue in displaying the information for the selected movie without showing all the movies at once. ...

javascripthtmlangulartypescript

Refreshing the page in VueJs does not trigger the axios function

I've encountered an issue with my VueJs app after purchasing the Vuexy template from ThemeForest. I created a new component called CountryTable.vue, and while it works initially, it fails to display data when I refresh the page. It only shows data whe ...

javascriptvue.js

The object underwent modifications after being handed off to another function

Is it possible for an object to be altered after being passed to another function? For instance: var app = require('express')(); var http = require('http').Server(app); app.get('/', function (request, response) { respons ...

javascriptnode.jsexpress

Learn the process of retrieving a file from server.js and showcasing it on an HTML page

I am currently developing a YouTube video downloader using express, HTML, and JavaScript, with plans to transition to Vue.js in the future. Here is a snippet of my code: Index.html <!DOCTYPE html> <html lang="en"> <head> & ...

javascripthtmlnode.jsvue.jsexpress

What is the best approach for handling errors in a NestJS service?

const movieData = await this.movieService.getOne(movie_id); if(!movieData){ throw new Error( JSON.stringify({ message:'Error: Movie not found', status:'404' }) ); } const rating = await this.ratingRepository.find( ...

javascriptnode.jstypescriptnestjs

Using Typescript to map a string to an enum

Having trouble mapping a string to an enum and receiving the error message TypeError: Cannot convert undefined value to object export enum CallErrorType { UNAUTHENTICATED, } const handler: { [key in CallErrorType]: (message: string) => void; } = { ...

javascripttypescripttypescript-typingsreact-typescript

How can you determine if a mouseover event is triggered by a touch on a touchscreen device?

Touchscreen touches on modern browsers trigger mouseover events, sometimes causing unwanted behavior when touch and mouse actions are meant to be separate. Is there a way to differentiate between a "real" mouseover event from a moving cursor and one trigg ...

javascriptcross-browsertouchraphael

Occasionally, Soundmanager 360Ui fails to initialize after a page refresh

As I try to set up a 360Ui audio player using soundmanager 2, I encounter an issue. Upon the initial page load, the players display correctly as expected. However, if I refresh the page with Ctrl+R or by clicking the refresh button, it seems that soundmana ...

javascriptjqueryhtmlsoundmanager2

Determine the width of a dynamically generated div element in JavaScript using the createElement method

Currently, I am utilizing the JavaScript function createElement to generate a new div element and then assigning its innerHTML. Following that action, I am attempting to determine the necessary width required to display the div with all of its content. var ...

javascriptajax

Selectize Fails to Populate Options Using Ajax

ExpressJS is the platform I am using to develop a management dashboard for a community project. Right now, my main concern is integrating a modal that allows users to add new games to a database. Although I am able to fetch data remotely, I am facing diffi ...

javascriptjqueryhtmlexpressselectize.js

Revamping Text() into <span> Encoded HTML with Kendo UI

I need to customize the style of a panel bar from Kendo UI, specifically I want to divide the text "Blah-1 Blah-2" into two separate span blocks in HTML format, like <span>Blah-1</span> and <span>Blah -2</span>. How can I achieve t ...

javascriptjqueryhtmlcsskendo-ui