CSS3D & WEBGL + range slider issue

Questions
, , ,
#1

Hi!

I’ve got an issue with visualization of webgl & css3d content when I need use range slider that is part of CSS3DObject.
the example can be applied in any jsfiddle (an example was taken from here and modified for playing … sorry for a rough example usage):

Summary 
// Simple three.js example

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js";
import { CSS3DRenderer, CSS3DObject } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/renderers/CSS3DRenderer.js";

var mesh, renderer, scene, camera, controls, cssrenderer, cssscene;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
		renderer.domElement.style.position = 'absolute';
    renderer.domElement.style.top = 0;
    renderer.domElement.style.zIndex = 0;
    
    cssrenderer = new CSS3DRenderer();
    cssrenderer.setSize( window.innerWidth, window.innerHeight );
		cssrenderer.domElement.style.position = 'absolute';
    cssrenderer.domElement.style.top = 0;
    cssrenderer.domElement.style.zIndex = 1;


    document.body.appendChild( renderer.domElement );
    document.body.appendChild( cssrenderer.domElement );

		//document.body.appendChild( renderer.domElement );
    //renderer.domElement.appendChild( cssrenderer.domElement );

    cssscene = new THREE.Scene();
    let element = document.createElement('input');
    element.type = 'range';
    element.value = '0';
    element.zIndex= '1';
		let cssobj = new CSS3DObject(element);
    cssobj.position.multiplyScalar(100);
    cssscene.add(cssobj);

    // scene
    scene = new THREE.Scene();    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    var geometry = new THREE.SphereGeometry( 5, 12, 8 );
    
    // material
    var material = new THREE.MeshPhongMaterial( {
        color: 0x00ffff, 
        flatShading: true,
        transparent: true,
        opacity: 0.7,
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
}

function animate() {

    requestAnimationFrame( animate );
    
    //controls.update();

    renderer.render( scene, camera );
    cssrenderer.render(cssscene, camera);

}

I need see all content (webgl and css3d) and interact with it. I’ve tried different parenting solutions but can’t get needed result.
All I can get for now is see both css3d and webgl content and control it by mouse but only if ControlOrbit param for domElement is set as cssrenderer.domElement but in this case all work except range slider where you need mousedown/up/move events…

P.S. It is necessary to delete input element in html section in jsfiddle due to it’s created dynamically as CSS3DObject

#2

So, Is there a way to get OrbitControls and webgl+css3d work together, i.e. rotation of 3d scene and css3d + able to use range slider, edit boxes etc interactions ? Is there a way to make work events of css3d objects somehow while using OrbitControls or css3d should be unfortunately removed and used standard html abilities?

#3

Have you tried adding pointerEvents: none CSS rule to your CSS3D Renderer?

    cssrenderer = new CSS3DRenderer();
    cssrenderer.setSize( window.innerWidth, window.innerHeight );
    cssrenderer.domElement.style.position = 'absolute';
    cssrenderer.domElement.style.top = 0;
    cssrenderer.domElement.style.zIndex = 1;
    cssrenderer.domElement.style.pointerEvents = "none";

That way the <div> that contains all your CSS3DObjects doesn’t hijack all mouse events, and it lets them trickle down to the <canvas> where you have enabled your OrbitControls

3 Likes
#4

Thank you!!! Now it works :)!