The entire Sphere Geometry in three.js is not completely encompassed by the texture

Click here to view the image I'm trying to create a rotating moon. Everything works perfectly with MeshStandardMaterial (with color but no texture), however, when I apply a texture to the sphere geometry, it behaves strangely. The issue I'm facing is that "the texture doesn't cover the entire surface of the sphere".

Below is my code snippet:

import React, { useEffect } from "react";
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import moonImage from "../../images/moon.jpg"

const Home = () => {

   useEffect(() => {

    const scene=new THREE.Scene();
    const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
    const canvas=document.querySelector(".homeCanvas");

    const renderer=new THREE.WebGLRenderer({canvas});

    const textureLoader=new THREE.TextureLoader();
    const moonTexture= textureLoader.load(moonImage);

    const moonGeo=new THREE.SphereGeometry(3,64,64);
    const moonMaterial=new THREE.MeshStandardMaterial({map:moonTexture});
    
    const moon=new THREE.Mesh(moonGeo,moonMaterial);
    scene.add(moon);

    const pointLight=new THREE.PointLight(0xffffff,1);
    pointLight.position.x=20;
    scene.add(pointLight);

    const controls=new OrbitControls(camera,renderer.domElement);
    camera.position.z=15;

    function animate() {
        requestAnimationFrame(animate);
        moon.rotation.x+=0.01;
        moon.rotation.y+=0.01;
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.render(scene,camera);   
    }
    animate();

  }, []);

  return (
   <>
   <div className="home"> 
    <canvas className="homeCanvas"></canvas>
   </div>
   </>
  )
}

export default Home

Answer №1

The moon appears partially visible due to the point light only illuminating one side. To address this issue, consider incorporating indirect or environmental lighting into the scene. This could involve using an environment map or a simple instance of THREE.AmbientLight as shown in the live example below:

const universe = new THREE.Scene();

const viewpoint = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

const renderEngine = new THREE.WebGLRenderer({
  antialias: true
});
renderEngine.setPixelRatio( window.devicePixelRatio );
renderEngine.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderEngine.domElement);

const textureLoader = new THREE.TextureLoader();

const lunarTexture = textureLoader.load('https://threejs.org/examples/textures/uv_grid_opengl.jpg');

const lunarGeometry = new THREE.SphereGeometry(3, 64, 64);

const lunarMaterial = new THREE.MeshStandardMaterial({
  map: lunarTexture
});

const moon = new THREE.Mesh(lunarGeometry, lunarMaterial);

universe.add(moon);

const celestialLight = new THREE.PointLight(0xffffff);
celestialLight.position.x = 20;
universe.add(celestialLight);

const ambientLighting = new THREE.AmbientLight(0xffffff, 0.6)
universe.add(ambientLighting);

viewpoint.position.z = 15;

function movement() {

  requestAnimationFrame(movement);
  
  moon.rotation.x += 0.01;
  moon.rotation.y += 0.01;
  
  renderEngine.render(universe, viewpoint);

}
movement();
body {
    margin: 0px;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed99859f8888adddc3dcd9db">[email protected]</a>/build/three.min.js"></script>

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

"Extracting information from a database in Angular Laravel to create a Chart.js display - a step-by-step

Currently, I am working on developing a dashboard application that includes various charts. My aim is to customize the data displayed in each user's chart based on information retrieved from a database. This is how my setup looks like: HTML <div ...

Header misalignment occurs when the user scrolls up too quickly causing it to display

One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...

Leverage the power of AJAX and PHP to securely save comments for future

I have coded a JavaScript function that uses POST and GET methods to send comments from an input field and retrieve them when the page reloads. However, I am unsure of how to handle the data after it is sent in order to save it and access it again later. E ...

Is it possible to send a Word file as an email attachment using PHP's mail() function

When I sent a Word document file via email, it generated an unknown format like asdfADFDF 0000sadfas15454454. The mail function was used to send the email. Below is the code for that. Please review and let me know: function sendfile() { $id = $_REQU ...

Error encountered while using XLSX.write in angular.js: n.t.match function is not recognized

I've encountered an issue while trying to generate an .xlsx file using the XLSX library. The error message I received is as follows: TypeError: n.t.match is not a function at Ps (xlsx.full.min.js:14) at Jd (xlsx.full.min.js:18) at Sv (xlsx.full.min ...

Watch as jQuery preloads every select list

There are two select lists, and the second one is dependent on the first. After loading the second list, I want to trigger some alerts. What is the most effective approach to accomplish this using jQuery? Let's say the second list is populated in the ...

Adding an extra element to the <MuiThemeProvider /> causes the page to display as blank with no error notifications

After incorporating Material UI into my Meteor application via npm install --save material ui I successfully implemented the <Header /> component in my app.js file. However, when I try to add additional components, such as localhost:3000, all I see ...

Make the object rotate around a specified vector point

I have been trying to figure out how to make an object orbit around the vector coordinates 0,0,0. Specifically, if the object is at X300, Y50, Z200, I want it to revolve around 0,0,0 without changing the position on the Y axis. Math isn't my strong su ...

Combining and restructuring multidimensional arrays in Javascript: A step-by-step guide

I'm struggling with transforming a multidimensional array in JavaScript. Here is an example of the input array: [ [['a',1],['b',2],['c',3]], [['a',4],['d',2],['c',3],['x',5]], [[&a ...

Incrementing the index in Javascript when an event occurs

I am currently working on a project that involves incrementing an index of an array based on certain events, such as a left mouse click over a designated area. The code snippet provided below initializes all values to zero and briefly changes the relevan ...

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

Enter key not triggering submission in jQuery UI autocomplete field

I'm currently working on implementing the autocomplete feature following a tutorial, and while it's functioning, I'm facing an issue with submitting the form when the user selects an item and hits enter. Below is the Coffeescript code that I ...

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

Assign the values from the axios response to variables within the exported const

Currently, I am incorporating axios into my vue.js application to perform an HTTP POST request and retrieve some variables for a vue-echart. However, I have encountered a bit of a roadblock in determining the most effective approach. The snippet below is ...

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

Having trouble getting the Socket.io package to install on Node.js in Windows 7?

Hey there! I'm having trouble installing the socket.io module using npm install socket.io. Unfortunately, I encountered the following error: npm WARN package.json <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8f80c3869 ...

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

`WebAuthn API allows for easy identification of fingerprints``

Google introduced WebAuthn https://developers.google.com/web/updates/2018/05/webauthn two years back. Is it possible to accurately identify the finger that a user registered or verified? For instance, the server could not only obtain the public key but a ...

Converting Hexadecimal Values to Base32-Encoding Using Javascript

I'm encountering a problem with converting a function from Ruby to Javascript (specifically node.js, but I prefer a solution that is compatible with browsers, if possible). Here is the hex-formatted sha256 digest: "0b08dfe80a49490ae0722b9306ff53c5ab ...

Are there any lodash functions available for removing an array that matches another array from the main array?

I currently have two arrays named available and selected, each containing certain values. I also have another array called finalAvailable where I want to include all items from the available array except those that are already present in the selected array ...