Background remove

Hello

I want to remove the background but it’s not changing!

Please have a look at my demo and tell me what you see. http://eoniansoftware.com/dev/Earth/

Thank you

I’m just seeing a black background. And a very old version of three.js(R70). How about updating to the latest one?

Hello

I have uploaded new three.js

Thank you

Can you please show the respective code section. It seems I overlook something.

var camera, scene, renderer;
var mesh;

init();
animate();
var start = true;
function init() {

renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});

camera = new THREE.PerspectiveCamera(50, 1, 1, 100);
camera.position.z = 25;

scene = new THREE.Scene();

var geometry = new THREE.SphereGeometry(10, 100, 100);
var material  = new THREE.MeshPhongMaterial();

THREE.ImageUtils.crossOrigin = '';
material.map    = THREE.ImageUtils.loadTexture('pc5rkqXRi.png')

  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x += 0.5;
  scene.add(mesh);

  var light1 = new THREE.AmbientLight( 0xffffff );
  light1.position.set(100, 50, 90);
  scene.add(light1);
}

function resize() {

  var width = renderer.domElement.clientWidth;
  var height = renderer.domElement.clientHeight;
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix(); 
}

function animate() {
		if(start == false){ return true;}else{
			  resize();
  mesh.rotation.y += 0.005;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
		}

}

function actionanimation(value){
	start = value;
	if(value == true){
		animate();
	}

}

You normally set a background via Scene.background. I don’t see this or something similar in your code.

Hi!

That type of material needs light sources in the scene, or you will get just a black object.

2 Likes

How to add many click event in my canvas

http://eoniansoftware.com/dev/Earthglobe/index.html