主页 / coding / 问题 / 79334558
Accepted
Victoria Stuart
Asked: 2025-01-07 07:11:08 +0800 CST

指定 three.js 图形大小

  • 772

我如何为此处显示的图表指定宽度 - 例如作为嵌套的填充元素？如图所示，图表占据了整个页面宽度；我想指定一个尺寸，例如 800px x 600px。

是否有可能使用 CSS 解决方案，例如包含<div id="3d-graph"></div>在另一个 DIV 元素中？

代码来源： https: //github.com/vasturiano/3d-force-graph（“图像作为节点”）

<head>
  <script src="//unpkg.com/3d-force-graph"></script>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam ut fringilla enim. </p>

<div id="3d-graph"></div>

<p>Suspendisse efficitur pulvinar elementum. Vestibulum a est eu erat rutrum scelerisque non et diam.</p>

<script type="module">
  import SpriteText from "https://esm.sh/three-spritetext";

  const Graph = new ForceGraph3D(document.getElementById('3d-graph'))
    .jsonUrl('https://raw.githubusercontent.com/vasturiano/3d-force-graph/c8019651c7a851ebcd7ef595123b631fe6eca3eb/example/datasets/miserables.json')
    .nodeAutoColorBy('group')
    .nodeThreeObject(node => {
        const sprite = new SpriteText(node.id);
        sprite.material.depthWrite = false;
        sprite.color = node.color;
        sprite.textHeight = 6;
        return sprite;
      });
</script>
</body>

three.js

1 个回答

  1. Best Answer

    通过Graph.width(x)和Graph.height(x)方法，您可以更改的大小Canvas，而不是图形本身。您所期望的，即对图形本身的操纵，无法通过来完成CSS。CSS 在x和y轴上定义宽度和高度，而且，它不会操纵中的内容Canvas，而是Canvas操纵作为DOM元素的本身。要缩放图形本身，您还需要z轴，因为我们在三维中移动。无法通过 scale 方法操纵图形本身。主要是，可能最好的/最简单的解决方案是缩放场景。尝试操纵图形本身涉及操纵节点和链接。

    尝试调用方法scene：

    const scene = Graph.scene();
scene.scale.set(1.5, 1.5, 1.5);

    您可以同时调用width、height和scene方法，从而使图表适应Canvas、 和Canvas本身。当您除了图表之外还期望场景中还有其他对象时，这尤其有用。

    警告：正在导入 Three.js 的多个实例。错误

    Three.js当您在项目中加载多个版本或实例时，会出现警告。如果您使用3d-force-graph或three-spritetext，它还可能会引入其自己的 Three 版本。请确保您只加载一个版本，Three.js并且所有其他库都使用同一个实例。

    顺便提一句

    另一方面，您可以创建自己的图表。

    https://codepen.io/Lucas_Mas/pen/bGXyQVO

    • 1

相关问题