Question

如何为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 );

Answer 1

为此，请考虑使用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();

如何在PlaneGeometry中添加纹理

1 个答案: