A guide on incorporating a map into a light source using ThreeJS

Currently, I am in the process of creating a basic solar system and facing an issue with making the Sun a light source while also incorporating an image to represent the sun. The code I've implemented allows it to function as a light source; however, it appears as a black circle instead of the desired appearance. Any suggestions or ideas on how to resolve this dilemma?

//Integrating the depiction of the Sun
geometry1 = new THREE.SphereGeometry( 100, 32, 32 );
light = new THREE.PointLight( 0xffffff, 1, 5000 );
material1 = new THREE.MeshStandardMaterial( {
// emissive: 0xff00ff,
// emissiveIntensity: 1,
map: THREE.ImageUtils.loadTexture('sun.jpg'),
color: 0xffffff,
side: THREE.FrontSide
});
light.add(new THREE.Mesh(geometry1, material1));
light.position.set(0,0,0);
light.castShadow = true;

The current scene displays the Earth illuminated by light from the Sun.

This is the implemented code for generating the representation of the sun, subsequently added to the existing scene. Thank you for any insight provided!

Answer №1

If you want to enable skinning, make sure to include skinning: true

shape1 = new THREE.BoxGeometry( 50, 50, 50 );
sourceLight = new THREE.DirectionalLight( 0xffffff, 1, 2000 );
material2 = new THREE.MeshPhongMaterial( {
    // specular: 0xff0000,
    // shininess: 50,
    skinning: true,
    map: THREE.ImageUtils.loadTexture('moon.jpg'),
    color: 0xffffff,
    side: THREE.BackSide
});
sourceLight.add(new THREE.Mesh(shape1, material2));
sourceLight.position.set(100,100,100);
sourceLight.castShadow = true;

Answer №2

To enhance visibility, simply adding emissive color and adjusting intensity can make a significant difference. It's also advisable to incorporate an ambient light and adjust its intensity according to the scene.

In my current project, I am utilizing a sphere with a texture map alongside a point light and ambient light. Both the point light and sun are positioned at the origin.

AmbientLight parameters: color - 0xffffff, intensity - 1
PointLight parameters: color - 0xffffff, intensity - 10, distance - 100, decay - 0
Emissive color - '#FFA500'
Emissive intensity - 0.5

By following this setup, the anticipated result is achieved as depicted https://i.sstatic.net/eiJXP.png

Just a note: There may be some variations in results when using React Three Fiber, but it has been verified that without emissiveness, the sphere appeared black in color.

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 incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

In our current project, we are developing an Angular application utilizing the Angular monorepo structure. This setup includes a parent application and several children applications, with the parent application located in the `app` folder and the children ...

What is the relationship between $.when, apply(), and $.done() within the scope of this function?

I recently received this function from a helpful SO user that allows for returning a variable number of jQuery $.get() requests. The initial part seems pretty straightforward, but I am struggling to understand how $.when(), apply(), and $.done() are inte ...

React Bootstrap problem

Having trouble with the grid system - I can't seem to make it work. Here's my code: import React from "react"; import {Col, Row} from "react-bootstrap"; const Home = () => { return ( <Row className=&quo ...

Obtaining the chosen options from a dropdown menu

I am facing an issue with retrieving values from dropdown menus on a webpage that are used to filter a list. Despite trying various methods, I am not getting any values returned in my function. Here is what I have attempted: - var browserVal= document.ge ...

The footer is now accompanied by the <v-navigation-drawer> on the side

I am looking for a way to dynamically adjust the height value of a style applied to an element based on certain conditions. Specifically, when scrolling to the bottom, I want the height to be 77.5%, when the footer is not visible at all, it should be 100%, ...

Disabling the global ajax datatype causes issues with Rails remote links

I have successfully developed a rails application that submits a form remotely and then displays form validation errors if the validation process fails. The form itself is working perfectly. However, I've come across an issue where the way I've ...

Extract an array from a JSON array based on the lowest value of the keys

Consider the following array: [{ "activity" : "Hiking", "level" : "8.5" }, { "activity" : "Swimming", "level" : "-3.2" }] I want to loop through the JSON data and identify the object with the lowest value for level. In this example, I sho ...

Error message 'Table data not defined' encountered while utilizing datatables jquery in CodeIgniter

Struggling to implement the datatables jQuery plugin with CodeIgniter, but not having much success. As a newbie to this API, I'm solely focusing on using the dataTables jQuery plugin and avoiding ignitedTables. The view displays: Undefined table dat ...

Tracking ajax calls with piwik: A step-by-step guide

I'm curious about how to enable piwik to track ajax requests. I know there is an API available, but I'm unsure about the exact steps I need to take in order to view ajax loaded pages in the dashboard. Could it be something like this: _paq.push( ...

Struggling to generate package using manifoldjs

Excited to dive into the new tool called ManifoldJS introduced by Microsoft at Build 2015, I'm facing some challenges. My website is up and running as a basic HTML- and JS-based app using Angular and TypeScript. I've even created a manifest.json ...

Having trouble with AngularJS $location.path() not redirecting properly?

Why am I unable to redirect to a different URL using $location.path in angular.js? .controller('CheckCtrl', function($scope, $localStorage, $location) { $scope.check = function(){ if($localStorage.hasOwnProperty("accessToken") === t ...

Creating custom routes with varying functionalities in express.js

I am currently facing a situation where I have multiple router.get functions in my code that I believe could be condensed into a single switch-case function. I have attempted the following approach: function handlerA(req, res) {} function handlerB(req, r ...

Enhance your obj model in React three fiber with the addition of textures

I am looking to incorporate texture into my app for loaded .obj models. The same issue arises with .fbx loaded models as well. Below is the code snippet I have been working on, but it seems to only work with something like sphereGeometry and not with a loa ...

To effectively store the input values from eight labels into an array and subsequently identify the prime numbers within the array using JavaScript, follow these step-by-step instructions

As a newcomer to JavaScript, I am trying to extract the values of 8 labels (text) and store them in an array of 8 numbers. My goal is to then identify the prime numbers within this array. While I have been able to create the array and display the labels in ...

Guide to building an HTML table on-the-fly using JSON information

I am trying to extract specific data from a "JSON" array. I have attempted the following code, but I am still in need of help. <?php $uri=$_POST['uri']; $api_key=$_POST['api_key']; $board=$uri.$api_key; $value=file_get_contents($boa ...

Display a concealed div when an ng-click event occurs within an ng-repeat loop

$scope.editPostComment = false; Whenever I click on the button, it displays the textarea in all the repeated items instead of just the clicked div! <div class="commentBox" ng-show = "editPostComment"> <textarea name="editor2" ...

Struggling with setting up and installing the MDX transformer plugin (as well as its dependencies) on a Gatsby site

Task: Currently working on setting up a basic blog using Gatsby Results: Expected Result: Following the tutorial guide as expected Actual Result: Encountering Dependency tree error at certain steps & also receiving a warning message stating 34 vulnerab ...

Display all entries from the Mongoose database using the Pug template engine

UPDATED I am struggling to print the items from my database 'reizen' in Mongoose. All I get is 'Geen reizen' even though there are items created. I have been searching for a solution for a while now but can't seem to fix it. Here ...

Execute code after the CSS has been loaded, but before the images start downloading

My website is experiencing a challenge. Downloading images is taking too long, with the complete website taking around 20 seconds to fully load on my system. A loader is displayed but only hides once the complete website is loaded (after 20 seconds). Whe ...

Unable to execute query with $gt and $size in Mongoose

Below is my mongoose query along with the router: router.get('/reportsRegular', function(req,res,next){ Question.find({reports: {$size: {$gt: 0}}, checked: false}).sort({reports: -1}).limit(20).exec(function(err,results){ console.log(result ...