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示例工作正常。控制檯日誌中沒有錯誤。
是的!就是這樣。動態打字似乎對今天有些不滿。 –