Mastering the placement of lights in ThreeJS

Struggling for nearly half an hour now, attempting to place a pointlight at the base of my model, but achieving dismal outcomes. Not sure of the dimensions of my model, and consistently failing to accurately pinpoint the light within the scene.

Thought about using a cube to mark the exact location of the pointlight, but introducing another geometry disrupts the texture update feature for my primary obj. Seems like that option is off the table.

Any suggestions for precise light placement?

Check out my code at view-source:

javascriptthree.js

Answer №1

Every shape in the collection comes with a boundingSphere attribute that helps determine the size of the object. Explore more at . If the attribute is missing, you can calculate it by using 

geometry.computeBoundingSphere();

When it comes to lighting, there is a convenient helper function for each light type that visually shows where the light is located:

https://threejs.org/docs/index.html?q=Helper#Reference/Extras.Helpers/HemisphereLightHelper
https://threejs.org/docs/index.html?q=Helper#Reference/Extras.Helpers/DirectionalLightHelper
https://threejs.org/docs/index.html?q=Helper#Reference/Extras.Helpers/PointLightHelper
https://threejs.org/docs/index.html?q=Helper#Reference/Extras.Helpers/SpotLightHelper

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

Encountering an issue while setting up the ContextAPI in nextJS, where properties of undefined Provider cannot be read

I'm encountering difficulties in implementing ContextAPI with a nextjs application. The error message I keep receiving is: TypeError: Cannot read properties of undefined (reading 'Provider') This is my approach to creating the context: impo ...

javascriptreactjsnext.js

Is there an undocumented property lurking in the depths of the Webpack server

The document specifies that Options that work with webpack-dev-middleware will have a key symbol next to them. I couldn't find any information on "cookieDomainRewrite" but when I tried using it, it worked. Any insights? Or suggestions on how I ...

javascriptnpmwebpackwebpack-dev-serverwebpack-dev-middleware

What is the best way to retrieve multiple image file names using JavaScript?

I attempted to use the code snippet below to retrieve the names of all the images I selected, however when I used 'alert', I only received one name even though I selected multiple. My goal is to have all the names of the selected photos saved in ...

javascripthtml

504 error when attempting to access HTTPS with Node.js

I have encountered an issue with making an https request in my backend node.js web app. The code I am using is as follows: const express = require('express'); const https = require('https'); const app = express(); app.get("/", functio ...

javascriptnode.jsexpresshttps

Amchart 5: Tracking Cursor Movement on the X Axis

I am a beginner with amCharts5 and I am in need of assistance to retrieve the actual X value of the cursor on my chart (where the X axis represents dates). I have come across helpful examples for amCharts 4, but nothing seems to work for amCharts 5. Is thi ...

javascriptcursoramchartsamcharts5

What is the method for checking the pathname condition?

Hello, I am attempting to create an if statement for the pathname, but I am having trouble getting it to work properly. if (pathname == "/") { category = 'home'; pagetype = 'homepage'; } If the pathname matches "/", the script ...

javascriptif-statementpathname

Launching a new tab with a specific URL using React

I'm attempting to create a function that opens a new tab with the URL stored in item.url. The issue is, the item.url property is provided by the client, not by me. Therefore, I can't guarantee whether it begins with https:// or http://. For insta ...

javascriptreactjstypescript

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...

javascripthtmltwitter-bootstrap

Tips for utilizing jQuery to identify an image that is being hovered on?

Concept My goal is to create an effect where a user hovers over an image and a transparent overlay div appears on top of it. This overlay div starts with a height of 0px and should increase to half of the image height upon hover. The hover functionality ...

javascriptjqueryhtmlcss

Receiving a JSON object in response after sending data to a server using JavaScript

I am facing an issue with passing an email and password on login click to a database using PHP. After testing the email and password combination, PHP sends back a JSON object. While I have verified that the PHP code is functioning correctly and returns a J ...

javascriptphpjsonajax

Unable to receive Ajax response

My current programming setup involves using a combination of JavaScript and PHP to implement an Ajax code. However, at this point in time, the outcome is showing up as undefined. To circumvent this issue, I have resorted to utilizing localStorage to trans ...

javascriptphpajax

Cause a malfunction in the triggering function of jQuery

$(document).ready(function(){ jQuery("#but1").bind("click",function(e){ alert(e.name); }); jQuery("#but1").trigger({name:'Dmy', surname:'My'}); }); The information doesn't seem to be getting passed correctly a ...

javascriptjquery

Erase the destination pin on Google Maps

I am currently working on a project that involves displaying hit markers on google maps along with a route from start to finish. Although I have successfully displayed the route, I encountered an issue where both the origin and destination have identical ...

javascriptgoogle-mapstypescriptgoogle-maps-api-3google-maps-markers

Unable to retrieve the value of ng-model using $scope

Having some trouble getting the ng-model value when clicking a button that triggers a function to add each ng-model value to an object. Interestingly, when trying to get the value of $scope.shipNameFirst, it shows up as undefined in the second example. I& ...

javascripthtmlangularjsangularjs-scope

Inquiry about the notification: "Three.WebGLRenderer: Image size has been adjusted from (4160x3120) to (4096x3072)."

While loading a large image, I am noticing a warning on the console: "THREE.WebGLRenderer: Texture has been resized from (4160x3120) to (4096x3072)." This warning originates from three.module.js, triggered when surpassing the maxSize of 4096 c ...

three.js

When trying to access the key value of a dynamically generated object, it returns as undefined

I am facing a challenge with my student object structure... { Freshmen: [{id: 3}, {id: 5}], Sophomores: [{id: 2}, {id: 6}], Juniors: [{id: 1}, {id: 8}], Seniors: [{id: 9}, {id: 4}, {id: 7}] } My goal is to retrieve full student objects from the d ...

javascriptangulartypescript

Using the SmartSheets API to Iterate Over a List to Determine the Variable of a Function

I have a group of numerical values listed below that are stored in a variable. [700000000084, 100000000051652, 8800000000000072, 280000000000004, 680000000000008, 880000000000006] My goal is to iterate through this list using the SmartSheets API to gathe ...

javascriptnode.jssmartsheet-api

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

javascriptjqueryhtmltabsionic-framework

Tips for correctly updating the status of a checkbox linked to a database

I need some guidance on handling the state change of an input checkbox in React. The checkbox's initial value is determined by a boolean retrieved from a database. Currently, I am using defaultChecked to set the checkbox initially based on this boolea ...

javascriptreactjscheckbox

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

const styling = { base: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', height: 48, ...

javascriptreactjstypescriptmaterial-ui