基本的なTHREE.jsシーンの設定

Question

私の質問は簡単ですが、私の人生にとって何が起こっているのか分かりません。基本的なthree.jsシーンを設定し、単純なキューブにBaiscMaterialを追加しようとしていますが、キューブが私のシーンに表示されません。

"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

まず、Cubeは今BoxGeometryに更新されます。あなたのコードと不適切な関数の定義と使用法には多くの問題があります。

ここでは、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); 

} 

デモhere

P.S Three.js Docsを参照してください、それがサンプルコードのトンをたくさん簡単に作業になり、資源のために最高の場所です。