CODEWITHSUNDEEP
javascriptthree.js
Green Ball
Green Ball

Reputation: 90

three.js texture not showing and is black

I'm trying to create a simple scene with a plane. It will have a texture

Here is the code: https://jsfiddle.net/0w6vfLt4/1/

However the texture is black. If you change map: texture to color: white you will see a white plane. Meaning everything else is working, but the texture

What am I doing wrong? and how to fix this?

Upvotes: 0

Views: 2779

Answers (2)

Vasanth kumar
Vasanth kumar

Reputation: 1

The texture image should be of resolution 512 x 512 px to work in mobile. I faced the issue of black texture in mobile. I reduced my texture image resolution from 2000 x 2000 px to 512 x 512 px and it worked perfectly.

Upvotes: 0

hydra
hydra

Reputation: 87

This is related to Using textures in THREE.js

Try using with the load function with callbacks like in here https://threejs.org/docs/index.html#api/en/loaders/TextureLoader and setting the texture to repeat like in https://threejs.org/docs/#api/en/textures/Texture.repeat

//Create a scene, camera and a renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

//Load the texture
var loader = new THREE.TextureLoader();
loader.load(
  "https://cdn.glitch.com/62a3a7d1-3c19-4fb7-b1ef-a1c65ba38596%2Fboard.svg?v=1577426114562",
  
  function (texture) {
	  var material = new THREE.MeshBasicMaterial({ map: texture });
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 4, 4 );
  
  //Create a 8x8 plane with texture
  var geometry = new THREE.PlaneBufferGeometry(8, 8);
  //var material = new THREE.MeshBasicMaterial({ map: texture });
  var plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  //Render the scene
  renderer.render(scene, camera);
  document.body.appendChild(renderer.domElement);
  },
  
	undefined,

	function ( err ) {
		console.error( 'An error happened.' );
	}

);
body {
  margin: 0;
  font-family: monospace;
}
canvas {
  width: 100%;
  height: 100%;
}
<script src="https://threejs.org/build/three.js"></script>

Upvotes: 1

Related Questions