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

三.js r.84