Is GridHelper in three.js creating a non-traditional grid?

I recently discovered that the standard normal vector for geometries in three.js is typically considered to be (0, 0, 1).

However, when I tried using the GridHelper constructor, I noticed that it actually creates a plane defined by the X and Z axes, resulting in a normal vector of (0, 1, 0).

This discrepancy can be clearly seen in the geometry vertices array of my GridHelper, as shown in this screenshot:

https://i.sstatic.net/P43KA.png

and visually confirmed in this image:

https://i.sstatic.net/nW2IR.png

When I initialize my GridHelper using this code:

var myGridHelper = new THREE.GridHelper(10, 20);

I wonder why GridHelper deviates from the standard normal vector understanding?

Assuming this behavior doesn't change, could I potentially address it by always setting up my GridHelper instances with the following code:

var standardPlaneNormal   = new THREE.Vector3(0, 0, 1);
var GridHelperPlaneNormal = new THREE.Vector3(0, 1, 0);
var quaternion  = new THREE.Quaternion();
quaternion.setFromUnitVectors(standardPlaneNormal, GridHelperPlaneNormal);
var myGridHelper = new THREE.GridHelper(10, 20);
myGridHelper.rotation.setFromQuaternion(quaternion);

Is this a viable solution?

Answer №1

To effectively utilize the lookAt() method with the GridHelper, you must adjust the grid geometry's orientation so that it is aligned with the XY-plane rather than the XZ-plane. Once this adjustment is made, the lookAt() function will perform correctly.

var grid = new THREE.GridHelper(10, 2);

grid.geometry.rotateX(Math.PI / 2);

var vector = new THREE.Vector3(1, 1, 1);
grid.lookAt(vector);

scene.add(grid);

Version of three.js: r.76

Answer №2

To achieve the same result using the react-three-fiber library, you can follow this approach:

import * as THREE from 'three'

...

<gridHelper
  args={[10, 2]}
  rotation={new THREE.Euler(Math.PI / 2, 0, 0, 'XYZ')}
/>

In this case, you should utilize the rotation property instead of relying on the rotateX and lookAt methods. The reason being that react-three-fiber abstracts all methods within the react rendering process, allowing you to declaratively specify values. For further details, refer to the react-three-fiber documentation.

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

Modifying an HTML attribute dynamically in D3 by evaluating its existing value

I'm facing a seemingly simple task, but I can't quite crack it. My web page showcases multiple bar graphs, and I'm aiming to create a button that reveals or conceals certain bars. Specifically, when toggled, I want half of the bars to vanish ...

jQuery fails to locate class following AJAX reply

In my application, there is a cart feature where users can remove items from their cart, triggering a refresh of the contents using AJAX. However, I noticed that after removing an item from the cart, the response switches from asynchronous to synchronous m ...

Optimize Page Speed by Delaying the Loading of Slideshow Images

My main issue with reducing my pagespeed is the slideshow I have implemented. I currently have 17 rather large images in the slideshow, but for simplicity, I will only show the code for 3 images below. I am trying to find a way to load the first image as a ...

403 Forbidden - CSRF Token Not Recognized

I am encountering an issue with Node Express and CSurf - 403 (Forbidden) Invalid csrf token. After reviewing other solutions and attempting all available options, I am still unable to resolve this. The API functions perfectly when tested in Postman. Howe ...

The API has been triggered twice

I am currently working on a React component where I have implemented an API call using the useEffect hook with an empty dependency array. However, I noticed that the API is being called twice and I can't seem to find the reason behind it. import { use ...

What steps can be taken to integrate JavaScript into an ASP.NET control?

<script type="text/javascript"> $(document).ready(function () { $('input[name="time"]').ptTimeSelect(); }); </script> the script shown above is functioning correctly with this HTML input: <input name="time" value= ...

Saving Arrays through an Input Form in JavaScript

I am working with an HTML form that looks like the following: <div class="form-group"> <label for="first_name">1st Name</label> <input type="text" id="first_name" placeholder="First Name" class="form-control"/> </div> ...

Leverage the Power of AngularJS to Harness Local

I am currently developing an application using AngularJS. However, I have encountered an issue when trying to use localstorage. Here is my code snippet: var id = response.data[0].id; var email = response.data[0].email; localStorage.setItem('userId&ap ...

"Unlock the power of Angular.js: Extracting table row data with the click of a checkbox

Can anyone help me with this? I am trying to retrieve all checked data from a table row using Angular.js. Below is my code: <tr ng-repeat="gl in galleryDatas"> <td><input type="checkbox" name=""> {{$index+1}}</td> <td><img ...

Turn off the background of a div

Greetings! I am working on a webpage that includes a button. Upon clicking the button, I would like to display a div and disable the content behind it. The div will also contain a button that can be clicked to hide the div. As a newcomer to Web Programmi ...

There seems to be an issue with the functionality of flatlist and scrollView

I am new to working with react-native. I have a screen where I am using four flatlists, but the last flatlist at the bottom of the screen is not scrolling. I added a scrollView and it worked fine, but now I am getting this error message: VirtualizedLists ...

Unable to dynamically insert values into a JSON object

My goal is to populate a JSON object with objects that look like this: var books = [{ "no" : 1, "bookType":"fiction", "bookPrice": 60 },{ "no" : 2, "bookType":"f ...

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

Utilizing properties to transfer a reference object to a nested component

Is it safe to do the following in React: function Parent() { const myRef = useRef([1, 2, 3]); console.log("parent: " + myRef.current); return <Child myList={myRef.current} />; } function Child({ myList }) { const [currInt, setCurrInt] = useS ...

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

I am currently working on a React/Redux CRUD form that can be found here. ISSUE RESOLVED: I have encountered an issue where the state should be updated by Redux after making an API call instead of using this.setState. The concept is simple: when a user s ...

Refresh the array using Composition API

Currently, I am working on a project that utilizes Vue along with Pinia store. export default { setup() { let rows: Row[] = store.history.rows; } } Everything is functioning properly at the moment, but there is a specific scenario where I need to ...

Using Node and Express to handle form submissions, we can create a POST request that sends data to the server

Despite my ongoing learning journey, I am feeling a bit frustrated as I struggle to find a solution for this particular issue using ES6 Javascript. Currently, I have a straightforward todo-list web-app where everything is managed and displayed through the ...

The Json iteration loop is displaying the term "object" rather than the actual data within it

I'm trying to use the foreach loop in JSON and then display it with innerHTML. No errors are showing up, but the problem I'm facing is that the output is showing like this: [object Object] Instead of what is supposed to be displayed in the fo ...

Exploring the Integration of Material UI DatePicker with Firestore in ReactJS: Converting Firestore Timestamps to Date Format

The database is correctly recording the date, however, when displayed, the DatePicker does not recognize the date from the database as it is in timestamp format (seconds and nanoseconds). <DatePicker margin="normal" label="Data do pedido" ...

What could be causing the images' load event not to work as expected?

I'm attempting to implement a load event for my images using native JavaScript. Below is the code snippet I am currently using: var imgs = $("figure img"); // querySelectorAll for(var i = 0, l = imgs.length ; i < l ; ++i) imgs[i].addEventListen ...