Threejs从数组

Question

我试图用three.js制作一个基本的体素查看器。 体素应该是可见的或不可见的，这取决于数组中相应的单元格是0还是1。

当我将不透明度设置为1或0时，体素显示完美，但是当我尝试直接从voxels数组设置时，它们都变为不可见。

有人可以帮我一把吗？

https://codepen.io/jjough/pen/VxMgOb?editors=0010

// the cubes should be visible if the
// corresponding array cell is 1.
var voxels = [[0.,0.,0.,0.,0.],
              [1.,1.,1.,1.,1.],
              [1.,1.,1.,1.,1.],
              [1.,1.,1.,0.,1.],
              [1.,1.,0.,0.,1.]]




// Create a scene which will hold all our meshes to be rendered
var scene = new THREE.Scene();


// Create and position a camera
var camera = new THREE.PerspectiveCamera(
    60,                                   // Field of view
    window.innerWidth/window.innerHeight, // Aspect ratio
    0.1,                                  // Near clipping pane
    1000                                  // Far clipping pane
);

// Reposition the camera
camera.position.set(5,5,0);

// Point the camera at a given coordinate
camera.lookAt(new THREE.Vector3(0,0,0));

// Create a renderer
var renderer = new THREE.WebGLRenderer({ antialias: true });

// Size should be the same as the window
renderer.setSize( window.innerWidth, window.innerHeight );

// Set a near white clear color (default is black)
renderer.setClearColor( 0xfff6e6 );

// Append to the document
document.body.appendChild( renderer.domElement );

// A mesh is created from the geometry and material, then added to the scene
var plane = new THREE.Mesh(
    new THREE.PlaneGeometry( 5, 5, 5, 5 ),
    new THREE.MeshBasicMaterial( { color: 0x393839, wireframe: true, opacity:0.2, transparent:true} )
);

plane.rotateX(Math.PI/2);
scene.add( plane );



var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshStandardMaterial( {
    color: 0x00ff00,
    shading: THREE.FlatShading, // default is THREE.SmoothShading
    metalness: 0,
    roughness: 1,
    vertexColors: THREE.VertexColors,
   opacity: THREE.opacity,
    transparent:true,
} );


var voxel_object_array = [[0,0,0,0,0], // i just want an empty array to eventually index the cubes. not sure how to do that so put zeros in instead.
              [0,0,0,0,0],
              [0,0,0,0,0],
              [0,0,0,0,0],
              [0,0,0,0,0]];


for (var h=0; h<5; h+=1) {
    for (var v=0; v<5; v+=1) {
      cube= new THREE.Mesh( geometry, material );
      voxel_object_array[h][v] = cube;
      cube.position.set(h-(5-1)/2,0,v-(5-1)/2);
      cube.visible = voxels[h][v]; //  here's the problem -- they should not all be visible right now.
      scene.add( cube );
    }

}


var ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambientLight );
var pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 25, 50, 25 );
scene.add( pointLight );


var step = 0;
var gui_controls = new function () {
  this.rotationSpeed = 0.5;
  this.bouncingSpeed = 0.03;
};
var gui = new dat.GUI();
gui.add(gui_controls, 'rotationSpeed', 0, 1);
gui.add(gui_controls, 'bouncingSpeed', 0, 0.5);
render();

        function render() {
            //cube.material.opacity = gui_controls.rotationSpeed;
            //cube.material.opacity.needsUpdate = true;
            // render using requestAnimationFrame
            renderer.render(scene, camera);
        }
// Add an orbit control which allows us to move around the scene. See the three.js example for more details
// https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/OrbitControls.
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', function() {
  renderer.render(scene, camera); } ); // add this only if there is no animation loop (requestAnimationFrame)

Answer 1

感谢@prisoner849：需要转换为布尔值。 cube.visible = !!voxels[h][v];