CS3D renders div textContent and binds it to webgl object

Questions
,
1

At present, the integration of Css3D and webGl has been realized. However, the text content of div is too large to adapt to webGl . Who knows how to deal with it

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ADN CSS3D Demo</title>
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
 
<body>
 
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="editor/js/three.min.js"></script>
<script src="editor/js/controls/OrbitControls.js"></script>
<script src="editor/js/renderers/CSS3DRenderer.js"></script>
 
<script>
 

 
  var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
 
  ///////////////////////////////////////////////////////////////////
  // Initializes scene
  //
  ///////////////////////////////////////////////////////////////////
  function initialize() {
    /**
     * 1、创建相机
     */
    camera = new THREE.PerspectiveCamera(
            50,
      window.innerWidth / window.innerHeight,
      0.01,
      1000);
 
    camera.position.set(0, 5.5, 25);

    /**
     * 2、创建webGLRenderer
     */
    glRenderer = new THREE.WebGLRenderer({alpha:true});

    glRenderer.setClearColor(0xECF8FF);
    glRenderer.setPixelRatio(window.devicePixelRatio);
    glRenderer.setSize(window.innerWidth, window.innerHeight);

    glRenderer.domElement.style.position = 'absolute';
    glRenderer.domElement.style.zIndex = 1;
    glRenderer.domElement.style.top = 0;
    /**
     * 3、控制器
     */
    controls = new THREE.OrbitControls(camera, glRenderer.domElement);
    /**
     * 4、cssRenderer
     */
    cssRenderer = new THREE.CSS3DRenderer();

    cssRenderer.setSize(window.innerWidth, window.innerHeight);

    cssRenderer.domElement.style.position = 'absolute';
    // glRenderer.domElement.style.zIndex = 0;
    cssRenderer.domElement.style.top = 0;
    /**
     * 5、加载到dom中
      */
    document.body.appendChild(cssRenderer.domElement);
    cssRenderer.domElement.appendChild(glRenderer.domElement);

    /**
     * 6、创建scene
     */
    glScene = new THREE.Scene();
    cssScene = new THREE.Scene();
    /**
     * 7、加入灯光
     */
    var ambientLight = new THREE.AmbientLight(0x555555);
    glScene.add(ambientLight);
 
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set( -.5, .5, -1.5 ).normalize();
    glScene.add(directionalLight);




   var position=new THREE.Vector3(0, 0, 0)
   var rotation=  new THREE.Vector3(0, 45 * Math.PI / 180, 0)
    var material = new THREE.MeshBasicMaterial({
      color: 0x000000,
      opacity: 0.0,
      side: THREE.DoubleSide
    });

    var geometry = new THREE.PlaneGeometry(10, 10);

    var mesh = new THREE.Mesh(geometry, material);

    mesh.position.x = position.x;
    mesh.position.y = position.y;
    mesh.position.z = position.z;

    mesh.rotation.x = rotation.x;
    mesh.rotation.y = rotation.y;
    mesh.rotation.z = rotation.z;
    glScene.add(mesh)

    var iframe =document.createElement('div')
    iframe.textContent='https://www.baidu.com';
    iframe.style.width = 10+'px';
    iframe.style.height = 10+'px';
    iframe.style.border = '0px';
    var cssObject = new THREE.CSS3DObject(iframe);

    cssObject.position.x = position.x;
    cssObject.position.y = position.y;
    cssObject.position.z = position.z;

    cssObject.rotation.x = rotation.x;
    cssObject.rotation.y = rotation.y;
    cssObject.rotation.z = rotation.z;
    cssScene.add(cssObject);
    var material = new THREE.MeshBasicMaterial({
      color: Math.floor(Math.random() * 16777215),
      shading: THREE.FlatShading,
      side: THREE.DoubleSide
    });
    var mesh1 = new THREE.Mesh(
            new THREE.CylinderGeometry(0, 1, 3, 20, 4),
            material);

    mesh1.position.x = 0;
    mesh1.position.y = -3;
    mesh1.position.z = 5;

    glScene.add(mesh1);
 
    update();
  }
 
  ///////////////////////////////////////////////////////////////////
  // Updates scene
  //
  ///////////////////////////////////////////////////////////////////
  function update() {
 
    // controls.update();
 
    glRenderer.render(glScene, camera);
 
    cssRenderer.render(cssScene, camera);
 
    requestAnimationFrame(update);
  }
 
  ///////////////////////////////////////////////////////////////////
  // On document ready
  //
  ///////////////////////////////////////////////////////////////////
  // $(document ).ready(function() {
  //   initialize();
  // });
  initialize();
</script>
</body>
</html>
1 Like
2

I’ve updated your code here: https://jsfiddle.net/ux4ejgpf/

However, you will notice an inevitable side effect. The HTML text will always overlay the WebGL content. So there is not real depth sorting like in a pure WebGL scene.

3

I can’t open this site. This is my code https://codepen.io/yanwencheng/pen/vYNyGWg

4

I’ve used this code:

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

var controls, camera, glScene, cssScene, glRenderer, cssRenderer;
 
  ///////////////////////////////////////////////////////////////////
  // Initializes scene
  //
  ///////////////////////////////////////////////////////////////////
  function initialize() {
    /**
     * 1、创建相机
     */
    camera = new THREE.PerspectiveCamera(
            50,
      window.innerWidth / window.innerHeight,
      0.01,
      1000);
 
    camera.position.set(0, 5.5, 200);

    /**
     * 2、创建webGLRenderer
     */
    glRenderer = new THREE.WebGLRenderer({alpha:true});

    glRenderer.setClearColor(0xECF8FF);
   	glRenderer.setPixelRatio(window.devicePixelRatio);
    glRenderer.setSize(window.innerWidth, window.innerHeight);

    /**
     * 3、cssRenderer
     */
    cssRenderer = new CSS3DRenderer();
    cssRenderer.setSize(window.innerWidth, window.innerHeight);
		cssRenderer.domElement.style.position = 'absolute';
		cssRenderer.domElement.style.top = 0;
		
		
    /**
     * 4、控制器
     */
		controls = new OrbitControls(camera, cssRenderer.domElement);
    /**
     * 5、加载到dom中
      */
    document.body.appendChild(cssRenderer.domElement);
    document.body.appendChild(glRenderer.domElement);

    /**
     * 6、创建scene
     */
    glScene = new THREE.Scene();
    cssScene = new THREE.Scene();
    /**
     * 7、加入灯光
     */
    var ambientLight = new THREE.AmbientLight(0x555555);
    glScene.add(ambientLight);
 
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set( -.5, .5, -1.5 ).normalize();
    glScene.add(directionalLight);

   var position=new THREE.Vector3(0, 0, 0)
   var rotation=  new THREE.Euler(0, 45 * Math.PI / 180, 0)
    var material = new THREE.MeshBasicMaterial({
      color: 0x000000,
      opacity: 0.0,
      side: THREE.DoubleSide
    });

    var geometry = new THREE.PlaneGeometry(100, 100);

    var mesh = new THREE.Mesh(geometry, material);

    mesh.position.x = position.x;
    mesh.position.y = position.y;
    mesh.position.z = position.z;

    mesh.rotation.x = rotation.x;
    mesh.rotation.y = rotation.y;
    mesh.rotation.z = rotation.z;
    glScene.add(mesh)

    var iframe =document.createElement('div')
    iframe.className = 'element';
		
		var text = document.createElement('div');
		text.className = 'text';
		text.textContent = 'https://www.baidu.com';
		iframe.appendChild( text );
		
    var cssObject = new CSS3DObject(iframe);

    cssObject.position.x = position.x;
    cssObject.position.y = position.y;
    cssObject.position.z = position.z;

    cssObject.rotation.x = rotation.x;
    cssObject.rotation.y = rotation.y;
    cssObject.rotation.z = rotation.z;
    cssScene.add(cssObject);
		
    var material = new THREE.MeshBasicMaterial({
      color: Math.floor(Math.random() * 0xffffff)
    });
    var mesh1 = new THREE.Mesh(
			new THREE.CylinderGeometry(0, 10, 30, 20, 4),
			material
		);

    mesh1.position.x = 0;
    mesh1.position.y = -3;
    mesh1.position.z = 5;

    glScene.add(mesh1);
 
    update();
  }
 
  ///////////////////////////////////////////////////////////////////
  // Updates scene
  //
  ///////////////////////////////////////////////////////////////////
  function update() {
 
    // controls.update();
 
    glRenderer.render(glScene, camera);
 
    cssRenderer.render(cssScene, camera);
 
    requestAnimationFrame(update);
  }
 
  ///////////////////////////////////////////////////////////////////
  // On document ready
  //
  ///////////////////////////////////////////////////////////////////
  // $(document ).ready(function() {
  //   initialize();
  // });
  initialize();

And this CSS:

body {
	margin: 0px;
}
canvas {
	display: block;
}
.element {
	width: 120px;
	height: 50px;
	font-family: Helvetica, sans-serif;
	text-align: center;
	line-height: normal;
	cursor: default;
}

.element .text {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 8px;
}
5

Thank you very much. It seems that I need to set the plane object size to be large enough, and set the style after nesting the divs to adapt to zooming in and out. I don’t know what I understand, right?

6

Yes, the original scene had basically a too small scale in order to correctly show the content. The following official example is also a great resource for combining WebGLRenderer and CSS3DRenderer in one application:

https://threejs.org/examples/css3d_orthographic

7

I use the editor for secondary development and model editing. Is there any other way to reduce to the editor size ne when rendering

8

Have another problem,How to make it translucent