As a beginner in the world of THREE.js, I am attempting to create a sphere that will serve as the foundation for a globe with texture. However, I have hit a roadblock while trying to implement MeshPhongMaterial, as nothing seems to appear on the screen. On the contrary, when using MeshBasicMaterial, everything functions properly.
Below is the code snippet:
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();
I am uncertain about what may be causing this issue within the code and whether or not MeshPhongMaterial is the appropriate approach. Any guidance would be greatly appreciated.
Thank you