TextureLoader не работает в Three.js. Как мне заставить это работать? - PullRequest
Новая
       22

TextureLoader не работает в Three.js. Как мне заставить это работать?

0 голосов
/ 11 октября 2019

Я использую Three.js для создания 3D-среды. Когда я пытаюсь сделать это с цветом, он работает нормально. 

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 );

Однако, когда я пытаюсь загрузить изображение в качестве текстуры, экран просто пустой. 

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 );

Мойконечная цель - использовать повторить из текстуры, чтобы создать текстуру типа шахматной доски для моего самолета. (https://threejs.org/docs/#api/en/textures/Texture.repeat)

Пожалуйста, помогите мне с альтернативой TextureLoader.

Я тоже пытался загрузить его вручную, но не работает. 

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';
  }
});
...