2021-05-29

three.js, How do I get a CSS3DObject to show up? (what am I doing wrong)

I set up a CSS3DRenderer, a scene, a camera, in my HTML document I have an element that I am trying to turn into a CSS3DObject, and I have my CSS3DRenderer using .render in a game loop. I created a CSS3D object, put the HTML element as the argument, added it to my scene, and nothing happened. I must add that I do have a WebGL renderer using the same camera and a different scene, that renderer is working just fine. Here are my import statements:

import * as THREE from 'https://threejs.org/build/three.module.js';
import { GLTFLoader } from 'https://threejs.org/examples/jsm/loaders/GLTFLoader.js';
import { CSS3DRenderer } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';
import { CSS3DObject } from 'https://threejs.org/examples/jsm/renderers/CSS3DRenderer.js';

Here is how I initialized the renderers:

const renderer = new THREE.WebGLRenderer({canvas: document.querySelector('#bg')});
const cssRenderer = new CSS3DRenderer();

this is me trying to put the CSS renderer infront of the WEBGL one:

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth,window.innerHeight);
cssRenderer.setSize(window.innerWidth,window.innerHeight);
cssRenderer.domElement.style.position = 'fixed';
cssRenderer.domElement.style.top = 0;
renderer.domElement.style.zIndex = 0;
cssRenderer.domElement.style.zIndex = 1;
renderer.domElement.style.position = 'fixed';
renderer.domElement.style.top = 0;

And finally, this is how I initialized the CSS3DObject (planeMesh is just a mesh I'm trying to put the CSS3Dobject on):

var embed = document.querySelector(".embed");
var embed3D = new CSS3DObject(embed);
embed3D.position.set(planeMesh.position);
embed3D.rotation.set(planeMesh.rotation);
cssScene.add(embed3D);

I have confirmed that my program is reading the HTML element correctly, but everything beyond that has me stumped, any help would be greatly appreciated. (sorry about any bad practices that may be apparent, I am pretty new to javascript)



from Recent Questions - Stack Overflow https://ift.tt/3fWuEHo
https://ift.tt/eA8V8J

No comments:

Post a Comment