Three.js 如何从向量和常量得到平面?

2024-03-10

在 Three.js 中,构造函数数学平面 http://threejs.org/docs/api/math/Plane.html需要 2 个输入:

法线 -- (Vector3) 定义指向原点的平面的法线向量

Constant -- (Float) 沿法向量从原点到平面的负距离

有人可以提供说明或解释其工作原理吗?我可以理解给定一个点和法线如何构造一个平面或 3 个共面点,但无法弄清楚如何使用法线向量和常数。


TL:DR?
数学与线性代数

所以 3 维空间中的平面可以定义为落在 3 个点上的 2 维无限矩形(你知道的)

它还可以由垂直(法向)向量和平面距原点多远的常数来定义。

Three.js 采用法线向量(垂直于所需平面的向量)并基本上应用线性代数来找到平面,然后将其移动到远离原点的恒定距离。

数学计算说明: 如果我们有一个正交(垂直)的向量 A 和 B,那么它们的点积为 0。因此,如果我们使用这个原理,我们实际上可以采用已知的向量 X 并找到 2 个共面的正交向量 Y 和 Z(由于正交性)通过向后求解 X(点)Y = 0 和 X(点)Z = 0 现在我们有 2 个共面向量来构成我们的平面,我们设置常数距原点的距离

(想想向量如何具有原点和端点。如果共面向量共享一个原点,那么我们就有 3 个点:2 个端点和 1 个原点,即 3 个点构成一个平面。)

数学理论解释为什么这会起作用:
我画得不太好(没有笔和纸来展示),但基本上,想想 3D 空间中的向量。现在考虑所有可以垂直于它的向量。基本上,这会创建无数个垂直于原始向量在圆中旋转的垂直向量,如果我们无限地跨越它们,我们就创建了一个平面。

如果您有机会参加线性代数课程,我强烈推荐它。它非常有趣,与计算机图形学非常相关,并解释了 THREEjs 使用的许多 3D 空间数学

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

Three.js 如何从向量和常量得到平面? 的相关文章

  • Threejs 变换矩阵排序

    我想知道 Threejs 如何对多个矩阵进行排序 例如 var mesh new THREE Mesh geometry material mesh position set 0 20 0 T transform matrix mesh r
  • Three.js 通过 Gui 阻止 Raycast

    我想通过光线投射选择对象 但每次我想在 Three js GUI 上选择某些内容时 Mousdown 事件都会被触发 我怎么说 如果 Gui 在对象前面 则不触发 之类的话 document addEventListener mousedo
  • 如何制作可点击的 CSS3DObject

    我正在使用三个 JS CSS3DRenderer 尝试使 CSS3DObject 在单击时更新其position z 这是我的代码 var element document createElement div element style w
  • ThreeJS中InstancedMesh和InterleavedBuffer的区别和使用

    任何人都可以帮助我们解决 Threejs 中 InstancedMesh 和 InterleavedBuffer 之间的区别吗 我对这两个主题都感到困惑 任何人都可以让我知道哪种是渲染大量几何图形的优化方法 提前致谢 实例化渲染和交错缓冲区
  • Three.js 在平面上旋转相机

    我的应用程序中有一个相机 camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 camera position z 1 cam
  • Three.js ShaderMaterial 灯光问题

    你好 这是我的代码的一部分 地球仪 function createGlobe var normalMap THREE ImageUtils loadTexture images earth normal 2048 jpg var surfa
  • Three.js:为 BufferGeometry 设置索引/索引的正确方法?

    我正在尝试在 BufferGeometry 中设置每个面的 UV 索引 我从几何开始 我的几何体的每个面都有一个face materialIndex对应于紫外线指数 我正在尝试将其转换为 BufferGeometry 然后映射到face m
  • 使用 Three.js 在片段着色器中手动选择 mipmap 的 lod

    我正在使用 Three js 中的 glsl es 编写一个基于物理的着色器 为了添加镜面全局照明 我使用内部带有 mipmap 链的立方体贴图 dds 纹理 按照 CubeMapGen 的说明进行预先计算here http seblaga
  • Three.js - 在自定义几何体上平滑兰伯特材质着色的问题

    我在 Three js 中创建了一个自定义几何体 现在 我想创建一个使用平滑阴影兰伯特材质的网格 使用循环 我创建了顶点数组 然后创建了面 然后我调用了 geometry computeCentroids geometry computeF
  • 三个js如何手动添加三角形到BufferGeometry

    我一直在尝试找到使用 Three js 更改网格顶点的最快方法 我发现 如果我更改 mesh geometry attributes position array 的部分内容 然后设置 mesh geometry attributes po
  • 获取网格顶点的最佳方法 Three.js

    我是 Three js 的新手 所以也许我不会以最佳方式解决这个问题 我创建的几何图形如下 const geo new THREE PlaneBufferGeometry 10 0 然后我对其进行旋转 geo applyMatrix new
  • Threejs + Vanilla JS 和 React-Three-Fiber + Create-React-App 之间的颜色差异

    这已经困扰我一段时间了 为什么 React Three Fiber 中的材质颜色看起来比 Threejs 中暗淡 两种实现中的对象及其属性是相同的 Threejs 版本相同 在新引导中实施 create react app 没有额外的依赖项
  • 如何沿着简单的路径移动相机

    如何沿着简单的路径 由顶点 点数组创建 移动相机 我需要自动移动它 而不是像第一人称射击游戏那样通过键盘 鼠标事件来移动它 找了这个例子 http trijs org examples webgl geometry extrude spli
  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation
  • Three.js StereoEffect 显示 2 只眼睛的网格

    我有一个使用 StereoEffect 渲染器的 THREE js 场景 但是 当我向场景添加新网格时 它们会显示在两只眼睛上 而不是为每只眼睛重复显示 我相信 THREE js 应该自动完成 我不必自己复制它们 我尝试复制它们 但这是很多
  • 调试 Three.js 中的低 FPS

    我正在处理 Three js WebGL 场景 当我缩小时 我注意到 60 FPS 以便所有观察结果 约 20 000 个三角形 都在视图中 但当我放大时 FPS 非常低 因此只有一个小三角形的子集在视野中 我想弄清楚是什么导致了这种差异
  • 三.js Raycaster intersectObjects

    我正在尝试修改这个例子 https github com timoxley threejs blob master examples webgl morphtargets md2 control html来自 Three js 通过鼠标点击
  • 将颜色渐变应用于网格上的材质 - Three.js

    我有一个 STL 文件加载到我的场景中 并将单一颜色应用于 phong 材质 我想要一种方法 将两种颜色应用于该网格物体的材质 并在 Z 轴上应用渐变效果 如下例所示 渐变花瓶 https i stack imgur com Ty9gq j
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 Three js 应用程序 它将一堆圆圈从画布的底部移动到顶部 let renderer scene light circles camera initialize animate funct
  • 三.JS Shadow 到对象

    我想添加castShadow and receiveShadow在一个物体上 但是下面的代码有什么问题吗 var mtlLoader new THREE MTLLoader mtlLoader setPath objects Tree mt

随机推荐

  • 根据中心性对顶点着色

    我正在尝试更改 igraph 生成的图形中顶点的颜色 更具体地说 我有一个从邻接矩阵创建的 95 个节点图 我想根据它们的度数 介数 特征值中心性 接近度对它们进行着色 但我猜在我知道如何用它来做之后 我可以和其他人一起做 所以到目前为止我
  • ChartJS 不使用 Moment.js 显示时间数据

    我正在尝试按小时绘制给定日期的一系列数据点 并非每个小时都包含在数据集中 但我仍然想显示从 0 00 23 00 的时间并绘制可用的数据点 我的错误是 该方法未实现 要么找不到适配器 要么找不到适配器 提供了不完整的集成 然而 纵观文档 h
  • 在 Perl 中将 UTF8 字符串转换为 ASCII

    我已经尝试了 Google 和 StackOverflow 推荐的 我能找到的 所有内容 包括使用 Encode 我的代码可以工作 但它只使用 UTF8 并且我收到宽字符警告 我知道如何解决这些警告 但我没有将 UTF8 用于其他任何用途
  • 隐藏除前 4 个元素之外的所有元素

    有无穷无尽的元素 我想要做的是隐藏除前 4 个元素之外的所有元素 带有 not 选择器 我想让点击全部可见 这可以用CSS实现吗 ul li li li li li li li li li li must hide li li must h
  • 使用 Base64 图像的 HTML 到 PDF 会抛出 FileNotFoundException

    我正在使用 itextpdf 5 0 6 jar Java 8 当我尝试使用 base64 图像标签导出 html 代码时 出现文件未找到异常 如果我删除图像标签 一切都会很好 我发现了一些关于覆盖图像标签处理器的解决方案 但大多数都是旧的
  • 关闭 Selenium IDE 中新打开的选项卡或窗口

    在 Windows7 和 Firefox 中使用 Selenium IDE 自动单击链接可能会生成新选项卡或新窗口 close 关闭原始窗口或选项卡 而不是新窗口或选项卡 也许如果我有新创建的 ID 我可以选择它然后关闭它 但我不知道如何自
  • 对两个对象数组的数据求和

    我有两个对象数组 我想对具有相同键 在本例中为 id 的对象求和 如果没有匹配键 则只需创建一个新的 如果我是 我很抱歉没有解释清楚 我对 JavaScript Array Object 很陌生 var dataOne id 1 total
  • 将另一个声音添加到 .NET Speech 中

    如何将其他声音添加到 NET Speech 中 我想使用捷克语语音 我找到了一些 sis files Eliska22k sis但我不知道如何使用它 SpeechSynthesizer synth new SpeechSynthesizer
  • Common Lisp 案例和引用元素

    我正在用 CL 编写一个地下城爬行游戏 但在处理案例表单时遇到了问题 两件事情 Common Lisp 抱怨Duplicate keyform QUOTE in CASE statement make instance cl rogue t
  • 如何在 python-flask 中添加自定义字体?

    我尝试过使用 fontface css 样式 但字体没有渲染 还有另一种方法可以使用 python flask 来做到这一点吗 p style font family trial font weight bold Hello p 上面是我的
  • 使 Div 向上滚动时返回到其原始位置

    当您向下和向上滚动时 我有一个带动画的 div 问题是 当我非常快地向上和向下滚动而不让 div 完成其动画时 div 会逐渐从上部屏幕中消失 如果我删除 animate 函数中的 stop 并快速上下滚动 div 会继续执行此操作一段时间
  • 如何在Android Studio上实时查看Sqlite数据库中插入的数据

    你能帮我解决这个问题吗 我正在将值插入到我的 Sqlite 数据库中 如何检查或查看插入的数据 有没有任何工具或其他技术来显示数据 如果您想显示数据Log尝试下面的代码 for Contact cn contacts String log
  • .NET Standard 2.0 无法在 .NET Framework 2.0 中引用

    我收到一个错误 c xxxx csproj 目标为 NETStandard Version v2 0 它无法被面向 NETFramework Version v2 0 的项目引用 WindowsFormsApp1 如何解决 遗憾的是 您无法
  • 用核心运动计算倾斜角

    我的申请有一个记录会话 当用户开始记录会话时 我开始从设备的 CMMotionManager 对象收集数据并将它们存储在 CoreData 上以供稍后处理和呈现 我正在收集的数据包括 GPS 数据 加速度计数据和陀螺仪数据 数据的频率为10
  • 将 webkit 滚动条样式应用于指定元素

    我对以双冒号为前缀的伪元素很陌生 我看到一篇博客文章讨论使用一些仅适用于 webkit 的 css 来设置滚动条的样式 伪元素 CSS 可以应用于单个元素吗 This works by applying style to all scrol
  • 在节点主管中,如何监视目录中的所有内容是否发生更改?

    https github com isaacs node supervisor https github com isaacs node supervisor 我想查看 api 目录及其所有子目录内的所有内容 递归地 我怎样才能做到这一点
  • CouchDB 入门

    我已经在我的 Linux 云服务器上安装了 CouchDB 并且我正在尝试访问 Futon 欢迎屏幕 O Reilly 书中说要转到 127 0 0 1 portnum 但我不在本地主机上工作 它是我的远程服务器 所以我应该能够使用 xxx
  • 使用指定的初始化器初始化数组时出现奇怪的值

    当我初始化下面的数组时 所有输出看起来都正常 除了values 3 因为某些原因values 3 初始化为values 0 values 5 正在输出一个非常大的数字 我的猜测是我正在尝试分配values 0 values 5 在它们被正确
  • Android 中如何获取联系人信息

    我正在开发一个在android平台上编写短信的应用程序 为此 我需要获取 联系人 最近联系人 和 组 请告诉我任何教程或如何执行此操作的代码 当我们单击这三个按钮中的任何一个时 应该会出现联系人以及用于选择多个联系人的复选框 谢谢 这是以编
  • Three.js 如何从向量和常量得到平面?

    在 Three js 中 构造函数数学平面 http threejs org docs api math Plane html需要 2 个输入 法线 Vector3 定义指向原点的平面的法线向量 Constant Float 沿法向量从原点