How to Attach an Object to the Camera in Three.js Without Rotating with It

My current setup involves a SphereGeometry connected to a Perspective Camera. However, when I rotate the camera, the Sphere also rotates with it, which is not the desired behavior in my case.

This is how it's currently set up:

camera.add(Sphere);
Sphere.position.set (0, -100, 0);

I am looking to position the sphere at the bottom of the camera but have it remain fixed in that spot. As of now, whenever I rotate the camera, the Sphere moves along with it and becomes invisible. How can I attach the child object so that it doesn't rotate with the camera? Thank you.

javascriptthree.js

Answer №1

To customize the rendering of a sphere mesh, you can create an onBeforeRender() method for it. Here's an example:

scene.add( sphere ); // Add the sphere as a child of the scene

sphere.onBeforeRender = function( renderer, scene, camera, geometry, material, group ) {
    var pos = camera.position;
    this.position.set( pos.x, pos.y - 100, pos.z );
};

This code is using three.js version r.86.

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

Tips for sending several paginated GET requests to an API using a while loop in Node.js when the total number of pages is unknown

Dealing with a REST JSON API that offers no way to determine the total number of pages or entries can be challenging. However, I need to make multiple requests to the API in a loop to gather all available data. After scouring through various stackoverflow ...

javascriptjsonnode.jsrestasynchronous

Typescript double-sided dictionary: a comprehensive guide

Looking for a dual-sided dictionary implementation in TypeScript that allows you to retrieve values using keys and vice versa. An initial approach could be storing both items as keys: dict = {"key": "value", "value": "key"} But I am curious if there are ...

javascripttypescript

Hide the off-canvas menu when clicking outside

I recently created a unique "slide-out" menu which you can check out here: SASS Slide-out Menu. While it is functional, I am looking to add a feature where clicking outside of the menu will automatically close it by removing the "nav-open" class. I a ...

javascriptjquerycssmenu

Screen rendering can be a challenging task

As I dive into learning how to use THREE.js for creating browser games, I've encountered a roadblock. Every time I attempt to import a model using the code, the screen just renders black. Surprisingly, I've been smoothly coding and running it in ...

javascripthtmlthree.js

Troubleshooting: Why are my images not displaying in webpack and node.js setup?

My problem: I'm facing an issue with background images in my project. I have included two images and used file-loader to bundle them through webpack. While the images display correctly in the app during development using webpack-dev-server, they disap ...

javascriptnode.jsherokuwebpack

Designing the database structure for a Q&A website powered by MongoDB

Looking for some assistance as I embark on creating a website similar to Yahoo Answers or StackOverflow (in a different category with no competition). My main hurdle right now is figuring out the best approach to structuring the database for user and quest ...

javascriptnode.jsmongodbmongoosedatabase

Most effective approach to setting up a timer using Javascript and PHP

I'm currently working on a quiz application using PHP and Javascript. The quiz begins once the user clicks a submit button, but I want it to end after a specific duration that I define. I'm hesitant to rely solely on the client-side clock as it c ...

phpjavascripthtmltimetimer

The state has been modified, but the component is failing to trigger a re-render

Utilizing the MUI card component to show all the posts of a logged-in user. This MUI card has the capability to expand or collapse based on the values of true or false. Each card is assigned a key called expanded, which is initially set as an empty string. ...

javascriptreactjsreact-hooksmaterial-ui

Trouble with loading scripts after transitioning to a new page with AJAX (Barba.js)

Exploring the potential of using AJAX for smooth page transitions. Tried two different methods so far: manually coded transition from () and Barba.js approach (). With both methods, scripts work on initial load but fail to execute when navigating to anot ...

javascriptjqueryajax

Why does Grunt encounter an issue with cdnify, displaying a warning that says: "Caution: Parameters for path.join should be in string format"?

When running grunt in my Yeoman-generated Angular project, I encounter the following warning: Running "cdnify:dist" (cdnify) task Going through dist/404.html, dist/index.html to update script refs Warning: Arguments to path.join must be strings Use --forc ...

javascriptgruntjsnpmyeomanbower

Steps for generating an array entry containing an ObjectId and a Number

I am a newbie when it comes to mongodb and I am attempting to create an entry like this: { "resources": [ { "amount": 1, "resource": { "_id": "61be82b9549b4ede ...

javascriptnode.jsmongodbexpressmongoose

JavaScript interaction with the user's interface

My JavaScript code is not properly reading the input which should be a name, and displaying the output "Maurice is a very nice name." I suspect there may be a grammatical error in my divOutput that I am overlooking. The goal of the program is to take a na ...

javascripthtml

When using Math.floor(Math.random() * val.length), the result will be a letter rather than a number

Looking to implement a feature where a different background image is displayed randomly upon page visit or refresh. Currently, specifying the images in an array like the example below works well, but I want to be able to pull from a folder. $(document).r ...

javascriptjqueryajaxmath

Issue with adding json_encode to the end

I am trying to add the service using jQuery.each(), but it is not working in my JavaScript code? This is the output I am getting from my PHP code: { "data": [{ "service": ["shalo", "jikh", "gjhd", "saed", "saff", "fcds"], "address": " ...

javascriptjqueryappendeach

Should we retain the express variable for a specific purpose?

Being a developer who is still learning the ropes, I fail to understand the necessity of creating or retaining the express variable in an express/Node app. Instead of following this conventional approach: const express = require('express'); con ...

javascriptnode.jsexpress

What is the best way to generate an extensive table with HTML and AngularJS?

I am looking to implement an expandable table feature where a single header with a plus icon can be clicked to reveal the child rows beneath it. Currently, I have been able to achieve this functionality. However, I am facing an issue where the child rows ...

javascripthtmlangularjs

Enhancing Numerical Visuals: Tips for Optimizing Visualization of Proximate Numbers using

In my chart, I noticed that the values are very close together such as: Value A -> 3.7747199435 Value B -> 3.775531821 Value C -> 3.7754975674 Value D -> 3.8358619466 Value E -> 3.8856710034 and as a result, the visualization shows minima ...

javascriptreactjsrecharts

Bootstrap not being recognized in AngularJS HTML

I've been working on learning AngularJS, but unfortunately I can't seem to get any Bootstrap themes to show up in my web application. Here is the HTML code for the header that I've been trying: <nav class="navbar navbar-default"> ...

javascripthtmlangularjsangular-ui-bootstrap

Center a grid of cards on the page while keeping them aligned to the left

I have a grid of cards that I need to align in the center of the page and left within the grid, adjusting responsively to different screen sizes. For example, if there are 10 cards and only 4 can fit on a row due to screen size constraints, the first two ...

javascriptcssreactjstypescriptmaterial-ui

Is there a way to incorporate a unique HTML map marker onto a Nokia HERE map?

After reviewing the Nokia maps documentation, it appears that custom markers can be added using a vector-based drawing API. More information can be found at: Although you can create custom graphic markers based on a sprite as demonstrated here: Alternati ...

javascripthtmlcsshere-api