1

私は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の例は正常に機能します。コンソールログにエラーはありません。

4

2 に答える 2

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

//Container is a div
document.body.appendChild(renderer.domElement);
于 2012-12-31T19:58:24.587 に答える