Having an issue loading a texture in three.js for use as a normal map. No errors are being reported, but the texture fails to load, resulting in a black sphere.
import * as THREE from 'three';
/** Setting up the scene. */
const canvas = document.querySelector('#canvas');
const scene = new THREE.Scene();
const textureLoader = new THREE.TextureLoader();
/** Creating a sphere. */
const geometry = new THREE.SphereBufferGeometry(.5, 64, 64);
const material = new THREE.MeshStandardMaterial({
metalness: 0.7,
roughness: 0.2,
normalMap: textureLoader.load('https://res.cloudinary.com/axiol/image/upload/v1617884764/CodePen/normalMap.png'),
color: new THREE.Color(0x292929)
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
/** Setting the scene dimensions. */
const sizes = {
width: window.innerWidth,
height: window.innerHeight
};
/** Adding some light. */
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
window.addEventListener('resize', () => {
sizes.width = window.innerWidth
sizes.height = window.innerHeight
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
});
/** Positioning the camera. */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 2;
scene.add(camera);
/** Rendering the scene. */
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.render(scene, camera);
Unable to identify the issue causing the texture to not load. Any insights?