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