Tips for aligning objects in a linear formation using three.js

I am currently working on a chess board project using three.js. While I have managed to successfully render all the files with the stl loader, I am facing an issue with positioning them correctly. Despite setting the pieces in a straight line, they appear staggered instead.

Below is the code snippet:


function renderPiece(loader, piece, coor, color) {
  loader.load(piece, function(geometry) {
    var material = new THREE.MeshPhongMaterial({color:color})
    var mesh = new THREE.Mesh(geometry, material)
    chessBoard.objects.push(mesh)
    // mesh.position.set(coor[0], coor[1], coor[2])
    mesh.position.x = coor[0]
    mesh.position.y = coor[1]
    mesh.position.z = coor[2]
    mesh.scale.set(0.75,0.75, 0.75);
    chessBoard.scene.add(mesh)
  })
}

Furthermore, here are the function calls along with their respective coordinates:


var oStlLoader = new THREE.STLLoader()

renderPiece(oStlLoader, pieces.rook, [0, 0, -210], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, -140], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, -70], 0x000000)
renderPiece(oStlLoader, pieces.king, [0, 0, 0], 0x000000)
renderPiece(oStlLoader, pieces.queen, [0, 0, 70], 0x000000)
renderPiece(oStlLoader, pieces.knight, [0, 0, 140], 0x000000)
renderPiece(oStlLoader, pieces.bishop, [0, 0, 210], 0x000000)
renderPiece(oStlLoader, pieces.rook, [0, 0, 280], 0x000000)
javascriptthree.js

Answer №1

To ensure the accuracy of your 3D models, it is essential to establish a XYZ zero vector at the center of your chess field.

Once this initial step is completed, you can streamline the process by utilizing a predefined vector array for setting the correct positions:

var fields = [];
    fields['a1'] = new THREE.Vector3(10,0,10);
    fields['a2'] = new THREE.Vector3(10,0,20);
    fields['b1'] = new THREE.Vector3(20,0,10);

You can then assign a position to your model using the following code snippets:

mymodel.position.set(fields['a2'].x,fields['a2'].y,fields['a2'].z);
//or
mymodel.position = new THREE.Vector3.copy(fields['a2']);

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

Expanding Material Ui menu to occupy the entire width of the page

I'm encountering an issue with a menu I created where I can't seem to adjust its height and width properly. It seems to be taking up the full width of the page. import React, { Component } from "react"; import Menu from "@material-ui/core/Menu"; ...

javascriptcssreactjsmaterial-designmaterial-ui

Tips for effectively utilizing the useDraggable and useSortable hooks within the dnd-kit library

I'm currently working on developing a basic calculator using React and dnd-kit. The idea is to have draggable elements in the calculator that can be sorted within a droppable area with smooth animation effects. However, I've encountered an issue ...

javascriptreactjsdrag-and-dropdraggablednd-kit

In JavaScript, promises remain in a pending state

How can I prevent my promises from remaining in the pending state and resolve them instead? var foundPeopleA = findPeopleA().then(function(result) { var res = [] result.map(function(el) { res.push(getProfileXML(el.sid)); ...

javascriptpromisees6-promise

`Inconsistent form variable behavior persists despite multiple ajax requests`

I'm in the process of creating a basic email submission form and I've decided to use ajax for it. The issue I'm encountering is that after successfully submitting the form once, any subsequent modifications made to the text within the form a ...

javascriptjqueryajax

Surprisingly stumbled into the 'restricted' directory while switching the current directory to a temporary folder

I've encountered a strange issue while attempting to create and switch the working directory to a temporary folder using Node.js. Check out the code snippet below: var path = require('path') var fse = require('fs-extra') var TEST ...

javascriptnode.jsoperating-systemtemp

Middleware for automatically populating a Jade variable in all app.get() routes

I have a unique setup with my Jade file system where all templates extend layout.jade. In this main template, I need to include a logout button only when the user is logged in (this information is stored in req.session). So within layout.jade, there will ...

javascriptnode.jsexpresspug

Simultaneous activation of two click events in Javascript

I am looking to create a game using JavaScript. The game will be designed for two players to play on the same mobile device. I am facing a challenge with coordinating the players' clicks, as they may happen simultaneously. I have attempted to use bot ...

javascriptjqueryclickmulti-touch

Generate PDF Files Using Ajax

Currently, I am utilizing FPDF to generate my report. $pdf = new Report('P','mm','A4', $_POST); $pdf->AddPage(); $pdf->Output('file.pdf','I'); Furthermore, I am employing ajax to send a request to t ...

javascriptphpajaxfpdf

The completion action is never carried out

I am currently facing an issue with one of my JavaScript functions. I have several $.ajax calls throughout my webpage followed by .done(), and they all seem to be functioning properly, except for one. Can anyone identify what could be causing the error? m ...

javascriptjqueryajax

The functionality of returning false on ajax response does not effectively prevent the form from submitting

I'm encountering an issue where the return false statement doesn't seem to work when using an AJAX call. The form is still getting submitted successfully despite trying to prevent it with a conditional check on the response from the AJAX request. ...

javascriptphpjqueryajaxforms

I'm struggling to grasp the concept of how the backend and frontend interact with each other

The world of web development begins with HTML, CSS, and JavaScript for the frontend. HTML is essential as it allows browsers to render content in a readable format for humans. CSS comes into play to define the style and design of websites, while JavaScript ...

javascriptnode.jsdatabasebackend

The context provider in Next.js wraps the App component with a layout component specific to each page, resulting in data

Within my project, I have an authentication context component wrapping the main app component. Simultaneously, I am also attempting to implement a page-specific layout component based on the Next.js documentation found here. I'm unsure if my approach ...

javascriptreactjsreact-hooksnext.js

What is the best way to query for a mongoose ObjectId within feathers?

With two feathers services at hand, one for handling profiles and another for labels, the possibilities are endless. In a profile, you can have an array of ObjectId labels from other collections. Imagine the depth of connections! Now, picture this scenar ...

javascriptmongodbmongoosefeathersjs

Adjust the appearance of a button with Jquery Ajax to reflect a color fetched from an external PHP script

This piece of code represents my HTML: <form class="addtowatchlistform" action="logo/insertwatchlist.php" method="POST"> <input type="hidden" name="tmdb_id" value="'.$result[$x]["tmdb_id"].'"/> <button id="addtowatchlistb ...

javascriptphpjqueryhtmlajax

Cannot load the next page using jQuery ajax

I am working on a project with an index.html file that includes a nav menu, header, footer, and a div.content where jQuery is used to parse the html of page1.html. Initially, page1.html loads perfectly. However, I encountered an issue when trying to imple ...

javascriptjqueryhtmlajax

What makes Mathematics a unique object in JavaScript programming?

Recently, I've dived into learning Javascript, so pardon me if my doubts seem a bit illogical. I came across the definition for a Math object, and here is the code snippet: interface Math { /** The mathematical constant e. This is Euler's nu ...

javascriptnode.jstypescriptobjectjavascript-objects

Conditionally displaying components in React by dynamically rendering them

I have developed a feature that generates a text box dynamically every time a button is clicked import React, { useState } from "react"; import ReactDOM from "react-dom"; const Input = () => { return <input placeholder="Yo ...

javascriptreactjs

The ajax success error function does not trigger in jQuery

Hey, check out my code below: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script> </head> <body> <form id="foo"> <label for="bar">A bar</label> <input id ...

javascriptajaxjquery

Is it possible to create several XMLHttpRequests for various <li> elements upon clicking on them individually?

Today, I was experimenting with XMLHttpRequest to fetch news headlines from 10 different countries using the NewsAPI. I created 10 <li> tags for each country and assigned them an onclick function that triggers a JavaScript function to append the coun ...

javascripthtmlajaxxmlhttprequest

Occasionally, AJAX requests may not always be in the correct sequence

I'm struggling with the POST and GET requests. Everything seems to be in order on my server side until I send the data, but then things get jumbled up on the client side. For instance, the data should be received in reverse order as shown below: Data ...

javascriptjquerynode.jsajaxexpress