我想将三个 .js 渲染的粒子包含在一个 div 中，但它不起作用

Question

我试图将three.js 渲染的粒子包含在特定的div 或html 元素中。目前它跨越整个 dom 并且不支持任何特定大小。这是我在 codepen [ https://codepen.io/deathfang/pen/WxNVoq]上找到的一个示例，我只是不确定如何将它包含在父 div 中而不是跨越整个屏幕。我只想将所有渲染的内容放在我选择的 div 中：<div id="container"></div>

Answer 1

您需要通过几种方式修改您的 codepen。

1st你需要添加一个实际的 div 来使用：

<div id="container" style='width: 637px; height: 280px;'></div>

第二，您需要修改代码以使用现有元素与添加新元素。（这是在第 729 行附近）

function init() {
    container = document.getElementById('container');

第三，您需要告诉three.js 使用元素的尺寸，而不是使用整个屏幕尺寸。（这是在第 769 行附近）

renderer.setSize(container.offsetWidth, container.offsetHeight);

看起来您的投票失败是因为您的问题措辞不当。接下来提供更多详细信息并显示您尝试过的内容以及无效的内容。你的问题越清晰，答案就越快越好。我希望这就是你要找的。