MeshPhongMaterial沒有出現

Question

我是THREE.js的初學者，我想創建一個球體，該球體將用於創建帶有紋理的地球儀，但是在創建MeshPhongMaterial時卡住了，它似乎什么也沒有。 否則，當我使用MeshBasicMaterial時，它會出現，

這是我的代碼

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();

我不知道這段代碼有什么問題，我應該使用MeshPhongMaterial來做到嗎？

謝謝

Answer 1

MeshPhongMaterial需要場景燈光。

這是一種方法，但請看three.js示例。

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