three.js 在画布内给父级设置好长宽高，子集超出这个的部分不渲染

在 three.js 中，可以通过设置场景的大小和相机的视角，来控制渲染的范围。如果子集超出了父级的大小，可以考虑使用剪裁平面（Clipping Plane）来控制渲染的范围，或者调整相机的位置和视角，使得超出部分不可见。

下面是使用剪裁平面的示例代码：

// 创建剪裁平面
var plane = new THREE.Plane( new THREE.Vector3( 0, 0, -1 ), 0.5 );
var planes = [ plane ];

// 创建剪裁器
var clipper = new THREE.ClipPlane( planes );

// 将剪裁器添加到渲染器中
renderer.clippingPlanes = planes;

// 将剪裁器添加到需要剪裁的对象中
object.clippingPlanes = planes;

在上述代码中，我们创建了一个平面剪裁器，将其添加到了渲染器和需要剪裁的对象中。这样，在渲染时，超出剪裁平面的部分就会被裁剪掉。

除了剪裁平面，还可以考虑使用相机的裁剪面（Frustum）来控制渲染的范围。具体操作可以参考 three.js 的官方文档：https://threejs.org/docs/#api/en/core/Frustum 。

相关问题

three.js 给父级设置好长宽高，子集超出这个的部分不渲染

可以使用CSS的overflow属性来实现这个效果。将父级元素的overflow属性设置为hidden，这样子元素超出父级元素的部分就不会被渲染。示例代码如下：

<style>
    #canvas-container {
        width: 800px;
        height: 600px;
        overflow: hidden;
    }
</style>

<div id="canvas-container">
    <!-- three.js渲染的画布 -->
</div>

如何设置子集容器在父级容器中的位置

在设置子集容器在父级容器中的位置时，可以使用 CSS 的定位属性（position）和偏移属性（top、bottom、left、right）。

以下是一些基本的步骤：

1. 给父级容器设置 position 属性值为 relative 或者 absolute，如果没有设置 position 属性，子元素的定位属性将相对于文档根元素（HTML）。

2. 给子集容器设置 position 属性值为 absolute，这样子元素的定位将相对于父元素。

3. 使用 top、bottom、left、right 属性来设置子集容器在父级容器中的位置。

例如，如果想要将子集容器位于父级容器的中心位置，可以使用以下 CSS 代码：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里，我们先将父级容器设置为相对定位，然后将子集容器设置为绝对定位，并使用 top 和 left 属性将其移动到父级容器的中心位置。transform 属性用于调整子元素的位置，使其在父元素的中心水平和垂直居中。