Three.js不显示任何东西

Question

我一直在用three.js做一些实验。但是，当我尝试做一个简单的测试时，我无法让它显示任何东西。这是我的代码。如果有人能告诉我我错过了什么，那将会非常有帮助。

//Constant declaration 
var RENDER_DIST = 1000, 
    FOV = 75; 

var WIDTH = window.innerWidth, 
    HEIGHT= window.innerHeight; 

//Create the scene 
var scene = new THREE.Scene(); 

//Create the camera 
var camera = new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, 0.1, RENDER_DIST); 

//Pull the camera back a bit 
camera.z = 100; 
//Then add it to the scene 
scene.add(camera); 

//Create a renderer 
renderer = new THREE.WebGLRenderer(); 
renderer.setSize(WIDTH,HEIGHT); 
renderer.domElement.className = "glMain"; 

//Container is a div 
$("#container").html(renderer.domElement); 

//Boilerplate done! Celebrate! 
(function init() { 
    var geometry = new THREE.SphereGeometry(50); 
    var material = new THREE.MeshBasicMaterial({color: 0xff0000}); 
    var sphere = new THREE.Mesh(geometry, material); 
    scene.add(sphere); 

    //debugging 
    console.log("Sphere at " + sphere.position.x + " " + sphere.position.y + " " + sphere.position.z); 


})(); 

//Our main function 
(function loopRun() { 
    requestAnimationFrame(loopRun); 

    console.log("rendered"); 
    renderer.render(scene, camera); 
})(); 

在控制台上的日志，我让所有的"rendered"的消息，但没有被显示。我检查过画布尺寸合适，因此我不知道哪里出了问题。我尝试了几种不同的几何形状。

编辑：我使用Chrome和在线three.js示例工作正常。控制台日志中没有错误。

Answer 1

//Pull the camera back a bit 
camera.position.z = 100; 

//Container is a div 
document.body.appendChild(renderer.domElement);