aframevr / aframevr/aframe

setObject3D will give false negatives for CSS3DRenderer when checking whether it's a THREE.Object3D

Open
#5,701 2 comments 0 reactions 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.