Why does BufferGeometry.computeBoundingBox() not work in this example

January 6, 2023

According to the documentation, calling computeBoundingBox() on a BufferGeometry should update the .boundingBox attribute. In my example below, a spinning cube is created and geometryCube.boundingBox should be displayed in the console. Why doesn’t it work?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>TubeGeometry tests</title>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.148.0/build/three.module.js"
        }
      }
    </script>   
    <script type="module">
import * as THREE from 'three';

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x002000, 4, 6);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometryCube = new THREE.BoxGeometry(2, 2, 2);
geometryCube.computeBoundingBox();
console.log('geometryCube.BoundingBox', geometryCube.BoundingBox); //output geometryCube.BoundingBox undefined
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 });
const meshCube = new THREE.Mesh(geometryCube, material);
scene.add(meshCube);

camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  meshCube.rotation.x += 0.01;
  meshCube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();
    </script>
  </body>
</html>