在三个球体上使用纹理。js

Question

我能够使用javascript和three.js库创建一个球体。然而，我有一个图像，我想覆盖在球体的顶部，每当我这样做，球体变成一个黑色的球体，没有图像投射在上面。下面是我如何实现它：var渲染器=new THREE. WebGL渲染器（）；renderer.set大小（window.inner宽度，window.inner高度）；document.body.append（renderer.dom元素）；

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

  // scene
  var scene = new THREE.Scene();

  // sphere
  // the first argument of THREE.SphereGeometry is the radius, the second argument is
  // the segmentsWidth, and the third argument is the segmentsHeight.  Increasing the 
  // segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade
  // rendering performance
  var texture = THREE.ImageUtils.loadTexture('beach.jpg', {}, function() {
  renderer.render(scene, camera);
  });

  texture.needsUpdate = true;
//  texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
//  texture.repeat.set( 125, 125 );
//  texture.offset.set( 15, 15 );
 // texture.needsUpdate = true;
  var material = new THREE.MeshBasicMaterial({map: texture});
  var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), material);      
  //mesh = new THREE.Mesh(sphere, material);
  //scene.add(mesh);
 // var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial());
 // sphere.overdraw = true;
  scene.add(sphere);


  renderer.render(scene, camera);

我已经尝试了一切，图像没有成功覆盖在球体的顶部，我如何使用three.js?我的beach.jpg文件位于与index.html.相同的目录中

谢谢你抽出时间，

Answer 1

尝试包含一个图像加载器。图片必须加载完成，才能用作纹理。更多细节：https://github.com/mrdoob/three.js/issues/1751