1. 首页
  2. three.js

three.jsCS3D呈现div textContent并将其绑定到webgl对象

three.jsn目前,Css3D与webGl的集成已经实现。但是,div的文本内容太大,无法适应webGl。谁知道如何处理它n<!DOCTYPE = = = = = new THREE.MeshBasicMaterial({color: 0x000000,opacity: 0.0,side: = = = rotation.z;glScene.add(mesh)var = 10+ = = = = new THREE.MeshBasicMaterial({color: Math.floor(Math.random() * 16777215),shading: THREE.FlatShading,side: = 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();n我在这里更新了您的代码:https://jsfiddle.net/ux4ejgpf/然而,你会注意到不可避免的副作用。HTML文本将始终覆盖WebGL内容。因此,没有像纯WebGL场景中那样的真正深度排序。n我无法打开此网站。这是我的密码https://codepen.io/yanwencheng/pen/vYNyGWg6n我用过这个代码:nimport * 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() = = new OrbitControls(camera, cssRenderer.domElement);/*** = new THREE.DirectionalLight(0xffffff);directionalLight.position.set( -.5, .5, -1.5 = new = = = = = = =>nAnd this CSS:nbody {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;}n非常感谢。似乎我需要将平面对象大小设置为足够大,并在嵌套div后设置样式以适应放大和缩小。我不知道我懂什么,对吗?n严文成:n似乎我需要将平面对象的大小设置为足够大,n是的,原始场景的比例基本上太小,无法正确显示内容。下面的官方示例也是在一个应用程序中结合WebGLRenderer和CSS3DRenderer的一个很好的资源:nhttps://threejs.org/examples/css3d_orthographic7n我使用编辑器进行二次开发和模型编辑。渲染时是否有其他方法将编辑器大小减小为ne?还有一个问题,如何使其半透明n CS3D renders div textContent and binds it to webgl objectn

three.jsCS3D呈现div textContent并将其绑定到webgl对象 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-jscs3d%e5%91%88%e7%8e%b0div-textcontent%e5%b9%b6%e5%b0%86%e5%85%b6%e7%bb%91%e5%ae%9a%e5%88%b0webgl%e5%af%b9%e8%b1%a1-2/