Unable to view mapped texture

Questions
1

I am new to three.js and have been practicing trying to learn it and i am absolutely stuck, have gone to stack overflow and GPT about this issue and nothing seems to help.
I am trying to map a simple texture, 1:1 aspect ratio and a jpg that is in the project folder, it’s directly in the same directory as the html file and js file, everything else seems to work great.
nothing seems to be showing up and i’m not sure why. I am viewing it in chromium on manjaro linux

import * as THREE from 'https://unpkg.com/three/build/three.module.js';


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


gsap.to(".txt", {duration: 2, x:425});

const geometry = new THREE.BoxGeometry( 3, 2, 2);
const geometry2 = new THREE.SphereGeometry( 1, 32, 32);
const floorgeo = new THREE.PlaneGeometry( 20, 20);


const texture = new THREE.TextureLoader().load( 'trianglefabric.jpg' );

const material2 = new THREE.MeshStandardMaterial({
  color: 0x3e32a8,
  emissive: 0x3e32a8,
  side: THREE.DoubleSide,
  map: texture 

});

const material = new THREE.MeshStandardMaterial({
    color: 0xafc9b6,
    emissive: 0xafc9b6,
    map: new THREE.TextureLoader().load('trianglefabric.jpg'),
  });

const wireframe = new THREE.MeshBasicMaterial({
    color: 0xff0000, 
    transparent: true,
    opacity: 0.5,
    wireframe: true,
    wireframeLinewidth: 3,
  });

const floor = new THREE.Mesh(floorgeo, material2);
const cube = new THREE.Mesh( geometry, material );
const sphere = new THREE.Mesh( geometry2, wireframe );
scene.add( floor );
scene.add( cube );
scene.add( sphere );

sphere.position.set( 2, 0, 0 );
floor.position.set( 0, -2, 0 );
floor.rotation.x = -Math.PI / 2;

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    sphere.rotation.y += -0.01;

    renderer.render( scene, camera );
}

animate();```
2

nvm, fixed it by adding a light!

1 Like
3

/cc