3d-force-graph中文文档 7 Jun 2022 3d-force-graph 简介 一个开源web组件，使用力导向迭代布局在三维空间中表示一个图形数据结构。使用ThreeJS/WebGL进行3D渲染，使用d3-force-3d或ngraph进行底层物理引擎。 阅读原文
WEB开发 24 May 2022 3d-force-graph官网地址及相关重要链接 官网地址：https://vasturiano.github.io/3d-force-graph/ GitHub地址：https://github.com/vasturiano/3d-force-graph 阅读原文
3d-force-graph笔记 3 May 2021 3d-force-graph笔记(8)：透明背景 透明背景用rgba形式： .backgroundColor('rgba(0,0,0,0)') 如此，可间接给图层添加背景图。 // html <div class="wrap"> <div id="3d-graph"> … 阅读原文
3d-force-graph笔记 1 May 2021 3d-force-graph笔记(7)：曲线、文本位置 当两个节点之间有多条关系时，通常采用曲线连接，避免重叠。 使用曲线： const gData = { nodes: .map(i => ({ id: i })), links: }; const Graph = ForceGraph3D() (document.getElementById(&… 阅读原文
3d-force-graph笔记 13 Apr 2021 3d-force-graph笔记(6)：文本 3d-force-graph文本可以使用2D文本或精灵文本SpriteText，后者有3D透视效果，近大远小，性能会有折扣。 3D字体需要下载字体文件，各项开销较大，按需使用。 举例关系线对象用2D文本表达： .linkThreeObjectExtend(true) .linkThreeObject… 阅读原文
3d-force-graph笔记 11 Apr 2021 3d-force-graph笔记(5)：动态批量修改Object3D透明度 ThreeJS Object3D透明度归于材质属性opacity，以THREE.Group为例： // 透明度 function setOpacity(obj, opacity) { obj.traverse(child => { // 自定义筛选逻辑 // if (child instanc… 阅读原文
3d-force-graph笔记 8 Apr 2021 3d-force-graph笔记(4)：canvas纹理材质 3d-force-graph使用ThreeJS / WebGL进行3D渲染，THREEJS可以用canvas texture创建材质，canvas中自定义图形、文字等，十分便捷。 /** 创建自定义canvas */ function createTexture() { var canvas = d… 阅读原文
3d-force-graph笔记 8 Apr 2021 3d-force-graph笔记(3)：渐变关系线 linkThreeObject用于生成自定义3d对象以呈现为图形链接。返回值是一个ThreeJS Object3d的实例。如果返回false，则该链接将使用默认的3d对象类型。 .linkThreeObject(link => { const colors = new Float32Array… 阅读原文
3d-force-graph笔记 6 Apr 2021 3d-force-graph笔记(2)：快速入门 通过编写一个简单实例，快速上手。 安装 $ npm install 3d-force-graph 或 $ yarn add 3d-force-graph 导入 三种方式任选一。 import ForceGraph3D from '3d-force-graph'; var ForceG… 阅读原文
3d-force-graph笔记 6 Apr 2021 3d-force-graph笔记(1)：简介 3d-force-graph是一个使用力导向迭代布局在三维空间中表示图形数据结构的web组件。应用ThreeJS/WebGL进行3D渲染，使用d3-force-3d或ngraph作为底层物理引擎。 3d-force-graph是force-graph家族成员之一，相关GitHub库： force-g… 阅读原文
