three.js私はthree.jsを学んで起動するには、次のコードを使用していた容器

Question

の内側に示されていないオブジェクト。このコードは黒いコンテナの中に赤い球を表示するはずですが、それは私のためではありません。 three.jsに慣れている人は、コードの何が間違っているのかを指摘していますか？

// Set the scene size. 
const WIDTH = 400; 
const HEIGHT = 300; 

// Set some camera attributes. 
const VIEW_ANGLE = 45; 
const ASPECT = WIDTH/HEIGHT; 
const NEAR = 0.1; 
const FAR = 10000; 

// Get the DOM element to attach to 
const container = 
    document.querySelector('#container'); 

// Create a WebGL renderer, camera 
// and a scene 
const renderer = new THREE.WebGLRenderer(); 
const camera = 
    new THREE.PerspectiveCamera(
     VIEW_ANGLE, 
     ASPECT, 
     NEAR, 
     FAR 
    ); 

const scene = new THREE.Scene(); 

// Add the camera to the scene. 
scene.add(camera); 

// Start the renderer. 
renderer.setSize(WIDTH, HEIGHT); 

// Attach the renderer-supplied 
// DOM element. 
container.appendChild(renderer.domElement); 

// Set up the sphere vars 
const RADIUS = 50; 
const SEGMENTS = 16; 
const RINGS = 16; 

// create the sphere's material 
const sphereMaterial = 
    new THREE.MeshLambertMaterial(
    { 
     color: 0xCC0000 
    }); 

// Create a new mesh with 
// sphere geometry 
const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(
    RADIUS, 
    SEGMENTS, 
    RINGS), 
    sphereMaterial); 

// Move the Sphere back in Z so we 
// can see it. 
sphere.position.z = -300; 

// Finally, add the sphere to the scene. 
scene.add(sphere); 

Answer 1

あなたがTHREE.MeshLambertMaterial()を使用しているとして、あなたは、シーンに光源を追加するまで、あなたはこの材料でオブジェクトが表示されません。例えば

、THREE.DirectionalLight()：

var dirLight = new THREE.DirectionalLight(0xffffff); 
dirLight.position.set(100, 100, 100); 
scene.add(dirLight); 

jsfiddle例R86