Create Cubes with Array

Questions
1

Hello, I have made this code and it gives the error:

three.js:8351 Uncaught TypeError: Cannot read property ‘center’ of undefined
at Sphere.copy (three.js:8351)
at Frustum.intersectsObject (three.js:9092)
at projectObject (three.js:22152)
at projectObject (three.js:22197)
at WebGLRenderer.render (three.js:21955)
at render ((index):87)
at (index):93

The code is here:

    <?php include "templates/include/header.php" ?>

      <ul id="headlines">

<?php foreach ( $results['articles'] as $article ) { ?>

        <li>
          <h2>
            <span class="pubDate"><?php echo date('j F', $article->publicationDate)?></span><a href=".?action=viewArticle&amp;articleId=<?php echo $article->id?>"><?php echo htmlspecialchars( $article->title )?></a>
          </h2>
          <p class="summary"><?php echo htmlspecialchars( $article->summary )?></p>
        </li>

        <?php $data[] = array(
      "id"    =>  $article->id,
      "title"  =>  $article->title
    );
?>

<?php $stringJSON = json_encode($data);?>

<?php } ?>

      </ul>

<script type="text/javascript">
var scene, camera, renderer;

var WIDTH  = window.innerWidth;
var HEIGHT = window.innerHeight;

var SPEED = 0.01;

// Convert JSON String to JavaScript Object
  var Articles = [<?php echo $stringJSON; ?>];


function init() {
    scene = new THREE.Scene();

    addGeometry();
    initCamera();
    initRenderer();

    document.body.appendChild(renderer.domElement);
}

function initCamera() {
  camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
  camera.position.set(0, 3.5, 5);
  camera.lookAt(scene.position);

}

function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
}

function addGeometry() {
    var geometry = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10));
    var material = new THREE.MeshBasicMaterial({color:0x00ff44});

for(var i = 0; i < Articles.length; i += 1){
  var mesh = new THREE.Mesh( geometry, material );
  mesh.position.x = ( Math.random() - 0.5 ) * 1000;
   mesh.position.y = ( Math.random() - 0.5 ) * 1000;
   mesh.position.z = ( Math.random() - 0.5 ) * 1000;
     mesh.updateMatrix();
     mesh.matrixAutoUpdate = false;
     scene.add( mesh );
}


}

/*function rotateCube() {
    mesh.rotation.x -= SPEED * 2;
    mesh.rotation.y -= SPEED;
    mesh.rotation.z -= SPEED * 3;
}*/

function render() {
    requestAnimationFrame(render);
    //rotateCube();
    renderer.render(scene, camera);


}

init();
render();
</script>



      <p><a href="./?action=archive">Article Archive</a></p>

<?php include "templates/include/footer.php" ?>

I think that is something about asycronous call.

2

The way you create your geometry is not correct. Instead of

var geometry = new THREE.Mesh(new THREE.CubeGeometry(10, 10, 10));

just do

var geometry = new THREE.BoxBufferGeometry(10, 10, 10);

BTW: CubeGeometry is kind of deprecated.

1 Like