Javascript 在THREE.js中使用纹理

我从THREE.js开始，试图画一个带有纹理的矩形，由单一光源照亮。我认为这很简单（为了简洁起见省略了HTML）：

问题是，我什么都看不见。如果我更改材质并使用已注释的材质，则会像我预期的那样出现一个正方形。注意

• 纹理为256x256，因此其侧面为二次幂
• 该函数实际上是在加载实体时调用的；事实上，它使用的是不同的材料
• 即使我从Web服务器提供文件，它也不起作用，因此不允许加载映像不是跨域策略的问题

---

我做错了什么？

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

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

进入

---

Andrea的解决方案是绝对正确的，我将基于同样的想法编写另一个实现。 如果查看三个.ImageUtils.loadTexture（），您会发现它使用了javascript图像对象。$（窗口）.load事件在加载所有图像后激发！所以在那个事件中，我们可以用已经加载的纹理渲染我们的场景

• 咖啡脚本

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

---

谢谢…

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

---

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

加载一个纹理（，） 摘录（）：

加载多个纹理（，） 在本例中，纹理加载在网格的构造函数中，使用加载多个纹理

摘录（）：

使用

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对象值的

val

承诺数组，对于贴图中名为

纹理的每个对象

在数组

纹理promises

中推送一个新承诺，每个承诺都将调用

加载程序。如果
entry.val
的值是有效的
THREE.Texture
对象，则解析承诺

  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;

使用TextureLoader将图像加载为纹理，然后简单地将该纹理应用于场景背景

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

结果:


请参见上的Hitesh Sahu（）笔，无误操作

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

具有错误处理功能

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

结果：


回答得很好！我猜API在原始答案之后发生了变化。你的答案很实用！非常感谢！您可能应该提供您所指的three.js的最新版本。现在，答案是放弃
three.ImageUtils.loadTexture
（已弃用）而改用
three.TextureLoader.load
ImageUtils
对我来说根本不起作用，但是
TextureLoader
在我第一次尝试它时工作得非常好。文件：
//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);