MeshPhongMaterial erscheint nicht

Question

Ich bin ein Anfänger in THREE.js, ich möchte eine Kugel erstellen, die ich verwenden werde, um Globus mit Textur zu erstellen, aber ich stecke bei der Erstellung MeshPhongMaterial es scheint nichts. Ansonsten, wenn ich MeshBasicMaterial bin mit so scheint es,

Und dies ist mein 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(); 

Ich weiß nicht, was mit diesem Code falsch und sollte ich MeshPhongMaterial es zu tun?

Danke

Answer 1

MeshPhongMaterial Szene Lichter erfordert.

Hier ist ein Weg, aber schauen Sie sich die Three.js Beispiele an.

// 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