Error "Cannot read property 'isEmpty' of undefined" when cloning a Geometry with a Box3Helper

Description

I have found an issue that seems to be a bug, when cloning a geometry that has as children a Box3Helper. This simple scene is producing an error message:

Uncaught TypeError: Cannot read property 'isEmpty' of undefined
    at pe.updateMatrixWorld (three.min.js:961)
    at Z.updateMatrixWorld (three.min.js:451)
    at xd.updateMatrixWorld (three.min.js:451)
    at Kd.render (three.min.js:223)
    at animate (threebug.html:98)

Repro steps

The issue is easy to reproduce:

• Create any geometry
• Create its Box3Helper
• Add the Box3Helper as its children
• Add the geometry to the scene
• Clone the object and add it to the scene.

I have tried many combinations including adding both to a Group to be siblings instead of parent/children, but it happens the same. I have tried to debug it my myself and the issue seems to be at this checkpoint Box3Helper, as the cloned instance has box as undefined.

Demo

Here is the repro of the issue: ( you only have to uncomment line 62: //scene.add(dupe); )

• jsfiddle (repro with the latest release branch)

Code

Here is the full js code:

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    var geometry = new THREE.SphereGeometry( 5, 12, 8 );
    
    // material
    var material = new THREE.MeshPhongMaterial( {
        color: 0x00ffff, 
        flatShading: true,
        transparent: true,
        opacity: 0.7,
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    let bb = new THREE.Box3().setFromObject(mesh);
	  let boxModel = new THREE.Box3Helper(bb, new THREE.Color(0xffff00));
	  boxModel.name = "BoxModel";
	  mesh.add(boxModel);
    
    let dupe = mesh.clone(true);
    //UNCOMMENT THIS LINE TO REPRO THE ISSUE
    //scene.add(dupe);
    
}

function animate() {

    requestAnimationFrame( animate );
    
	  mesh.rotation.x += 0.01;
	  mesh.rotation.y += 0.02;
    
    controls.update();    

    renderer.render( scene, camera );

}

Possible solution

Adding a copy method to Box3Helper.prototype will solve this issue as box will be set cloning the source one

	Box3Helper.prototype = Object.assign(Object.create(LineSegments.prototype), {

		constructor: Box3Helper,

		copy: function (source) {

			LineSegments.prototype.copy.call(this, source);

			this.box = source.box.clone();

			return this;

		}

	});

Three.js version

• [x ] r118

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

[jscastro76]

This issue has been resolved as a consequence of the .copy() changes @Mugen87 implemented around here #19921 and here #19471. Thanks @Mugen87!

[jscastro76]

I totally trust on your criteria @Mugen87. Thanks for your interest and support