Three.js - Adding texture makes it look black - three.js

Question

I m making custom 3D Objects using an image. First i take outline from an image and after getting points i create the shape. Then i m using three.js extrude geometry to make it look like 3D Object.
The issue is the texture i m using is showing complete black. I used this code to scale the texture.
texture.wrapT = texture.wrapS = THREE.RepeatWrapping;
var rx = 1/img.width;
var ry = 1/img.height;
texture.repeat.set(rx,ry);
This gives me the result in the image below:
NOTE: I m using GLTF Exporter.
It is scaling the texture correctly, but i cant set the offset. The image is not arranged properly.
I want to dynamically set the offset as my images will be different every time. I can set the offset manually and achieve the results as show in the image below. But i want this to be dynamic.
NOTE: This is the offset i m setting manually for this image to achieve results.
texture.offset.set(0.188,0.934);
I really need help. Any help will be appreciated. Thanks.

Answer 1

It's not clear what you're trying to do but ...
texture.repeat set how many times a texture repeats so texture.repeat.set(2,3) means repeat twice across and three times down. That means your code texture.repeat.set(1 / img.width, 1 / img.height) will expand the texture so that only 1 pixel is visible.
repeat.set(2, 3);
repeats 2 across 3 down
repeat.set(1/2, 1/3);
repeats 0.5 across .33 down or in other words show half the texture across and 1/3 of the texture down
offset moves the texture where
1 = move it 100% to the left (if the texture repeats there will be no change at 1 since you've move it 100%)
0.5 = move it 50% to the left
0.25 = move it 25% to the left
-0.10 = move it -10% to the right
If you want to move it in pixels this is where you'd use img.width
1/img.width = move it one pixel left
See the example at the bottom of this page
body {
margin: 0;
}
#c {
width: 100vw;
height: 100vh;
display: block;
}
<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry(1, 1);
const obs = []; // just an array we can use to rotate the cubes
const loader = new THREE.TextureLoader();
for (let i = 0; i < 10; ++i) {
const texture = loader.load('https://i.imgur.com/ZKMnXce.png');
// expand the texture so only 40% of stretched across the plane
texture.repeat.set(0.4, 0.4);
// randomly offset the texture
texture.offset.set(rand(1), rand(1));
// make it repeat
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.magFilter = THREE.NearestFilter;
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide,
});
const plane = new THREE.Mesh(geometry, material);
plane.position.set(rand(-1, 1), rand(-1, 1), 0);
plane.position.set(rand(-1, 1), rand(-1, 1), 0);
scene.add(plane);
obs.push(plane); // add to our list of obs to rotate
}
function rand(min, max) {
if (max === undefined) {
max = min;
min = 0;
}
return Math.random() * (max - min) + min;
}
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
obs.forEach((obj, ndx) => {
const speed = .2 + ndx * .1;
const rot = time * speed;
obj.rotation.z = rot;
});
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>