Just diving into this world and looking to create a basic 3D scene where I can navigate with PointerLockControls, but I also want to incorporate a flashlight. I've managed to get the spotlight to follow the camera, but its target is fixed at 0,0,0.
Any suggestions on the ideal approach to make this happen?
Appreciate any help or advice. Thank you!
After encountering the same issue, I tackled it in the following manner:
torch = new THREE.SpotLight(0xffffff,4,40);
camera.add(torch);
torch.position.set(0,0,1);
torch.target = camera;
Realizing that a SpotLight's .target requires an object (not just a position), I opted to position the torch directly behind the camera and direct it towards the camera. This way, the light illuminates objects in front of the camera through it.
This method works well for creating a flashlight effect where the light source is close to the chest (centered on the body) rather than to one side.
The SpotLight target in this case must be an Object3D, as opposed to a Vector3.
spotlight.target = myObject;
If you are facing difficulties, consider using a PointLight instead and follow this approach:
scene.add( camera );
camera.add( pointLight );
However, if you prefer to stick with a spotlight, try the following steps:
scene.add( camera );
camera.add( spotLight.target );
spotLight.target.position.set( 0, 0, -1 );
spotLight.position.copy( camera.position ); // make sure to update the spotlight position when the camera moves
While it is not always necessary to add the camera as a child of the scene, it is required in this scenario due to the light being a child of the camera.
Version: three.js r.69
WestLangley's innovative solution inspired me to experiment further. I discovered that by adding both spotlight.target and spotlight as children to the same object, such as the camera or another object like a car or gun, they can be positioned relative to the parent object without the need for constant position copying.
One approach could be as follows:
scene.add(camera);
camera.add(gun);
gun.position.set(-30,-30,0);
gun.add(spotlight);
spotlight.position.set(0,0,30);
gun.add(spotlight.target);
spotlight.target.position.set(0,0,31);
Now, the gun will automatically follow the camera, and the spotlight will illuminate along with the gun. If the gun undergoes any rotations, the spotlight will adjust accordingly. It truly showcases the flexibility and power of THREE software. :-)
Attaching the spotlight to the camera, aligning it in the same direction, and keeping it near the center will result in a constantly circular light cone. However, for a more dynamic and realistic effect, it can be beneficial to introduce a small offset for the light cone to change shape as needed. While I haven't tested it myself, a slight adjustment like in the example above can achieve this desired effect.
My AngularJS code displays every time I reload the page https://i.sstatic.net/bzYrr.png Issue: The code appears even when my internet connection is slow or the page does not fully reload. I only want it to display the result. I would appreciate any sugg ...
<script> $(document).foundation( let total = 1 $("button.test").click(function(){ if ($("p.change-me").text() === "OFF") { $("p.change-me").text("ON") total = total + 1 } ...
Currently, I am developing a web application using Express. My goal is to merge, minify, and serve .js files efficiently. To achieve this, I have created a middleware with the following code: var fs = require('fs'), path = require('path ...
Sample URL: Note: Please use the test sign in credentials: test/test for username/password. I am currently working on an AJAX request to fetch data from a database. The serverTime.php file appears to be functioning correctly as it is inserting and return ...
I am facing an issue with the CSS code for a table positioned at the bottom of the screen. The current code includes a filter specifically for IE 8, but I need to make it compatible with IE 10 as well by removing the filter and adding a background color. ...
One of my index files includes Gsap and Barba JS, while an inner page includes additional JS files such as locomotive.js and OWLcarousel.js. These two JS files are not necessary for the index page. However, when transitioning from the index page to the inn ...
I have created a grid with a 5x7 layout using divs. I am trying to achieve a feature similar to the Netflix interface where, upon clicking on a div, a larger div will appear beneath it. This larger div should expand to 100% width of the parent container, p ...
I am facing a scenario where I have a map with a unique legend that is styled either as an SVG or a PNG. The legend is always positioned in the bottom left corner but can be quite large, as users have the option to toggle it on and off. Additionally, the ...
I am dealing with some html <body ng-controller="AppCtrl"> <ion-side-menus> <ion-side-menu-content> <ion-nav-bar class="nav-title-slide-ios7 bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-le ...
I require assistance with identifying the issue in the JavaScript code provided below. I am working with a Bootstrap 5 form where the submission is not being prevented if the fields are left blank or invalid. While the HTML/CSS validation works correctly f ...
Is it possible to hide a global component in Angular when a specific route is opened? For instance, consider the following code: app.component.html <app-header></app-header> <app-banner></app-banner> <!-- Global Component I w ...
Having trouble implementing a parameterized query in NgRx and receiving empty results. Check out the StackBlitz version of the code here: https://stackblitz.com/edit/ngrx-parameterized-query Update to Reducer Code export const userAdapter = createEntity ...
After starting a new react project with create-react-app, I am looking to update the webpack configuration. However, I cannot seem to locate the webpack file. Should I be creating this file myself, or is there another process involved? As someone who is ...
When I send the email data to this.user in the constructor, it gets stored in AppComponent. Next, I need this variable in the function getUserData to import some data...but the console.log shows undefined, and there is also an error for users: Cannot read ...
Currently, I am in the process of developing a new website using NextJS. One issue that has come up involves a password reset verification endpoint. After a user initiates a password reset, it is sent to the API for processing and then redirected back to ...
I am utilizing jQuery's .load() function to receive the bytecode of loaded images. Could it be due to a lack of specified MIMEType? because I'm using an image URL without a file extension? necessary to wrap the entire operation somehow? Here& ...
Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...
I am working on a functionality that involves comparing user input with predefined usernames and passwords. Here is what I have so far: var sys = { users: [ {user: 'user1', pass: 'qwerty'}, {user: 'Ragnar&apos ...
My AJAX call to a method in the code-behind seems to be unreliable even though I have everything set up correctly. The JavaScript function utilizes PageMethods to invoke the method in the code-behind. While most of the time it works fine, occasionally it ...
Hey there, I've been exploring the v-edit-dialog component offered by Vuetify and had a query about its implementation. Currently, I'm structuring my v-data-table in a way where I'm importing a component with props into a template slot. The ...