What is the method for aligning an object perpendicular to a surface in Three.js?

Check out this relevant codepen:

http://codepen.io/OpherV/pen/yNebep

In the game I am working on, there is a unique alien tree model. To create spikes on each face of the tree, I am generating pyramids using CylinderGeometry with 4 faces and positioning them in the middle of each face. My goal is to have these pyramids perpendicular to the face for a spiked tree effect. However, when using object.lookAt to point towards the face normal, unexpected results occur.

For instance, applying the rotation matrix 

cylinderGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
causes the shape in the center to look correct, but the rest remains distorted.

What is the correct approach to achieving my desired spiked tree?

Bonus question

After creating and orienting these spikes properly, how can I merge them back into the original geometry to avoid having numerous separate objects?

javascript3dthree.js

Answer №1

If you're looking to create a cylinder and orient it in a specific direction, one method is to follow this step-by-step approach:

Begin by creating the cylinder's geometry.

var cylinderGeometry = new THREE.CylinderGeometry( 1, 10, 25, 4, 1 );

Next, translate the geometry so its base aligns with the origin point.

cylinderGeometry.translate( 0, 12.5, 0 );

Rotate the geometry to ensure that the top of the cylinder faces towards the positive-Z axis.

cylinderGeometry.rotateX( Math.PI / 2 );

Create the visual representation of the cylinder using a mesh.

var cylinder = new THREE.Mesh( cylinderGeometry , characterSkinMaterial );

By default, objects in three.js are oriented based on their local positive-Z axis. Adjust as needed for your desired orientation.

Instruct the cylinder to face a particular direction by executing the following code:

cylinder.lookAt( face.normal );

Finally, position the cylinder at the desired location within the scene.

cylinder.position.copy( centerPoint );              

obj.add( cylinder );

This process is applicable for three.js version r.91

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

Create a way to allow users to download html2canvas with a customized filename

I have a div where I want to use html2canvas to save a PNG file of its content. The issue is that the name of the saved file is static in my code and does not change unless I manually edit it. Is there a way to dynamically set the filename based on user i ...

javascripthtmljqueryhtml2canvas

Discover the process for retrieving renderPass details using pmndrs/postprocessing

In my experience with three.js, I have typically used renderer.info to obtain the count of triangles in my scene. However, when working with pmndrs/postprocessing (https://github.com/pmndrs/postprocessing), I noticed that renderer.info.triangles always r ...

three.jsreact-three-fiberreact-postprocessing

Ways to evaluate a date against a string in JavaScript

I am currently working on developing a custom filter to showcase the most recent file in my system using AngularJS for data filtering. The challenge I am facing is that the date information is saved as a string in my json file, and I'm unsure how to ...

javascriptangularjsjsondate

Incorporating dynamic images from local sources into a listview in a React Native

I'm currently having an issue with loading local images in a React Native app that I'm developing. As per the instructions provided in the documentation at https://facebook.github.io/react-native/docs/images.html It's mentioned in the guid ...

javascriptreactjsreact-native

NetBeans is unable to analyze javascript files that are considered "large" (over 350 KB)

I have a significant JavaScript file (approximately 6 MB) that includes library API and documentation as shown below: /** * Function doc */ library.class.func=function(something){}; /** * Function 2 doc */ library.class.func2=function(something){}; ...

javascriptnetbeanslarge-fileslarge-file-support

The HTML button with Google's material-icons appears noticeably small when displayed on mobile devices

Looking to design a basic HTML page with a button placed in the lower right corner? Check out the code below: <!DOCTYPE html> <html> <head> <title>Sample Page</title> <style> /* Styles for the container * ...

javascripthtmlcss

Tips for utilizing AJAX to send two values to PHP for comparison

How can I use AJAX to compare two values (#cpassword and #password) to see if they match? I've been attempting it, but it seems like I only get the value of '#cpassword'. Here is my cpassword-check.js file: // Validate confirm password whi ...

javascriptphpjqueryajaxvalidation

The medium-zoom feature is currently experiencing issues with functionality within Angular version 13

I've been attempting to incorporate medium-zoom functionality into my project using https://www.npmjs.com/package/medium-zoom Here are the steps I took: ng new medium_zoom_test (Angular 13) with routing & css npm install medium-zoom The image is ...

javascriptangular

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

javascripthtml

Deleting items from the DOM using JavaScript

I am retrieving all the list elements from a menu in order to eliminate the ones that I do not want. let prodMenu = document.getElementsByClassName("productMenu-category"); for (let i = 0; i < prodMenu.length; i++) { if(i > 0 && ...

javascriptarrayscollections

Transform the text column into JSON format

We currently have a resource bundle/properties formatted as follows: [tag1] server1 server2 [tag2] server3 server4 [tag3] server5 server6 [No Software Installed] server7 [tag2] server8 [tag5] server9 [tag1] server10 server11 [tag3] server12 server13 serve ...

javascriptjqueryjsonnode.jsnpm

Ways to transfer data between Angular controller and jQuery

Looking for some guidance on how to toggle between two HTML divs based on user input validation using an Angular controller and jQuery animations. Each div contains input fields that need to be validated before moving on to the next stage. Here is a simpli ...

javascriptjquerycssangularjs

JavaScript - Issue with For Loop when Finding Symmetric Difference

Here is my solution to a coding challenge on FreeCodeCamp called "Symmetric Difference." I'm puzzled as to why my code is returning 2, 3, 4, 6 instead of the expected 2, 3, 4, 6, 7. function sym(args) { args = Array.from(arguments); var new ...

javascriptarraysfor-loop

Creating movement in three distinct divisions

I am seeking a way to have three divs flying in upon click. The first DIV is positioned at the top, followed by one on the left and one on the right (both being below the top one). I wish for them to fly in from their respective directions - the top div fr ...

javascriptjqueryhtmlcss

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

javascriptjqueryasp.nethtmlcss

Attach an event listener to the HTML content

Being new to Javascript, I am attempting to add an event listener for each button on every card. However, the code seems to only apply the event 'click' to the last card (button). Is there a way to make this work with the innerHTML of the card? l ...

javascripthtmldomaddeventlistener

Avoid running another process before the current one finishes in jQuery

I have a situation where I am using $.ajax inside a for loop in jQuery. for(var i=0; i < 2; i++) { $.ajax({ url :"/models/getdata"+i, dataType:"json", success:function(data) { } }); } The issue is that before the success function for i=0 completes, ...

javascriptjqueryajax

The server is failing to provide the requested data in JSON format

I am struggling with making a simple API call using Node.js as the backend and React in the frontend. My Node.js file is not returning data in JSON format, and I'm unsure of the reason behind this issue. I need assistance with two main things: Why is ...

javascriptnode.jsreactjsjson

Acquire the worth of the <MenuItem> element from React's mui/material library

I am attempting to retrieve the value of the selected item listed below: Here is my attempt at logging this information: console.log("Event: ", event.currentTarget); Output: <li class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gut ...

javascriptreactjsmaterial-ui

Display the console.log output of NodeJs on an HTML webpage

I've set up a server named app.js and have multiple clients connecting to it. Currently, I am displaying the server's messages to the client in an HTML page called index.html. However, I also want to display the messages from the clients to the s ...

javascripthtmlnode.jssocket.ioconsole