Three.js: placing objects at the top of the screen with consistent dimensions

As a newcomer to three.js, I am unsure if my question falls into the category of beginner or advanced. I am looking to place objects in the top left corner of the screen, with each subsequent object positioned to the right. It is important that each object appear the same size. How can I calculate their 3D positions and scales?

I came across a potential solution that may work for me: Three.js: Show world coordinate axes in corner of scene. However, I am concerned that the second canvas mentioned in the solution may be too large and cover the original canvas.

One idea I had was to create a sphere with the position of the camera and a radius larger than the screen-camera distance. Using a raycaster, I could find the intersection point as the desired location. Is this a viable approach?

The objects I am working with are arrows (poly and extruded) that indicate selected directions for the user. These arrows serve as an information box but should not obstruct the original scene. Ideally, I would like to display 10-12 arrows at the top of the screen, all the same size for aesthetic purposes.

javascriptcanvasthree.js

Answer №1

For anyone interested in developing a heads-up display (HUD), one effective method involves overlaying a second scene consisting of sprites rendered using an orthographic camera.

When implementing this technique, follow this coding pattern:

camera = new THREE.PerspectiveCamera( ... );
cameraOrtho = new THREE.OrthographicCamera( ... );

scene = new THREE.Scene();
sceneOrtho = new THREE.Scene(); // additional scene for overlays

renderer = new THREE.WebGLRenderer();
renderer.autoClear = false; // necessary for overlays

Within the render loop, include the following:

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( sceneOrtho, cameraOrtho );

To learn more, visit .

This code is based on three.js r.83

Answer №2

This particular example showcases a functional demonstration with the utilization of a class named VisualLayers designed to handle multiple layers. It employs the technique of renderer.autoClear = false along with clearing-depth to enhance performance.

One of the key advantages of this method is that the renderOrder of objects remains unaltered, eliminating the possibility of introducing unforeseen issues associated with other approaches.

Feel free to experiment with the provided options in the user interface to observe the impact:

// @ts-check

////////////////////////
// LAYER SYSTEM
////////////////////////

/** @typedef {{name: string, backingScene: THREE.Scene, order: number}} Layer */

class VisualLayers {
    /**
     * @type {Array<Layer>}
     * @private
     */
    __layers = [];

    // Rest of the code remains the same...

html,
body,
#container {
    // CSS styling for the container
}

// CSS styling for the canvas
canvas {
    // Additional CSS rules for the canvas
}

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dda9aab8bcb6adbcb3b89decf3e8f3e8">[email protected]</a>/dist/tweakpane.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582c302a3d3d186876696a697669">[email protected]</a>/build/three.min.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0b0afb3b4b0b2afa3a5b3b3a9aea780f6eef1f7eef4">[email protected]</a>/build/postprocessing.js"></script>

(Live example on CodePen)

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

What could be causing my recursive function to skip over certain parts of my JSON data?

UPDATED TO BE MORE CONCISE Hello, I'm looking for assistance with a recursive function that's not returning the expected values from a JSON object. The goal is to retrieve all "Flow" object IDs where the "Type" is either "Standard" or "Block". T ...

javascriptjson

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

javascripthtmlreactjstypescript

What is the correct way to add a period to the end of a formatted text?

Hello, this marks the beginning of my inquiry. I apologize if it comes across as trivial but I have come across this piece of code: function format(input){ var num = input.value.replace(/\./g,''); if(!isNaN(num)){ num = num.toString ...

javascript

Is it possible to achieve this using an alternate method such as CSS?

Currently, I am working on a function that will apply shadow effects to all buttons within a specific class when hovered over. However, due to the dynamic nature of the buttons created based on the data retrieved from the database, assigning individual IDs ...

javascriptjqueryhtml

Order of Execution

I am facing an issue with the order of execution while trying to retrieve values from my WebApi for input validation. It appears that the asynchronous nature of the get operation is causing this discrepancy in execution order. I believe the asynchronous b ...

javascriptvisual-studiotypescriptangular

Utilizing setColumns() function within Google Charts for JSON data tables

Is there a feature in the Google Charts API that functions similar to setColumns() for working with JSON data? I'm aiming to reduce PHP calls by consolidating my data into a single array and then specifying which columns Google Charts should utilize. ...

javascriptphpjsongoogle-visualization

Is it necessary for a component to disconnect from the socket io server upon unmounting?

Is it best practice for a React component to automatically disconnect from a socket.io server when it unmounts using the useEffect hook? If so, could you provide an example of the syntax for disconnecting a React component from a socket.io server? ...

javascriptnode.jsreactjswebsocketsocket.io

Is there a way to determine the quantity of items within a sortable div?

In my HTML document, there are multiple divs containing smaller divs that can be rearranged within each other. Upon loading the document, a random assortment of these smaller divs are added to #boxtop. Below is a snippet of my HTML code: <html> &l ...

javascriptjqueryhtmlcssjquery-ui-sortable

What to do when encountering a 404 Error with `meta.json` in a Next.js Application

Hello fellow developers, I'm currently facing a challenge with my Next.js application. Upon running it, the terminal keeps throwing a meta.json 404 error, and I'm stuck on how to resolve it. Here are some key points for context: The Next.js app ...

javascriptreactjsnext.js

An improved solution for avoiding repetitive typeof checks when accessing nested properties in the DOM

One common issue I encounter when working with nested DOM objects is the risk of undefined errors. To address this, I often use a conditional check like the one shown below: if("undefined" != typeof parent && "undefined" != typeof parent.main ...

javascriptdomundefined

Is it possible to use JavaScript or jQuery to call a WCF Service and retrieve a collection of System.IO.Stream objects?

I am developing a WCF service that will be utilized by plain JavaScript on the client side, as well as some jQuery JavaScript. 1) How can I set up the plain client JavaScript to call the WCF Service in a manner that retrieves a collection of System.IO.Str ...

javascriptjquerywcfcollectionsstream

"Implementing a filter with multiple select options in AngularJS

As a beginner delving into Angular, I find myself working with a multiple select feature to filter a list by name. <select multiple ng-options="data.name for data in datas" ng-model="filterData"> </select> Currently, I am able to filter with ...

javascriptangularjs

Utilize the dropdown menu to load JSON data and dynamically update the content of a div section on a website

I have been struggling to find a way to load JSON data from a drop down menu into a div area and refresh it with new results. While I was able to display the data in the div area without the dropdown menu, I am facing difficulty in fetching the required da ...

javascriptjqueryjson

Is it possible for data passed through props on Vue.js router-view to be visible in browser developer tools?

I have passed several props to the router-view component in this manner: <router-view :zipchange="zipchange" :accountitems="accountitems" :accountloaded="accountloaded" :profilepic="profilepic" /> Upon inspecting an element in the browser's de ...

javascriptvue.jsvue-router

Is the node certificate store limited to reading only from a predefined list of certificates?

Is there a way to add a new certificate to the list of certificates node trusts, even after some struggle? It appears that Node only trusts certificates hardcoded in its list located here: https://github.com/nodejs/node/blob/master/src/node_root_certs.h ...

javascriptnode.jssslhttps

Issue with breakpoints functionality in MUI v5 and React project

I've been attempting to utilize breakpoints for responsive design on my website, but unfortunately, it doesn't seem to be working correctly. Every time I implement a breakpoint, the entire page goes blank. Below is the code snippet I am working w ...

javascriptreactjsmaterial-ui

Not all API results are being displayed by the Nextjs API function

I am facing an issue with rendering all the returns from the API in my Next.js application. The API, which is created in Strapi, is only displaying 1 out of the 3 possible returns. I am a beginner when it comes to using APIs and I suspect that the issue li ...

javascriptapinext.jsstrapi

Sending parameters within ajax success function

To streamline the code, I started by initializing the variables for the selectors outside and then creating a function to use them. Everything was working fine with the uninitialized selector, but as soon as I switched to using the variables, it stopped wo ...

javascriptjqueryajax

The jqGrid displaying data with datatype set to "jsonstring" is only showing the first page

When my JqGrid receives data from the server in JSON format, I use the following parameters: _self.GridParams = { rows: 7, page: 1, sidx: '', sord: '' } Once the data is retrieved, it is stored in the variable 'data': Objec ...

javascriptjqueryjsonjqgrid

Is there a more efficient approach to streamline Javascript code similar to the chaining method used in JQuery?

When working with jQuery, it's possible to streamline the code by running multiple methods in a single statement: $("#p1").css("color", "red").html("Hello world!").attr("class","democlass"); But how can this be accomplished in Javascript? document. ...

javascriptjquery