CODEWITHSUNDEEP
javascripthtmlhtml5-canvasthree.js
Devarsh Desai
Devarsh Desai

Reputation: 6112

Using textures on spheres in three.js

I am able to create a sphere using javascript and the three.js library. However i have an image i want to overlay on top of the sphere and whenever i do so, the sphere turns into a black sphere with no image projected ontop of it. Here is how i implemented it: 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);

I've tried everything and the image is not successfully overlaying on top of the sphere, How do i go about doing this using three.js? My "beach.jpg" file is located in the same directory as the index.html.

Thank you for your time,

Upvotes: 1

Views: 1514

Answers (1)

Marcel Ennix
Marcel Ennix

Reputation: 1366

Try to include an imageloader. The pictures has to be loaded complete, before it can be used as texture. More details: https://github.com/mrdoob/three.js/issues/1751

Upvotes: 1

Related Questions