장면이 렌더링 될 때 객체가 표시되지 않습니다.

Question

도와주세요. 내 학교에서 Three.js로 WebGL 프로젝트를하고있어 붙어 있습니다.

달성하려는 것은 블렌더의 객체를 장면의 중심 (0,0,0)에 표시하고 키보드 화살표로 회전시키는 것입니다. 여기

내가 객체 ring.dae 어떤 생각이 왜 ... 더 이상 볼 수 없습니다 컨트롤을 comented 이후로 내 초기화()

var scene, camera, renderer; 
init(); 
//animate(); 
function init() { 

    scene = new THREE.Scene(); 
    var WIDTH = 880, 
     HEIGHT = 550; 


    renderer = new THREE.WebGLRenderer({antialias:true}); 
    renderer.setSize(WIDTH, HEIGHT); 
    document.getElementsByClassName("pw")[0].appendChild(renderer.domElement); 

    camera = new THREE.PerspectiveCamera(90, WIDTH/HEIGHT, 0.1, 1000000); 
    camera.position.set(5,15,10); 

    scene.add(camera); 

    window.addEventListener('resize', function() { 
    var WIDTH = 880, 
     HEIGHT = 550; 
    renderer.setSize(WIDTH, HEIGHT); 
    camera.aspect = WIDTH/HEIGHT; 
    camera.updateProjectionMatrix(); 
    }); 



    //sky dome 


    var vertexShader = document.getElementById('vertexShader').textContent; 
    var fragmentShader = document.getElementById('fragmentShader').textContent; 
    var uniforms = { 
    topColor:  { type: "c", value: new THREE.Color(0x000053) }, 
    bottomColor: { type: "c", value: new THREE.Color(0x2626ff) }, 
    offset:   { type: "f", value: 100 }, 
    exponent:  { type: "f", value: 0.7 } 
    } 

    //skydome 

    var skyGeo = new THREE.SphereGeometry(2000, 32, 15); 
    var skyMat = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide }); 

    var sky = new THREE.Mesh(skyGeo, skyMat); 
    scene.add(sky); 


    //lights 


    var light4 = new THREE.HemisphereLight(0xfffff3, 0xd7f0ff, 0.2); // soft white light 
    scene.add(light4); 


    var light2 = new THREE.PointLight(0xd7f0ff, 1); 
    light2.position.set(1,1,1); 
    scene.add(light2); 





    var loader = new THREE.ColladaLoader(); 
    var dae 

     loader.options.convertUpAxis = true; 

     loader.load('models/ring.dae', function (collada) { 
    //dummy1.dae 

     dae = collada.scene; 

     var skin = collada.skins[ 0 ]; 

    dae.position.set(0,0,0);//x,z,y- if you think in blender dimensions ;) 
    dae.scale.set(7,7,7); 

    scene.add(dae); 

    }); 

    //controls = new THREE.OrbitControls(camera, renderer.domElement); 
    document.addEventListener('keydown', onDocumentKeyDown, false); 
    //document.addEventListener('keyup', onDocumentKeyUp, false); 
    renderer.render(scene, camera); 
     requestAnimationFrame(render);  
} 

입니까?

Answer 1

고정 초기화()

scene = new THREE.Scene(); 
    var WIDTH = 880, 
     HEIGHT = 550; 


    renderer = new THREE.WebGLRenderer({antialias:true}); 
    renderer.setSize(WIDTH, HEIGHT); 
    document.getElementsByClassName("pw")[0].appendChild(renderer.domElement); 

    camera = new THREE.PerspectiveCamera(25, WIDTH/HEIGHT, 0.1, 1000000); 
    camera.position.set(0,2,7); 

    scene.add(camera); 

    window.addEventListener('resize', function() { 
    var WIDTH = 880, 
     HEIGHT = 550; 
    renderer.setSize(WIDTH, HEIGHT); 
    camera.aspect = WIDTH/HEIGHT; 
    camera.updateProjectionMatrix(); 
    }); 



    //sky dome 


    var vertexShader = document.getElementById('vertexShader').textContent; 
    var fragmentShader = document.getElementById('fragmentShader').textContent; 
    var uniforms = { 
    topColor:  { type: "c", value: new THREE.Color(0x000053) }, 
    bottomColor: { type: "c", value: new THREE.Color(0x2626ff) }, 
    offset:   { type: "f", value: 100 }, 
    exponent:  { type: "f", value: 0.7 } 
    } 

    //skydome 

    var skyGeo = new THREE.SphereGeometry(2000, 32, 15); 
    var skyMat = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide }); 

    var sky = new THREE.Mesh(skyGeo, skyMat); 
    scene.add(sky); 


    //lights 


    var light4 = new THREE.HemisphereLight(0xfffff3, 0xd7f0ff, 0.2); // soft white light 
    scene.add(light4); 


    var light2 = new THREE.PointLight(0xd7f0ff, 1); 
    light2.position.set(1,1,1); 
    scene.add(light2); 





    var loader = new THREE.ColladaLoader(); 


     loader.options.convertUpAxis = true; 

     loader.load('models/ring.dae', function (collada) { 

     ring = collada.scene; 

     var skin = collada.skins[ 0 ]; 

    ring.position.set(0,0,0);//x,z,y- if you think in blender dimensions ;) 
    ring.scale.set(7,7,7); 

    scene.add(ring); 
    renderer.render(scene, camera); 

    }); 

    //controls = new THREE.OrbitControls(camera, renderer.domElement); 
    document.addEventListener('keydown', onDocumentKeyDown, false); 
    //document.addEventListener('keyup', onDocumentKeyUp, false); 
    render();