Grundlegende THREE.js Szene einrichten

Question

meine Frage ist einfach, aber für das Leben von mir kann ich nicht herausfinden, was los ist. Ich versuche, eine einfache three.js Szene zu erstellen und einen einfachen Würfel mit einem BaiscMaterial hinzuzufügen, aber der Würfel wird nicht in meiner Szene angezeigt.

"use strict"; 
var renderer, scene, camera; 
var light; 

function init() { 
    var canvasWidth = 850; 
    var canvasHeight = 450; 
    var canvasRatio = canvasWidth/canvasHeight; 

    camera = new THREE.PerspectiveCamera(45, canvasRatio, 0.9, 1000); 

    camera.position.set(0, 200, -550); 
    camera.lookAt(0, 0, 0); 

    light = new THREE.AmbientLight(0xFFFFFF, 1); 
    light.position.set(-800, 900, 300); 

    renderer = new THREE.WebGLRenderer({antialias: true}); 
    renderer.setSize(canvasWidth, canvasHeight); 
    renderer.setClearColorHex(0x000000, 1.0); //canvas color 

    renderer.gammaInput = true; 
    renderer.gammaOutput = true; 

} 
function cube() { 
    var cubeGeo = new THREE.CubeGeometry(1000, 1000, 1000); 
    var cubeMaterial = new THREE.MeshBasicMaterial(); 
    var cube1 = new THREE.Mesh(cubeGeo, cubeMaterial); 
    cube1.position.set(0, 0, 0); 

    return cube1; 

} 
function fillScene() { 

    scene = new THREE.Scene(); 
    scene.add(light); 
    var cube = cube(); 
    scene.add(cube); 


} 
function addToDOM() { 
    var container = document.getElementById('container'); 
    var canvas = container.getElementsByTagName('canvas'); 

    if (canvas.length > 0) { 
     container.removeChild(canvas[0]); 
    } 
    container.appendChild(renderer.domElement); 
} 

function render() { 
    fillScene(); 
    renderer.render(scene, camera); 
} 
try { 
    init(); 
    fillScene(); 
    addToDOM(); 
    render(); 

} catch (e) { 
    var errorReport = "Your Program encountered an ERROR, cannot draw on canvas. Error was:<br/><br/>"; 
    $('#container').append(errorReport + e); 
} 

Answer 1

Zunächst einmal ist Cube nun BoxGeometry aktualisiert. Und ich sehe viele Probleme mit Ihrem Code und der falschen Definition und Verwendung von Funktionen.

Hier ist ein sehr einfaches Beispiel von mr.doob Github.

var scene, camera, renderer; 
var geometry, material, mesh; 

init(); 
animate(); 

function init() { 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.z = 1000; 

    geometry = new THREE.BoxGeometry(200, 200, 200); 
    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); 

    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 

} 

function animate() { 

    requestAnimationFrame(animate); 

    mesh.rotation.x += 0.01; 
    mesh.rotation.y += 0.02; 

    renderer.render(scene, camera); 

} 

Sehen Sie die Demo here

P. S Three.js Docs ist der beste Ort, um Ressourcen, es mit jeder Menge Beispielcode arbeiten viel einfacher macht.