2

I am using Three.js to create a 3D Environment. When I am trying it with color, it works fine.

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0x999999, side: THREE.DoubleSide, wireframe: false});
var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

However, when I am trying to load an image as texture, the screen is just blank.

var geometry = new THREE.PlaneBufferGeometry( 4, 20, 32 );
var material = new THREE.MeshPhongMaterial( {map: new THREE.TextureLoader( ).load('img/4.png'), side: THREE.DoubleSide, wireframe: false});

var plane = new THREE.Mesh( geometry, material);
scene.add( plane );

My final goal is to use repeat from Texture to create a chess board type texture for my plane. (https://threejs.org/docs/#api/en/textures/Texture.repeat)

Please help me with the alternative to TextureLoader.

I have tried manually loading it too but doesn't work.

var request = require('request').defaults({ encoding: null });
var url = "img/4.png";

request(url, function(error, response, data) {
  if (!error && response.statusCode == 200) {
    var image = new Canvas.Image();
    image.src = data;

    var texture = new THREE.Texture(image);
    texture.needsUpdate = true;

    var material = new THREE.MeshPhongMaterial({map: texture, overdraw: true});
  } else {
    response = 'error';
  }
});
SAK
  • 65
  • 1
  • 9
  • Any warning or error message in console? – prisoner849 Oct 11 '19 at 06:41
  • @prisoner849 Hey nothing. I am actually trying to implement https://jsfiddle.net/prisoner849/stutL9z0/ from you. I am still trying to understand how to put it on plane instead of box. – SAK Oct 11 '19 at 08:11
  • Take a look at this [forum topic](https://discourse.threejs.org/t/grids-of-waves-shaders/1168?u=prisoner849) and its jsfiddle, where you can find a method `.toGrid()` for re-ordering the index of `THREE.PlaneBufferGeometry()` to use it with `THREE.LineSegments()`. Also, in addition, take a look at this [forum topic](https://discourse.threejs.org/t/gridboxgeometry/1420?u=prisoner849). – prisoner849 Oct 11 '19 at 08:27

0 Answers0