Использование текстур в трех вариантах.js

Я начинаю с трех.JS, и я пытаюсь нарисовать прямоугольник с текстурой на нем, освещенное одним источником света. Я думаю, что это так просто, как он получает (HTML опущен для краткости):

function loadScene() {
    var world = document.getElementById('world'),
        WIDTH = 1200,
        HEIGHT = 500,
        VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000,

        renderer = new THREE.WebGLRenderer(),
        camera = new THREE.Camera(VIEW_ANGLE, ASPECT, NEAR, FAR),
        scene = new THREE.Scene(),
        texture = THREE.ImageUtils.loadTexture('crate.gif'),
        material = new THREE.MeshBasicMaterial({map: texture}),
        // material = new THREE.MeshPhongMaterial({color: 0xCC0000});
        geometry = new THREE.PlaneGeometry(100, 100),
        mesh = new THREE.Mesh(geometry, material),
        pointLight = new THREE.PointLight(0xFFFFFF);

    camera.position.z = 200;    
    renderer.setSize(WIDTH, HEIGHT);
    scene.addChild(mesh);
    world.appendChild(renderer.domElement);
    pointLight.position.x = 50;
    pointLight.position.y = 50;
    pointLight.position.z = 130;
    scene.addLight(pointLight); 
    renderer.render(scene, camera);
}

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

  • текстура 256x256, так что его стороны сила двух
  • функция фактически вызывается, когда тело загружается и работает с другим материалом.
  • он не работает, даже если я обслуживаю файл с веб-сервера, поэтому это не проблема междоменной политики, не позволяющей загружать изображение.

что я делаю не так?

6 66
javascript three.js

6 ответов:

к моменту загрузки изображения рендерер уже нарисовал сцену, поэтому уже слишком поздно. Решение состоит в том, чтобы изменить

texture = THREE.ImageUtils.loadTexture('crate.gif'),

на

texture = THREE.ImageUtils.loadTexture('crate.gif', {}, function() {
    renderer.render(scene);
}),
70

решение Андреа абсолютно правильно, я просто напишу другую реализацию, основанную на той же идее. Если вы взглянете на этих троих.Имиджмейкеры.loadTexture() источник вы найдете, что он использует объект изображения javascript. Окно.)событие загрузки запускается после загрузки всех изображений ! так что в этом случае мы можем сделать нашу сцену с текстурами уже нагруженный...

  • CoffeeScript

    $(document).ready ->

    material = new THREE.MeshLambertMaterial(map: THREE.ImageUtils.loadTexture("crate.gif"))

    sphere   = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material)

    $(window).load ->
        renderer.render scene, camera

  • JavaScript

    $(document).ready(function() {

    material = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture("crate.gif") });

    sphere = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material);

    $(window).load(function() {
        renderer.render(scene, camera);
    });
});

спасибо...

27

в версии r75 из трех.JS, вы должны использовать:

var loader = new THREE.TextureLoader();
loader.load('texture.png', function ( texture ) {
  var geometry = new THREE.SphereGeometry(1000, 20, 20);
  var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});
20

в версии r82 из трех.js TextureLoader является объектом для загрузки текстуры.

загрузка одной текстуры (исходный код,демо)

экстракт (

5

используйте TextureLoader для загрузки изображения в виде текстуры, а затем просто примените эту текстуру к фону сцены. 

 new THREE.TextureLoader();
     loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
                {
                 scene.background = texture;  
                });

результат:

https://codepen.io/hiteshsahu/pen/jpGLpq?editors=0011

Смотрите ручку Плоская Земля Три.JS по Hitesh Sahu (@hiteshsahu) на CodePen.
0

Без Ошибок Handeling

//Load background texture
 new THREE.TextureLoader();
loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });

С Обработкой Ошибок

// Function called when download progresses
var onProgress = function (xhr) {
  console.log((xhr.loaded / xhr.total * 100) + '% loaded');
};

// Function called when download errors
var onError = function (error) {
  console.log('An error happened'+error);
};

//Function  called when load completes.
var onLoad = function (texture) {
  var objGeometry = new THREE.BoxGeometry(30, 30, 30);
  var objMaterial = new THREE.MeshPhongMaterial({
    map: texture,
    shading: THREE.FlatShading
  });

  var boxMesh = new THREE.Mesh(objGeometry, objMaterial);
  scene.add(boxMesh);

  var render = function () {
    requestAnimationFrame(render);
    boxMesh.rotation.x += 0.010;
    boxMesh.rotation.y += 0.010;
      sphereMesh.rotation.y += 0.1;
    renderer.render(scene, camera);
  };

  render();
}


//LOAD TEXTURE and on completion apply it on box
var loader = new THREE.TextureLoader();
    loader.load('https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/1920px-The_Earth_seen_from_Apollo_17.jpg', 
                onLoad, 
                onProgress, 
                onError);

результат:

enter image description here

https://codepen.io/hiteshsahu/pen/jpGLpq/

0