在 three.js 中的球体上使用纹理

Posted 2023-02-27

【中文标题】在 three.js 中的球体上使用纹理

【英文标题】：Using textures on spheres in three.js

【发布时间】：2013-06-22 21:30:10

【问题描述】：

我能够使用 javascript 和 three.js 库创建一个球体。但是我有一个图像我想覆盖在球体的顶部，每当我这样做时，球体就会变成一个黑色的球体，上面没有投影图像。这是我实现它的方式： var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

  // 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 位于同一目录中。

感谢您的宝贵时间，

【参考方案1】：

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

【讨论】：

嘿马塞尔，问题已解决，我需要一个动画函数，如下所示： function animate() requestAnimationFrame( animate ); renderer.render（场景，相机）；