使用 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 的相关文章

  • 用渐变色绘制一个 D3 圆

    如何用渐变颜色画一个圆 比如说 从黄色到蓝色的渐变 通常 要创建黄色圆圈 我们可以使用以下代码 var cdata 50 40 var xscale 40 var xspace 50 var yscale 70 var svg d3 sel
  • 使用圆点填充圆,使用圆边缘的偏置

    这就是我想要实现的目标 到目前为止 我对我拥有的代码感到满意 这是从 Wolfram 和另一个数学来源借来的 但我不知道如何整合一些偏差计算 或者只是一种分配随机但有组织的内容的方法 有人能指出我正确的方向吗 这是我的代码 它将使用 P5
  • Three.js 光线投射器可以与组相交吗?

    我想知道我的光线投射器是否正在查看我已加载的 OBJ 由于从 Cinema4D 导出的方式 我相信 OBJ 是一个具有 3 个子级的 THREE Group 而不是 THREE Object 我可以更改我的 raycaster 代码行来查找
  • 以有效的方式找到最近点

    我在 2d 平面上有一个点 例如 x0 y0 和一组 n 点 x1 y1 xn yn 我想在 a 中找到距离 x0 y0 最近的点比尝试所有要点要好得多 有什么解决办法吗 我还应该说我的观点是这样排序的 bool less point a
  • 我怎样才能找到圆的所有点? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 给定半径和圆心坐标 如何找到圆的所有
  • 找到两个移动物体的更好交点

    我想极大地优化我的算法之一 我将尽力以最好的方式解释它 主题 我们当时处于二维欧几里德系统中t 0 在这个系统中有两个对象 O1 and O2 O1 and O2分别位于点PA and PC O1移动于常数和已知点方向的速度PB 当物体到达
  • 在保持 JTable 默认渲染器的同时对齐 JTable 单元格中的文本?

    我有一个 JTable 由于以下代码 它可以进行漂亮的颜色变化 table setDefaultRenderer Object class new BorderRenderer new ColorRenderer table getDefa
  • Three.js 椭圆

    如何在 Three js 中创建一个椭圆 我看过这个 在 THREE js 中绘制椭圆 https stackoverflow com questions 11419896 drawing an ellipse in three js 但如
  • 按度数在圆上找到一个点?

    假设我们有一个 100x100 坐标系 如下所示 0 0 是它的左上角 50 50 是它的中心点 100 100 是它的右下角 等等 现在我们需要从中心向外画一条线 我们知道线的角度 但需要计算其终点的坐标 您认为最好的方法是什么 例如 如
  • 如何在 Three.js 场景中包含 OVRManager?

    我创建了几个 Three js Javascript 演示应用程序 正在我的新 Oculus Go 中进行试验 我正在尝试让 Go 控制器在我的应用程序中执行某些操作 根据 Oculus 开发人员中心的说法 最好的办法是将 OVRManag
  • 如何生成随机凸多边形?

    我正在尝试设计一种生成随机二维凸多边形的方法 它必须具有以下属性 坐标应该是整数 多边形应位于角为 0 0 和 C C 的正方形内 其中 C 已给出 多边形的顶点数量应接近给定数量 N 例如 生成具有 10 个顶点并位于正方形 0 100
  • (A 框架)本地 gltf 不会加载;无法读取未定义的属性“切片”

    我从A型框架学校 https aframe io aframe school 11其中加载了 gltf 模型 然后我从 Khronos 加载了示例模型 this box https github com KhronosGroup glTF
  • 如何从一组重叠的圆计算多边形集?

    这个问题是一些计算细节的扩展这个问题 https stackoverflow com questions 1667310 combined area of overlapping circles 假设有一组 可能重叠的 圆 并且希望计算这组
  • 2d 图像点和 3d 网格之间的交点

    Given 网格 源相机 我有内在和外在参数 图像坐标 2d Output 3D 点 是从相机中心发出的光线穿过图像平面上的 2d 点与网格的交点 我试图找到网格上的 3d 点 This is the process From Multip
  • 无面点云 (PLY) 文件的 Web 查看器

    我在尝试Three Js https github com mrdoob three js 用于通过网络查看 PLY 文件 使用这个例子 http threejs org examples webgl loader ply html作为参考
  • 用 tkinter 画圆更简单的方法?

    在a上画一个圆tkinter Canvas通常由create oval方法 然而 提供边界框通常是绘制圆的一种令人困惑的方式 想出一个捷径并不是特别困难 但我找不到其他人在做类似的事情 所以我将其发布 希望其他人发现它有用 这是一个称为猴子
  • 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 扩展名 但我不确定如何让他
  • JSF 不呈现自定义 HTML 标记属性

    我想向我的登录表单添加一些 iOS 特定的标签属性 如果我查看我的网页源代码 就会发现自动更正 自动大写和拼写检查属性不存在 这是什么原因呢 我正在使用 JSF 2 x

随机推荐

  • 每次打开项目时 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