CODEWITHSUNDEEP
javascriptthree.js
Lucky
Lucky

Reputation: 2082

MeshPhongMaterial doesn't appear

I am a beginner in THREE.js, I want to create a sphere which I will use to create globe with texture but I'm stuck when creating MeshPhongMaterial it appears nothing. Otherwise when I'm using MeshBasicMaterial it appears,

And this is my code

var mainScene, camera, aspect, renderer;

mainScene = new THREE.Scene();
aspect = window.innerWidth / window.innerHeight;

camera = new THREE.PerspectiveCamera(40, aspect, 0.1, 100);

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

var canvasContainer = document.getElementById("canvasContainer");
canvasContainer.appendChild(renderer.domElement);

var mesh = new THREE.Mesh(
  new THREE.SphereGeometry(0.5,32,32),
  new THREE.MeshPhongMaterial({
    color: 0x00ff00,
    wireframe: true
  })
);

mainScene.add( mesh );

camera.position.z = 5;

var render = function(){

        requestAnimationFrame(render);
    renderer.render(mainScene, camera);

        }

render();

I don't know what's wrong with this code and should I use MeshPhongMaterial to do it?

Thank you

Upvotes: 1

Views: 496

Answers (1)

WestLangley
WestLangley

Reputation: 104763

MeshPhongMaterial requires scene lights.

Here is one way, but look at the three.js examples.

// ambient
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );

// light
var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );

scene.add( camera ); // required because the camera has a child

three.js r.84

Upvotes: 3

Related Questions