setObject3D will give false negatives for CSS3DRenderer when checking whether it's a THREE.Object3D
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17.6k
- Forks
- 4.4k
- PR merge metrics
- No merged PRs in 30d
Description
Tried to use https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/CSS3DRenderer.js
to embed dom elements in 3D space. However setObject3D will reject it because instanceof is not properly detecting the type.
setupCss3D(sceneEl: Scene) : void {
const wrapper = document.createElement('div');
wrapper.style.position = 'absolute';
wrapper.style.transformStyle = 'preserve-3d';
const children = Array.from(this.el.children);
for(const child of children) {
wrapper.appendChild(child);
}
this.wrapper = wrapper;
this.cssObject = new CSS3DObject(wrapper);
this.cssObject.scale.set(1,1,1);
this.el.object3D.add(this.cssObject);
console.log(this.cssObject instanceof THREE.Object3D);
this.el.setObject3D('mesh', this.cssObject);
console.log(this.el.object3D);
},
Additional Context:
Object3D provides an "isObject3D" parameter specifically for type checking.
https://github.com/mrdoob/three.js/blob/e3ee9682fb2c776cd77fd8b89f73c321945fa52c/src/core/Object3D.js#L79
Suggested solution:
use a custom type guard to leverage this parameter.
function isObject3D(obj: unknown) is THREE.Object3D {
return (obj as THREE.Object3D).isObject3D === true;
}
then replace the instanceof check.
...
setObject3D (type, obj) {
var oldObj;
var self = this;
if (!isObject3D(obj)) {
throw new Error(
'`Entity.setObject3D` was called with an object that was not an instance of ' +
'THREE.Object3D.'
);
}
...
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Locate the implementation of Entity.setObject3D and inspect its current instanceof check. Compare it with THREE.Object3D's isObject3D parameter and verify the behavior using the CSS3DRenderer/CSS3DObject example; done means CSS3DObject is accepted by setObject3D while invalid objects are still rejected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, three.js
- Domain
- computer-graphics, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100