Question

我正在学习three.js并且我已成功完成了多维数据集。现在我正在尝试制作三维文字。我已经从网络上的一个例子中复制了代码，这是我发现的最简单的例子（例如here）。我已将示例中的所有文件复制到我的PC：html，css和4个引用的.js文件，包括字体＆＃34; janda_manatee_solid_regular.js＆＃34;。然后，当我加载html时，不显示3d文本（画布中没有任何内容呈现），但我在控制台中没有收到任何错误。

我已经上传了here html和其他所有内容（css和js）。这段代码的问题是什么？

Answer 1

在您网页的html代码中（来自您提供的链接），有：

<div id="canvas">
    <canvas width="800" height="600"></canvas>
    <canvas width="800" height="600"></canvas>
</div>

可能在您的源代码中，您将其作为

<div id="canvas">
    <canvas width="800" height="600"></canvas>
</div>

然后在font-example.js中执行此操作

container = document.getElementById( 'canvas' );

因此，你已经在canvas div中有了一个canvas元素，然后再添加一个相同大小的canvas元素。

var SCREEN_WIDTH = 800, SCREEN_HEIGHT = 600;
...
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

结果，你有两个画布，你看不到第二个画布（看起来很漂亮的文字）因为它在屏幕下方。解决方案是在源html中保持canvas div为空：

<div id="canvas"></div>

3d文本未显示在three.js中

1 个答案: