Три JS Angular CSS Этикетка - PullRequest
Новая
       25

Три JS Angular CSS Этикетка

0 голосов
/ 28 марта 2020

Я пытаюсь добавить ярлык css на три js холста в моем приложении angular. Все выглядит хорошо, ошибок нет, но ярлыки css не отображаются. Я рисую линию и пытаюсь прикрепить метку с помощью. 

attachLabel() {
        const shapeArray = this.line.geometry.attributes.position.array;
        const midPoint = { x : (shapeArray[0] + shapeArray[3]) / 2, y : (shapeArray[1] + shapeArray[4]) / 2 };

        let div = document.createElement( 'div' );
        div.className = 'label';
        div.textContent = 'this is test label'
        div.style.marginTop = '-1em';
        div.style.backgroundColor = 'aqua';
        div.style.fontSize = '25px';
        div.style.color = 'red';
        div.style.width = '200';
        div.style.height = '100';
        let label = new CSS2DObject( div );
        label.position.set( midPoint.x, midPoint.y, 0.5 );
        this.line.add( label );

    }

Вот метка-маркер 

this.labelRenderer = new CSS2DRenderer();
    this.labelRenderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
    this.labelRenderer.domElement.style.position = 'absolute';
        this.labelRenderer.domElement.style.top = '0';
    document.getElementById( 'renderCanvas' ).appendChild( this.labelRenderer.domElement );

Функция рендеринга 

render() {
    this.frameId = requestAnimationFrame(() => {
      this.render();

    });
    this.renderer.render(this.scene, this.camera);
    this.labelRenderer.render(this.scene, this.camera);
  }
...