Three.js 如何在PlaneGeometry中添加纹理

如何向平面几何体添加纹理？这是我的密码。目前，它只显示黑色。当我删除

MeshBasicMaterial

中的参数时，它会显示一个白色正方形

var container, mesh;

container = document.getElementById( 'threejs2' );
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 1000);

scene.add(camera)

var texture = new THREE.Texture('https://images.pexels.com/photos/358482/pexels-photo-358482.jpeg?auto=compress&cs=tinysrgb')
var material = new THREE.MeshBasicMaterial({
  map: texture
});
var geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight, 32 );

var mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

var renderer = new THREE.WebGLRenderer({
  canvas: container,
  antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

renderer.render( scene, camera );

---

为此，请考虑使用

THREE.TextureLoader

，它提供了加载纹理和为材质指定纹理的首选方法

加载纹理时，它将显示在使用

THREE.MeshBasicMaterial

材质的任何几何体上：

var container, mesh;

container = document.getElementById( 'threejs2' );
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 1000);

scene.add(camera)

// Make use of the `TextureLoader` object to handle asynchronus loading and
// assignment of the texture to your material    
var material = new THREE.MeshBasicMaterial();
var loader = new THREE.TextureLoader();
loader.load( 'https://images.pexels.com/photos/358482/pexels-photo-358482.jpeg?auto=compress&cs=tinysrgb', 
function ( texture ) {    

    // The texture has loaded, so assign it to your material object. In the 
    // next render cycle, this material update will be shown on the plane 
    // geometry
    material.map = texture;
    material.needsUpdate = true;
});

var geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight, 32 );

var mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

var renderer = new THREE.WebGLRenderer({
  canvas: container,
  antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

// [UPDATE]
function renderFrame() {
  renderer.render( scene, camera );
  window.requestAnimationFrame(renderFrame);
}
renderFrame();

---

有关如何正确加载纹理的信息，请参阅。从外部源提取纹理可能会触发CORS问题。最好在本地托管纹理，这也有助于缩短加载时间。感谢您花时间回答我的问题并解释问题。我试图粘贴你的更新代码，但它仍然显示白色正方形，而不是图像。我还尝试使用另一个图像以防万一，同样的结果。我对使用threejs非常陌生。抱歉。您好@user3779015，请查看代码底部的更新sample@user3779015还要注意

material.needsUpdate=true已添加谢谢@Darce Denny，它正在工作！这件事我已经坚持了好几天了！。