The geometry in Three.js is characterized by its defined axis

I have a rectangular prism,

I am trying to determine the front side of my prism by specifying the sides:

var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/xpos.png' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/xneg.png' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/ypos.png' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/yneg.png' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/zpos.png' ) }));
    materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'test/Three.js/images/zneg.png' ) }));
    var PrismMat = new THREE.MeshFaceMaterial(materialArray);
    var PrismGeom = new THREE.BoxGeometry( 100*meter, 50*meter, 300*meter, 1, 1, 1, materialArray );
    myMesh = new THREE.Mesh( PrismGeom, PrismMat );       
    scene.add( myMesh );

When using myMesh.lookAt(myTarget) to point towards a target, the side with texture "zneg.png" (which is intended to be the front) ends up at the back, with the "zpos.png" side facing the target.

How can I designate the front and bottom, or top and back side of my object, for easy rotation?

Thank you.

javascriptthree.js

Answer №1

By default, when an object is in its original position, it is facing its internal z-axis in a positive direction. However, the camera differs as it faces its internal z-axis in a negative direction.

When you use the object.lookAt( target ) method, the object will rotate so that its z-axis aligns with the target's direction.

If you prefer a different side of your geometry to face the positive z-axis internally, apply a transformation right after creating the geometry like this:

geometry.applyMatrix( new THREE.Matrix4().makeRotation( 0, Math.PI, 0) );

Alternatively, you can also utilize one of the pre-built methods such as:

geometry.rotateY( Math.PI );

This information applies to three.js version r.100

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

Verify whether the function is operational using Google Apps Script and Google Web Apps

I have created a basic Google Apps Script that links to IFTTT on my phone and sends SMS messages. Now, I am attempting to create a more user-friendly interface by deploying the script as a Google Web App. The concept is simple: click a button, see "Sending ...

javascriptgoogle-apps-script

Unable to perform queries from a separate file as connection.query function is not recognized

Currently diving into node.js and databases. Attempting a mysql query, but encountering the error TypeError: connection.query is not a function. Utilizing Node MySQL 2 (https://www.npmjs.com/package/mysql2) package; The connection and queries in app.js f ...

javascriptmysqlnode.jsexpress

Incorporating Paytm into Ionic applications

I'm a newcomer to the world of Ionic framework and I am interested in integrating Paytm into my Ionic application. Unfortunately, my search for articles to guide me on how to start developing this integration has been fruitless. So far, I have taken ...

javascriptangularjshtmlionic-frameworkpayment-gateway

The functionality of RegExp is not as expected in this specific case, even though it works correctly in all

I am new to Node.js and currently transitioning from a PHP background, eager to learn more about it. My challenge involves using the following Regular Expression: /([A-Z]{2,})+/gim (identifying two or more consecutive letters). The string I am working w ...

javascriptnode.jsregex

WebSocket functionality in Node.js utilizing the ws module from npm

I am currently working on developing a chat application. The first step involves the user sending their username, and if the name does not already exist, they are logged in. The user can then send a message to another user. However, an issue arises where a ...

javascriptnode.jsnpmwebsocket

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...

javascripthtmlcss

Changing the custom route in React Router to utilize a render prop instead of the component prop

I'm currently working on a React app that incorporates React Router. I've been encountering a bug in my code stemming from my custom ProtectedRoute component: const ProtectedRoute = ({ component, ...args }) => ( <Route component={with ...

javascriptreactjsreact-routerreact-router-domauth0

Can you explain the variances between the index.html and index-async.html files within the AngularJS seed project?

Within the angularjs seed project, there are two files that appear to produce identical results: index.html and index-async.html. If you want to view the code for index-async.html, you can visit this link. Similarly, if you're interested in the code ...

javascriptangularjsasynchronous

Swapping two values of input forms in HTML using jQuery interchangeably

I need help figuring out how to dynamically update the values of two input fields on a form interchangeably. For example, if input one represents the current price of Bitcoins and input two represents USD, I want to be able to change the value of one input ...

javascriptjqueryhtml

How can I incorporate a three.js element into my React application?

Struggling to create a React component that displays a three.js scene properly. Instead of seeing the expected scene, all I get is the text [object HTMLCanvasElement]. Check out my code below: import React from 'react'; import * as THREE from & ...

reactjsthree.js

Node.js tutorial: Fetching all pages of playlists from Spotify API

Currently, I am attempting to retrieve all of a user's playlists from the spotify API and display them in a selection list. The challenge lies in only being able to access 20 playlists at a time, which prompted me to create a while loop utilizing the ...

javascriptjqueryjsonnode.jsspotify

Dynamic Interactive Content with AJAX

Imagine if all the forms in your application followed this structure: <div id="result_messages"></div> <form action="/action"> <!-- all the form --> </form> Here's an example of what a submit button for this form might ...

phpjavascriptjqueryajaxforms

States have the autonomy to set their own right-side menu alongside the constant presence of the left menu

Looking for a solution where my left side menu remains consistent across all states, but each state can have its own optional right side menu with custom content. The current approach involves creating a separate directive for the left side menu that each ...

javascriptangularjsionic-framework

Encountered an error while iterating through an array in Angular: "Cannot access property at index

I've encountered an error while trying to loop through an array of items and pushing them to another array. I am able to access the items at index "0", but still facing the mentioned error. Below is the code snippet for reference: createReportFormu ...

javascriptarraysangular

Jquery: Pressing Enter will cause the input field to lose

Take a look at this fiddle I created: http://jsfiddle.net/7wp9rs2s/. This is the progress I have made on my project so far. In the fiddle above, you can double click on one of the 4 items and a textbox will appear for editing. Instead of clicking out of t ...

javascriptjquery

ABAP string to SHA256 unlike anything in SAPUI5 or JavaScript

As I continue working on my SAPUI5 project, I have encountered a challenge with creating a HMAC encoded string using the following code snippet: var secretKey = CryptoJS.enc.Hex.parse('SECRETKEY'); //Utilizing the CRYPTOJS library! var hash = Cr ...

javascriptabapsha256hmac

AWS Lambda encountered an issue: Task terminated unexpectedly prior to finishing the operation

I've scoured various Stack Overflow threads for solutions to my issue, but no luck so far. As a beginner in this field, I might not be implementing the suggested fixes correctly. Here's my code, and any help would be greatly appreciated. var mys ...

javascriptnode.jsamazon-web-servicesaws-lambda

Enhance your Javascripts by incorporating Try Catch statements

I have two sets of scripts, CODE#1 and CODE#2. The first set contains a script that sources data from a web service. I want to implement a try catch mechanism in the second set (CODE#2) so that if the web service is inaccessible due to site downtime, an al ...

javascripthtml

Delay with Vue.js v-bind causing form submission to occur before the value is updated

Trying to update a hidden input with a value from a SweetAlert modal, but encountering issues. The following code isn't working as expected - the form submits, but the hidden field's value remains null. HTML: <input type="hidden" name="inpu ...

javascriptvue.js

CustomJS TextBox callback to adjust range of x-axis: Bokeh

I'm currently working on a web page that features a plot powered by an AjaxDataSource object. However, I am facing a challenge with implementing a TextInput widget that can modify the xrange of this plot. Here is a snippet of my code: source = AjaxDa ...

javascriptpythonajaxbokeh