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