在 THREE.js 中使用纹理

Question

我从 THREE.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，因此其边长是 2 的幂
• 该函数实际上是在加载主体时调用的；事实上，它适用于不同的材料。
• 即使我从网络服务器提供文件，它也不起作用，因此这不是跨域策略不允许加载图像的问题。

我做错了什么？

Answer 1

当加载图像时，渲染器已经绘制了场景，因此为时已晚。解决办法就是

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

改成

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

Answer 2

安德里亚的解决方案是绝对正确的，我将根据相同的想法编写另一个实现。
如果您查看了 THREE.ImageUtils.loadTexture() 源代码 你会发现它使用了 javascript Image 对象。加载所有图像后会触发 $(window).load 事件！因此，在这种情况下，我们可以使用已加载的纹理渲染场景...

• CoffeeScript

  $(文档).ready ->
  
      材质 = new THREE.MeshLambertMaterial(map: THREE.ImageUtils.loadTexture("crate.gif"))
  
      球体 = new THREE.Mesh(new THREE.SphereGeometry(半径、线段、环)、材质)
  
      $(窗口).load ->
          渲染器.渲染场景、相机
  

• JavaScript

  $(文档).ready(function() {
  
      材质 = new THREE.MeshLambertMaterial({ 地图: THREE.ImageUtils.loadTexture("crate.gif") });
  
      球体 = new THREE.Mesh(new THREE.SphereGeometry(半径、线段、环)、材质);
  
      $(窗口).load(函数() {
          渲染器.渲染（场景，相机）；
      });
  });
  

谢谢...

Answer 3

在 Three.js 的 r75 版本中，您应该使用：

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

Answer 4

在 Three.js 的 r82 版本中 TextureLoader 是用于加载纹理的对象。

加载一个纹理（源代码，演示）

提取（test.js):

var scene = new THREE.Scene();
var ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight,
  0.1, 50);

var renderer = ...

[...]

/**
 * Will be called when load completes.
 * The argument will be the loaded texture.
 */
var onLoad = function (texture) {
  var objGeometry = new THREE.BoxGeometry(20, 20, 20);
  var objMaterial = new THREE.MeshPhongMaterial({
    map: texture,
    shading: THREE.FlatShading
  });

  var mesh = new THREE.Mesh(objGeometry, objMaterial);

  scene.add(mesh);

  var render = function () {
    requestAnimationFrame(render);

    mesh.rotation.x += 0.010;
    mesh.rotation.y += 0.010;

    renderer.render(scene, camera);
  };

  render();
}

// 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 (xhr) {
  console.log('An error happened');
};

var loader = new THREE.TextureLoader();
loader.load('texture.jpg', onLoad, onProgress, onError);

加载多个纹理 (源代码，demo)

在此示例中，纹理加载到网格的构造函数内，使用 承诺。

提取 (Globe.js)：

使用 创建一个新容器Object3D 用于在同一个容器中拥有两个网格：

var Globe = function (radius, segments) {

  THREE.Object3D.call(this);

  this.name = "Globe";

  var that = this;

  // instantiate a loader
  var loader = new THREE.TextureLoader();

一个名为 textures 的地图，其中每个对象都包含纹理文件的 url 和用于存储 Three.js 纹理 对象。

  // earth textures
  var textures = {
    'map': {
      url: 'relief.jpg',
      val: undefined
    },
    'bumpMap': {
      url: 'elev_bump_4k.jpg',
      val: undefined
    },
    'specularMap': {
      url: 'wateretopo.png',
      val: undefined
    }
  };

Promise 数组，对于映射中名为 textures 的每个对象，在数组 texturePromises 中推送一个新的 Promise，每个 Promise 都会调用 loader.load 。如果 entry.val 的值是有效的 THREE.Texture 对象，则解析该 Promise。

  var texturePromises = [], path = './';

  for (var key in textures) {
    texturePromises.push(new Promise((resolve, reject) => {
      var entry = textures[key]
      var url = path + entry.url

      loader.load(url,
        texture => {
          entry.val = texture;
          if (entry.val instanceof THREE.Texture) resolve(entry);
        },
        xhr => {
          console.log(url + ' ' + (xhr.loaded / xhr.total * 100) +
            '% loaded');
        },
        xhr => {
          reject(new Error(xhr +
            'An error occurred loading while loading: ' +
            entry.url));
        }
      );
    }));
  }

Promise.all 将 Promise 数组 texturePromises 作为参数。这样做会让浏览器等待所有的承诺得到解决，当它们解决时，我们就可以加载几何图形和材质。

  // load the geometry and the textures
  Promise.all(texturePromises).then(loadedTextures => {

    var geometry = new THREE.SphereGeometry(radius, segments, segments);
    var material = new THREE.MeshPhongMaterial({
      map: textures.map.val,
      bumpMap: textures.bumpMap.val,
      bumpScale: 0.005,
      specularMap: textures.specularMap.val,
      specular: new THREE.Color('grey')
    });

    var earth = that.earth = new THREE.Mesh(geometry, material);
    that.add(earth);
  });

对于云球来说，只需要一种纹理：

  // clouds
  loader.load('n_amer_clouds.png', map => {
    var geometry = new THREE.SphereGeometry(radius + .05, segments, segments);
    var material = new THREE.MeshPhongMaterial({
      map: map,
      transparent: true
    });

    var clouds = that.clouds = new THREE.Mesh(geometry, material);
    that.add(clouds);
  });
}

Globe.prototype = Object.create(THREE.Object3D.prototype);
Globe.prototype.constructor = Globe;

Answer 5

没有错误处理

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

结果：

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

Answer 6

使用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< /a>

See the Pen Flat Earth Three.JS by Hitesh Sahu (@hiteshsahu) on CodePen.