다음 코드를 실행하면 큐브가 나타나지 않는 이유는 무엇입니까?

기본 모양의 3D 시뮬레이션을 만들고 있는데 다음 코드에서 큐브가 사라지고 UI 및 기타 기능을 추가하자마자 GUI 패널이있는 검은 색 화면 만있는 것 외에는 다른 모든 기능이 작동합니다. 아래 코드에 나열된 three.js 헬퍼를 사용하고 있습니다.다음 코드를 실행하면 큐브가 나타나지 않는 이유는 무엇입니까?

브라우저 : 크롬 (WebGL을 선택 사용할 수 있습니다.)

<!DOCTYPE html> 
<html> 
<head> 
<title>My first JS 3d App.</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
<style type="text/css"> 
canvas 
{ 
     width: 75%; height: 75%; 
} 
body 
{ 
     background-color: #ccccff; 
     margin: 0px; 
     overflow: hidden; 
} 
</style> 

//helper libraries of three.js 

<script src="js/dat.gui.js"></script> 
<script src="js/threex.windowresize.js"></script> 

//end of helper libraries of three.js 

</head> 
<body> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"> </script> 

<script type="text/javascript"> 

var cube; 
var parameters; 
var gui; 
var scene, camera, renderer; 

init(); 
animate(); 

//initialise function 

function init(){ 

//setting the scene 

    THREEx.WindowResize(renderer, camera); 
    var scene= new THREE.Scene(); 
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 20000); 
    scene.add(camera); 
    camera.position.set(0,150,400); 
    camera.lookAt(scene.position); 
    var renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

//draw the cube 

    var geometry = new THREE.BoxGeometry(1,1,1); 
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent:true, opacity:1 }); 
    cube = new THREE.Mesh(geometry, material); 
    cube.position.set(0,30,0); 
    scene.add(cube); 

// DAT.GUI to display User Interface for the user to interact  

    gui=new dat.GUI; 

    parameters = 
    { 
     x: 0, y: 30, z: 0, 
     color: "#00ff00", // color (change "#" to "0x") 
     opacity: 1, 
     visible: true, 
     material: "Basic", 
     reset: function() { resetCube() } 
    }; 

var folder1 = gui.addFolder('Position'); 
    var cubeX = folder1.add(parameters, 'x').min(-200).max(200).step(1).listen(); 
    var cubeY = folder1.add(parameters, 'y').min(0).max(100).step(1).listen(); 
    var cubeZ = folder1.add(parameters, 'z').min(-200).max(200).step(1).listen(); 
    folder1.open(); 

    cubeX.onChange(function(value) 
    { cube.position.x = value; }); 
    cubeY.onChange(function(value) 
    { cube.position.y = value; }); 
    cubeZ.onChange(function(value) 
    { cube.position.z = value; }); 

    var cubeColor = gui.addColor(parameters, 'color').name('Color').listen(); 
    cubeColor.onChange(function(value) // onFinishChange 
    { cube.material.color.setHex(value.replace("#", "0x")); }); 

    var cubeOpacity = gui.add(parameters, 'opacity').min(0).max(1).step(0.01).name('Opacity').listen(); 
    cubeOpacity.onChange(function(value) 
    { cube.material.opacity = value; }); 

    var cubeMaterial = gui.add(parameters, 'material', [ "Basic", "Lambert", "Phong", "Wireframe" ]).name('Material Type').listen(); 
    cubeMaterial.onChange(function(value) 
    { updateCube(); }); 

    var cubeVisible = gui.add(parameters, 'visible').name('Visible?').listen(); 
    cubeVisible.onChange(function(value) 
    { cube.visible = value; }); 

    gui.add(parameters, 'reset').name("Reset Cube Parameters"); 

    gui.open(); 
} 

//function to update the cube when any parameter is changed in the UI panel  

function updateCube() 
{ 
    var value = parameters.material; 
    var newMaterial; 
    if (value == "Basic") 
     newMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); 
    else if (value == "Lambert") 
     newMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 }); 
    else if (value == "Phong") 
     newMaterial = new THREE.MeshPhongMaterial({ color: 0x000000 }); 
    else // (value == "Wireframe") 
     newMaterial = new THREE.MeshBasicMaterial({ wireframe: true }); 
    cube.material = newMaterial; 
    cube.position.x = parameters.x; 
    cube.position.y = parameters.y; 
    cube.position.z = parameters.z; 
    cube.material.color.setHex(parameters.color.replace("#", "0x")); 
    cube.material.opacity = parameters.opacity; 
    cube.material.transparent = true; 
    cube.visible = parameters.visible; 

} 

//reset cube to original parameters 

function resetCube() 
{ 
    parameters.x = 0; 
    parameters.y = 30; 
    parameters.z = 0; 
    parameters.color = "#00ff00"; 
    parameters.opacity = 1; 
    parameters.visible = true; 
    parameters.material = "Basic"; 
    updateCube(); 
} 

//render animation 

function animate() 
{ 
    requestAnimationFrame(animate); 
    render();  
} 


//three.js render function  

function render() { 
    //requestAnimationFrame(render); 
    renderer.render(scene, camera); 
}  
</script> 
</body> 
</html>

출처

2014-10-06 akshaynagpal

당신은 로컬 변수를 사용하지만 당신이 범위를 벗어날에 액세스하려고합니다. 당신 지역 변수는 다음과 같습니다 당신이 기능 render()

에 액세스하려고

var scene, camera, renderer;

그들을 글로벌하게 (당신에서 전역 변수 gui 그들을 정의)하고 화면에 뭔가를 볼 수 있습니다.

또한 현재 정의 된 위치에서 제거해야합니다. 따라서 init()에서 을 scene, var camera, camera, var renderer, renderer으로 바꿉니다.

출처

2014-10-06 17:15:56 gaitat

변경했는데 아무 것도 변경되지 않았습니다 ... 질문의 업데이트 된 코드를 참조하십시오 ... – akshaynagpal

업데이트 된 답변. – gaitat

다음 코드를 실행하면 큐브가 나타나지 않는 이유는 무엇입니까?

답변

관련 문제