Question

我正在对基本形状进行3D模拟，在下面的代码中，除了立方体消失之外，其他一切都工作得很好，只要我添加GUI和其他功能，就会有一个带有GUI面板的黑屏。我在代码中使用下面列出的一些three.js助手。

浏览器：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

您正在使用局部变量，但之后您正试图在范围之外访问它们。你的局部变量是：

var scene, camera, renderer;

您尝试在函数render()

中访问的

将它们设为全局（在全局变量gui下定义它们），您将在屏幕上看到一些内容。

此外，您必须将它们从当前定义的位置删除。因此，在init()中将var scene替换为scene，将var camera替换为camera，将var renderer替换为renderer。

运行以下代码时，为什么不显示多维数据集？

1 个答案: