使用 CSS3DRenderer 创建等效的 CubeGeometry

2023-12-07

我正在寻找示例代码,它将展示如何创建一个立方体(类似于THREE.CubeGeometry) 在 ThreeJS 中使用CSS3DRenderer。像下面这样的东西

var my_cube = new **CSS3dCubeGeometry**( cube_width, cube_height, cube_depth)

var object = new THREE.CSS3DObject( my_cube );

scene.add( object );

THREE.CSS3DObject不存在,我正在寻找它的潜在实现。


您可以使用以下命令创建一个立方体CSS3DRenderer像这样:

// params
var r = Math.PI / 2;
var d = 50;
var pos = [ [ d, 0, 0 ], [ -d, 0, 0 ], [ 0, d, 0 ], [ 0, -d, 0 ], [ 0, 0, d ], [ 0, 0, -d ] ];
var rot = [ [ 0, r, 0 ], [ 0, -r, 0 ], [ -r, 0, 0 ], [ r, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ];

// cube
var cube = new THREE.Object3D();
scene.add( cube );

// sides
for ( var i = 0; i < 6; i ++ ) {

    var element = document.createElement( 'div' );
    element.style.width = '100px';
    element.style.height = '100px';
    element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
    element.style.opacity = '0.50';

    var object = new THREE.CSS3DObject( element );
    object.position.fromArray( pos[ i ] );
    object.rotation.fromArray( rot[ i ] );
    cube.add( object );

}

Fiddle: http://jsfiddle.net/MdPrb/7

三.js r.64

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS3DRenderer 创建等效的 CubeGeometry 的相关文章

  • WPF - 路径几何...有没有办法绑定数据属性?

    我有一个ControlTemplate作为 气泡 弹出窗口AdornerLayer给定的控制 它工作正常 但我需要能够计算它应该显示的位置 中间 底部 代替
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • 如何在 React Native 中渲染自定义 3D 对象

    我已经成功使用 Three js expo Three 和 expo gl 在 React Native 中配置了红色立方体的 3D 渲染 但我想让用户渲染他们自己可能拥有的自定义 3D 对象 obj 或 mtl 扩展名 但我不确定如何让他
  • 如何在 Three.js 中从 3D 点创建 3D 表面?

    我正在制作一个项目来制作带有点和线 弯曲或非弯曲 的简单 3D 模型 对于第一个版本 我使用 SVG 元素进行简单渲染 平滑曲线和鼠标事件 现在我正在尝试使用Three js渲染器而不是 SVG 我必须创建 3d 管来替换曲线 但我不知道如
  • 将球面坐标转换为笛卡尔坐标然后再转换回笛卡尔坐标并不能给出所需的输出

    我正在尝试编写两个函数来将笛卡尔坐标转换为球面坐标 反之亦然 以下是我用于转换的方程式 也可以在此找到维基百科页面 https en wikipedia org wiki Spherical coordinate system And 这是
  • 帮我用光线追踪器解决这个错误

    我不会针对这个问题发布任何代码 因为它需要太多的上下文 但我将从概念上解释我正在做什么 我正在构建一个使用仿射变换的简单光线追踪器 我的意思是 我将来自相机坐标的所有光线与通用形状相交 这些形状都具有关联的仿射变换 并且光线在与场景对象相交
  • 在小于 O(n) 的时间内检查凸多边形交集?

    我有 2 个凸多边形 2d 我想检查这 2 个多边形是否相交 事实上 我会多次移动和旋转多边形 所以我也可以做一些预计算来获得这个问题的快速答案 我正在寻找一种低复杂度的算法 我知道可以检查一个点是否位于 O log n 的凸多边形中 我想
  • Three.js - 推开然后恢复“鼠标移动”上的元素位置

    大家好 我正在开发一个项目Three js用户可以在哪里hover一个镶嵌的面 每个网格在与不可见球体相交时都应该被推开 并且当它在其区域之外时返回到其原始位置 我在用this http codepen io soulwire pen Ff
  • 是否有任何算法可以计算给定定义形状的坐标的形状面积?

    所以我有一些接收 N 个随机数的函数2D点 是否有任何算法可以计算输入点定义的形状面积 你想要计算多边形的面积 http local wasp uwa edu au pbourke geometry polyarea 取自链接 转换为 C
  • 将矩形分组到网格中

    我有一个随机切片的矩形网格 宽度为 80 单位 我已经将网格每一行的可用空间存储在如下数组中 pX 1 sX 15 pX 30 sX 13 pX 43 sX 1 pX 44 sX 17 pX 1 sX 15 pX 16 sX 14 pX 3
  • 如何检查 webgl(two.js) 的客户端性能

    我有一个使用 Three JS 的图形项目 现在我想自动检查客户端 GPU 性能并计算可以在应用程序中加载多少元素 我想到了诸如 GPU 基准测试之类的东西 看一眼stats js https github com mrdoob stats
  • 使用纽厄尔方法在 Python 中计算表面法线

    我正在尝试实现 Newell 方法来计算 Python 中的表面法向量 基于以下伪代码here https www opengl org wiki Calculating a Surface Normal Begin Function Ca
  • Electron - 如何使用主进程和渲染进程

    此时 经过大量研究和谷歌搜索 我了解了 main 和 renderer 的作用 以及它们在 Electron 应用程序中的重要性 然而 我在这里向所有有知识的人发出我的请求 请给我一个机会clear解释如何在我的应用程序中具体实现这一点 我
  • 多个点之间的最短路线

    我需要找到多个点之间的最短路线 假设我有以下四点 var startPoint new Point 1 1 var pointsToGoPast new List
  • 当搜索栏改变大小时,Android v2 版 Google 地图上的圆圈会闪烁

    我正在按照此方法实现一种在 Android 中的 Google 地图 v2 上显示搜索半径的方法 Method for drawing a circle around the user private void drawMapSearchR
  • 合并多边形的高效算法

    我有一个多边形列表 在这个列表中 一些多边形重叠 或者接触其他多边形 我的任务是合并所有相互重叠或接触的多边形 我有一个union执行此操作的方法 做到这一点最有效的方法是什么 我目前能想到的是循环遍历多边形列表 检查合并列表以查看该多边形
  • React-Three-Fiber:JSON 中位置 3 出现意外标记 c 错误

    我正在尝试使用 React Three Fiber 加载 glb 文件 但出现以下错误 Error Unexpected token c in JSON at position 3 我不确定我做错了什么 看来此问题最常见的解决方案是将 gl
  • 加载内容时在 ImageView 中使用“动画圆圈”

    我目前在我的应用程序中使用一个列表视图 可能需要一秒钟才能显示 我目前所做的是使用列表视图的 id android empty 属性来创建 正在加载 文本
  • 球体表面上(经度、纬度)点的凸包

    标准凸包算法不适用于 经度 纬度 点 因为标准算法假设您需要一组笛卡尔点的包 纬度 经度点是not笛卡尔坐标系 因为经度在反子午线处 环绕 180 度 即 东经 179 度以东 2 度为 179 因此 如果您的点集恰好横跨反子午线 您将错误
  • 三个 JS Orbitcontrols 设置目标而不用 LookAt

    我正在尝试制作一个用于构建模型的 3D 查看器 我们已加载模型并尝试与模型进行某种交互 因此 我们使用 OrbiControls 来旋转 平移和缩放模型 我们希望在查看器中具有这样的行为 当用户单击并拖动 从而旋转 时 旋转中心位于用户单击

随机推荐

  • 每次打开项目时 Xcode 都会意外退出

    打开 xcode 后 当我打开当前项目时 它会显示类似 xcode 意外退出 的警告 并有 3 个选项 忽略 报告 和 重新打开 当我单击 重新打开 时 它将打开 xcode 窗口 然后再次自动关闭并显示相同的警告 为什么会发生这种情况 如
  • 如何实现多线程并行执行多个任务?

    我是线程编程的新手 我必须在并行和后台运行一些任务 以便主 UI 执行线程保持对用户操作的响应 并等待每一项任务完成 然后再继续进一步执行 就像是 foreach MyTask t in myTasks t DoSomethinginBac
  • 操作按钮和observeEvent

    我想要一个按钮来触发对预先指定的非反应变量的操作x 每次按下按钮时x lt x 1应予执行 为了检查是否正确完成 应显示结果 为了实现这个我尝试过observeEvent 但它只做了一次它应该做的事情 它如何正常工作 看起来rv仅在以下范围
  • 将 Git 存储库发布到 SVN

    我和我的小团队使用 Git 工作 较大的团队使用 Subversion 我想安排一个 cron 作业来发布我们当前的存储库HEAD每小时进入 SVN 存储库中的某个目录 我以为我已经弄清楚了 但我之前写下的食谱现在似乎不起作用 git cl
  • NSSearchPathForDirectoriesInDomains 麻烦(掉头发快)

    我很快就秃顶了 需要帮助 我正在编写一个需要访问目录的应用程序 我希望得到一种形式的路径 用户 我 库 应用程序支持 iPhone模拟器 用户 应用程序 6958D21C C94B 4843 9EF1 70406D0CA3A3 文档 然而我
  • 如何在firebase中保存用户分数并在Android studio中实时检索

    我正在创建一个应用程序 其中单击按钮时点会增加 并且这些点应保存到 firebase 中 我设法将这些数据保存到 firebase 中 但是 当我销毁我的应用程序并再次打开它时 点值显示相同 但 在单击按钮后 又从0开始 例如 每次点击按钮
  • 如何使用numpy python计算元素向量的数量

    例如 如果我有 a np array 1 1 4 1 4 3 1 我们可以看到 数字 1 出现了四次 数字 4 出现了两次 只有 3 次 我想要得到以下结果 array 4 4 2 4 2 1 4 正如您所看到的 每个单元格都被其元素的计数
  • 当项目悬停时显示列表

    我有这个样本 link show hover list categories max height inherit opacity 1 list categories list style type none padding 0px mar
  • 了解 python 中嵌套 lambda 函数的行为

    我正在尝试学习纯函数式编程 但这段代码让我感到困惑 尤其是第二行 我不明白价值如何2被传递给变量x 有人可以解释一下这个嵌套吗lambda行为 gt gt gt square func lambda x x 2 gt gt gt funct
  • 任务generateMetadataFileForReleasePublication使用任务androidSourcesJar的此输出,而不声明显式或隐式依赖项

    以下命令无法发布我的 Android 库 gradlew my sdk publish stacktrace 这是我看到的错误 Reason Task my sdk generateMetadataFileForReleasePublica
  • 理解 __get__ 和 __set__ 以及 Python 描述符

    I am trying了解 Python 的描述符是什么以及它们的用途 我理解它们是如何工作的 但我有疑问 考虑以下代码 class Celsius object def init self value 0 0 self value flo
  • 防止箭头键转到上一个/下一个单元格

    在 Visual Studio Code 中使用 Jupyter 笔记本 使用 Microsoft 的 Python 扩展 时 是否可以配置应用程序以防止箭头键退出当前单元格 基本上 当我使用箭头键在可编辑单元格 代码或降价 内移动时 我不
  • 如何检测操作系统或设备类型等系统信息

    我想知道的最重要的事情是设备类型 操作系统版本 是否有硬件键盘 也许还有屏幕分辨率 但如果您知道其他有用的调试信息 请添加它们 我找到了操作系统版本 string OS Version System getProperty os versi
  • 可能出现意外的参考比较

    我有以下代码给出警告 可能出现意外的参考比较 要进行值比较 请将左侧转换为类型 string if lblStatus Content ACTIVE Do stuff else Do other Stuff 我假设警告是因为lblStatu
  • 由于 mscordbi.dll 版本错误,托管调试不再起作用

    我正在尝试使用 Visual Studio 进行托管调试内存转储 但失败并显示以下错误消息 托管调试对此小型转储不可用 无法找到托管小型转储调试所需的库 mscordbi dll 版本 4 0 30319 0 尝试以下任一步骤后重新启动调试
  • 编译 K&R 示例时出现问题

    我在编译本书第 5 11 节中提供的示例程序时遇到问题 我删除了大部分代码 只留下了相关的内容 define MAXLINES 5000 char lineptr MAXLINES void qsort1 void lineptr int
  • :target 伪选择器和选项卡

    所以我想创建一个仅使用 CSS 的选项卡系统 到目前为止我所拥有的有效 但我不知道如何使一个选项卡默认可见 选项卡 section class tabs ul li a href tab1 1 a li li a href tab2 2 a
  • Laravel - 完整性约束违规:1452 无法添加或更新子行:外键约束失败

    我目前正在通过个人项目学习 Laravel Context 在类似博客的应用程序中 我需要将文章链接到其作者 当我保存文章时 出现以下错误 Error SQLSTATE 23000 违反完整性约束 1452 无法添加或更新子行 外键约束失败
  • Serilog Logcontext 属性在异常处理程序之后消失

    在我的网站中 我正在集成 Serilog 以将错误记录到自定义接收器 日志记录通过 LogContext 进行了丰富 其中需要传递一些自定义属性 如果我使用 Log Information 它会带着 LogEvent 中的属性到达我的接收器
  • 使用 CSS3DRenderer 创建等效的 CubeGeometry

    我正在寻找示例代码 它将展示如何创建一个立方体 类似于THREE CubeGeometry 在 ThreeJS 中使用CSS3DRenderer 像下面这样的东西 var my cube new CSS3dCubeGeometry cube