为什么当我运行以下代码时多维数据集没有出现？

Question

I am making a 3D simulation of basic shapes and in the following code everything else works fine except the cube disappears and there's just a black screen with the GUI panel as soon as I add the GUI and other functions. 我正在对基本形状进行3D仿真，在下面的代码中，其他所有工作都很好，除了立方体消失了，添加了GUI和其他功能后，GUI面板只有一个黑屏。 I am using some three.js helpers listed below in the code. 我正在使用下面代码中列出的three.js帮助器。

Browser: Chrome(checked webGL is enabled.) 浏览器：Chrome（已启用选中的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>

Answer 1

You are using local variables but then you are trying to access them out of scope. 您正在使用局部变量，但随后尝试访问它们的范围之外。 You local variables are: 您的局部变量是：

var scene, camera, renderer;

which you try to access in function render() 您尝试在函数render()访问的

make them global (define them under you global variable gui ) and you will see something in your screen. 将它们设置为全局（在全局变量gui下定义它们），您将在屏幕上看到某些内容。

Also you have to remove them from where they are currently defined. 另外，您还必须从当前定义的位置删除它们。 So in init() replace var scene with scene , var camera with camera and var renderer with renderer . 因此，在init()将var scene替换为scene ，将var camera替换为camera ，将var renderer替换为renderer 。

为什么当我运行以下代码时多维数据集没有出现？

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-06 17:15:56

为什么当我运行以下代码时多维数据集没有出现？

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-06 17:15:56

解决方案1
0 已采纳 2014-10-06 17:15:56