Javascript MeshPhongMaterial不'；不出现

我是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来做吗

---

谢谢

MeshPhongMaterial

需要场景灯光

这里有一种方法，但请看三个.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需要场景灯光

这里有一种方法，但请看三个.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 

3.js r.84