What is the best way to place a 3D model at random points on the surface of a sphere while ensuring that it always faces the right direction?

I'm faced with the challenge of placing huts randomly on a spherical world. While this task is feasible, the issue arises when the huts do not sit correctly - their bottom should be in contact with the tile below. I've experimented with the 'lookat' function, which typically works well with shapes or geometries I have created myself. However, it doesn't seem to work with someone else's model. This is because the hut's front (or axis) is designed as the front door. As a result, attempting to align the model with the tile beneath it causes the hut to lay on its front with the door touching the surface. Even placing a shape for the hut to look at can lead to inconsistencies, where the hut ends up lying on its side with the door facing the shape.

My ideal solution would involve changing the 'front' of the hut so that it aligns with the bottom of the model. Unfortunately, I believe this may not be achievable in Three.js. Any guidance on how to address this issue would be greatly appreciated.

javascriptthree.js

Answer №1

To ensure that the z-axis of the hut becomes its bottom, you can achieve this by rotating it 90 degrees along the x-axis.

  • If your hut consists of a single geometry, you can utilize the BufferGeometry.rotateX() method once it has been loaded:
var angle90 = Math.PI / 2;
hut.geometry.rotateX(angle90);

// Now, position the hut as needed
hut.position.set(x, y, z);
hut.lookAt(0, 0, 0);
  • If your hut is composed of multiple Meshes, you have the option to rotate all internal geometries individually, or alternatively, nest it within a parent Object3D, and align that parent towards the center of your world:
const hutParent = new THREE.Object3D();
hutParent.add(hut);

// Rotate the child so the parent's z-axis aligns with the hut's bottom
hut.rotation.x = Math.PI / 2;

// Subsequently, concentrate on manipulating the parent only
hutParent.position.set(x, y, z);
hutParent.lookAt(0, 0, 0);

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

When I attempt to navigate using a route on my website, all I see is a

Hey everyone, I'm looking to develop a webpage that switches pages using Navbars. I want to utilize bootstrap and react-route-dom to achieve this functionality. However, before incorporating bootstrap, I encountered some errors that went unnoticed. I& ...

javascriptreactjsreact-routerreact-router-domreact-bootstrap

Unable to integrate third-party tools into your Vue JS project via CDN

Currently delving into Vue JS to enhance the interactivity of my django application, I am opting for the route of integrating Vue JS as components within my templates rather than going down the path of a Single Page Application (SPA). It's almost like ...

javascriptdjangovue.jsvuejs2vue-component

How to include a key-value pair to a JSON object within an array using JavaScript

I am looking to include the following functionality in the JSON data provided below: "Check if the key name default exists, and if it does, add another key within the same object => ("pin" : 91)." I have attempted to achieve this using the code snippet ...

javascriptjsoncrud

Using JavaScript within HTML documents

Need help with inserting JavaScript code from Google: <script type='text/javascript'> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1362706866260-0'); }); </script> into existing JavaScript / HTML code: va ...

javascriptjqueryhtmlwordpress

Troubleshooting data binding issues in Angular.js using Jade and Express

I've been diving into AngularJS using Dan Wahlin's tutorial (http://youtu.be/i9MHigUZKEM?t=13m35s). In my views/index.jade file, I've implemented the code below: !!! 5 html(data-ng-app='') head title Angular Tutorial body ...

javascriptangularjsexpresspug

Creating an AJAX function to display a popup window for users who are already registered - here's how!

I am currently working on a dropwizard-java project. Whenever users click the subscribe button, it displays a thank you message for subscribing and then checks if the user is already registered. I would like to have a pop-up window immediately show whethe ...

javascriptjavajqueryajaxdropwizard

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

javascriptreactjstypescript

Identifying a user's unique identity through a POST request using Node.js

Currently, I am developing a browser game that integrates voice communication. To capture audio within the browser, I have chosen to use wami-recorder. This tool relies on Flash technology to make a POST request to the server containing the recorded audio. ...

javascriptnode.jssocketspostexpress

Determine the duration/length of an audio file that has been uploaded to a React application

I am working on a React web application built with create-react-app that allows users to upload songs using react-hook-forms. The uploaded songs are then sent to my Node/Express server via axios. I want to implement a feature that calculates the length of ...

javascriptreactjsaudiofile-uploadmp3

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

javascripthtmlcssreactjs

If function is called after x seconds

Here is a JavaScript code snippet that triggers different functions based on the number of clicks. For instance, clicking once triggers function1, while clicking twice triggers function2. Now, how can I modify this code so that if I am in the stop_autosli ...

javascript

Navigate directly to the section on the page that discusses the hashtag

So, I have a unique scenario to address. I'm working with two div elements where only one should be visible at a time. Here's the situation: The first div serves as an introduction page with a button that hides it and reveals the second div. Th ...

javascriptjqueryhtmlhashtag

Retrieving data from a React state in one component and utilizing it in a separate component

Thank you for taking the time to assist me with this challenge. I am currently working on a project that involves creating the state goodData in one component called AddProduct and accessing it in another component named ActionBox, both within the same j ...

javascriptreactjswebreact-hooks

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

javascripthtmljqueryajax

Is it possible to automatically reload the previous link when the back button of the browser is clicked?

I am working on a website where the main content is loaded using jQuery Ajax based on the selected menu item. When a menu item is selected, the URL changes according to this pattern: http://host/domain/index.php?pageid=page In this scenario, the 'p ...

phpjavascriptjqueryback-button

ReactJS - run a JavaScript snippet once the Ajax call has successfully fetched and displayed the data

Where is the optimal placement for JavaScript code in order to execute a plugin after rendering is complete? <html> <head> <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.min.js'></script ...

javascriptajaxreactjs

What steps should I take to resolve the 'Uncaught Error: Cannot find module 'path'' issue in my React.js application?

While developing a web application in react.js, I encountered errors that I couldn't solve despite trying various solutions found online. The console displays the following error: Error in Console: Uncaught Error: Cannot find module 'path' ...

javascriptreactjswebpack

Responsive design in Android does not function as intended

My goal is to create a responsive design for my website, but I am encountering issues with importing the CSS files into the HTML. When I try to view the site in both the Windows version of Chrome and the Android version, all I see is a white screen. I am c ...

javascriptandroidhtmlcss

Using ReactJS to trigger a timer function on a button click

Kindly Note: This is a unique query and not related to ReactJS - Need to click twice to set State and run function. The suggested solution there does not resolve my issue. This represents my original state: constructor(props) { super(props) this. ...

javascriptreactjstimer

The close button on the jQuery UI Dialog fails to appear when using a local jQuery file

I may sound silly asking this, but I have a simple webpage where I've added a jQuery modal dialog box. Strangely, when I link directly to the jQuery files online (like http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css), everything works ...

javascriptjqueryjquery-ui