2012-12-31 148 views
0

我一直在用three.js做一些實驗。但是,當我嘗試做一個簡單的測試時,我無法讓它顯示任何東西。這是我的代碼。如果有人能告訴我我錯過了什麼,那將會非常有幫助。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示例工作正常。控制檯日誌中沒有錯誤。

回答

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

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

是的!就是這樣。動態打字似乎對今天有些不滿。 –