Three.js가 표시되지 않음

Question

나는 three.js로 몇 가지 실험을 해왔습니다. 그러나 간단한 테스트를 시도 할 때 아무 것도 표시 할 수 없습니다. 여기 내 코드가있다. 누군가 내가 놓친 것을 말해 줄 수 있다면 정말 도움이 될 것입니다. 나는 모든 "rendered" 메시지를 얻고 있지만 아무것도 표시되지 않습니다 콘솔 로그에

//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); 
})(); 

. 캔버스가 적당한 크기인지 확인 했으므로 잘못된 점을 전혀 모릅니다. 나는 약간 다른 기하학을 시도했다.

편집 : Chrome을 사용하고 있으며 온라인 three.js 예제가 정상적으로 작동합니다. 콘솔 로그에 오류가 없습니다.

Answer 1

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

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