CSS3DSprite works on the pc but not on iOS

Questions
1

I use css3DSprite in my project， it works on the pc but not on iOS。 my three.js version is 151 ，ios version is 14.1

Code:
`initScene() {
let container = document.getElementById(“container”)
this.width = container.offsetWidth
this.height = container.offsetHeight
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 1000);
this.scene.add(this.camera);
this.camera.position.set(0, 30, 50)
//this.setting.this.scene.antialias
this.renderer = new THREE.WebGLRenderer({alpha: true, antialias: antialias: false, logarithmicDepthBuffer: false});
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.setSize(this.width, this.height);
// this.renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(this.renderer.domElement)

    this.labelRenderer = new CSS3DRenderer();
    this.labelRenderer.setSize(this.width, this.height);
    this.labelRenderer.domElement.style.position = 'absolute';
    this.labelRenderer.domElement.style.top = 0;
    this.labelRenderer.domElement.style.pointerEvents = 'none';
    container.appendChild(this.labelRenderer.domElement)

},`

loadNameSprite(character, username, color) {
        var div = document.createElement('div');
        div.className = 'label_name';
        div.style.color = color
        div.textContent = username;
        var sprite = new CSS3DSprite(div);
        sprite.name = 'username'
        sprite.scale.set(0.01, 0.01, 0.01)
        character.add(sprite)
        sprite.position.set(0, 2, 0)

      },

animate() {
        this.renderer.render(this.scene, this.camera);
        this.labelRenderer.render(this.scene, this.camera)

        requestAnimationFrame(this.animate);
}

Screenshots

image
image1170×2532 93.3 KB

the screenshot is on the ios

image
image980×575 51.2 KB

the screenshot is on the pc (window)

2

maybe is css problem，ios Whether translate is supported

3

this is my css code , Is there anything wrong with this? I don’t know
From the first image, I seem to be able to see the position of div, but I cannot see the content

.label_name {
    width: 100px;
    height: 20px;
    /*color: black;*/
    font-size: 12px;
    text-align: center;

  }
4

A code snippet is not sufficient for investigating the issue. Do you see a similar problem with one of the official examples? three.js examples

If not, please demonstrate the issue with a live example: three.js dev template - module - JSFiddle - Code Playground

Besides, why do you use CSS3DRenderer if you just need (screen space) labels? CSS2DRenderer is the better choice in that regard. three.js css2d - label

5

CSS2D has a fixed size, but CSS3D can be scaled according to the character。
Although the official example uses CSS3D sprite ，but it uses images, not div

6

That is not true but maybe I misunderstand you. I think it’s best if you demonstrate the issue with a live example.

7

when l open it on ios ， l can not see the css3dSprite . but on pc , l can see the css3dSprite.
why ? or there is any solution ?

8

Thanks for sharing the live example!

I could only test on macOS with Safari and the fiddle works as expected. I don’t have an iPhone but I try it later on an iPad.

9

my ios version 14.1，If it works after trying，you can tell me the your ios version

10

I have tested with iPadOS 16.4.1 and Safari and could not reproduce. The fiddle renders as expected. Are you able to upgrade your iOS to a higher version?

11

Thank you very much. I’m going to update the iOS version now.

1 Like