THREE.CSS2DObject needs a clone method

First of all THREE.CSS2DObject is an amazing component, I’ve been using it intensively for labeling with rich HTML labels and KPI’s my 3D objects. I normally include them into a Group with the object they label for a relative position and move them together when animated.

I’m not sure if many devs are doing a so intensive use of this component, but the issue comes when I have many objects that use the same 3D model, and I try to clone the parent Group to optimize performance. The clone method of the Group recursively will call clone for all the children, including the CSS2Object which lacks of a clone method.

I have implemented it easily, it’s not a big deal, but I think this method should be implemented in the source of three.js main branch.

[Mugen87]

BTW: It’s not really the clone method that needs a change. Instead, CSS2DObject.copy() needs to be implemented. And it’s important to ensure instances of CSS2DObject can be created without any parameters (which is currently not the case since element is mandatory).

This code seems to work:

var CSS2DObject = function ( element ) {

	Object3D.call( this );

	this.element = element || document.createElement( 'div' );

	this.element.style.position = 'absolute';

	this.addEventListener( 'removed', function () {

		this.traverse( function ( object ) {

			if ( object.element instanceof Element && object.element.parentNode !== null ) {

				object.element.parentNode.removeChild( object.element );

			}

		} );

	} );

};

CSS2DObject.prototype = Object.assign( Object.create( Object3D.prototype ), {

	constructor: CSS2DObject,

	copy: function ( source, recursive ) {

		Object3D.prototype.copy.call( this, source, recursive );

		this.element = source.element.cloneNode( true );

		return this;

	}

} );

[jscastro76]

BTW: It’s not really the clone method that needs a change. Instead, CSS2DObject.copy() needs to be implemented. And it’s important to ensure instances of CSS2DObject can be created without any parameters (which is currently not the case since element is mandatory).

This code seems to work:

Thanks @Mugen87 for this quick implementation, this method is even simpler than mine. I’ve just updated my code and it runs perfectly.