Threejs remove background area from elliptical cylinder

I have this code that draws an elliptical cylinder, and want to remove the background part and only keep the front half of the elliptical cylinder.. How to go about?

setupEllipticShape() {
    
    // depths
    const yRadiusTop = 0.5; 
    const yRadiusBottom = 0.5;

    // 1.6
    const xRadiusTop = this.BOX_DIMENSIONS.value.topWidth; 
    // 1.2
    const xRadiusBottom = this.BOX_DIMENSIONS.value.bottomWidth;
    // 5.0
    const height = this.BOX_DIMENSIONS.value.height;

    console.log(xRadiusTop)
    console.log(xRadiusBottom)
    console.log(height)

    // Create the top ellipse
    const topEllipse = new THREE.EllipseCurve(0, 0, xRadiusTop, yRadiusTop, 0, 2 * Math.PI, false, 0);
    const topPoints = topEllipse.getPoints(50);

    // Create the bottom ellipse
    const bottomEllipse = new THREE.EllipseCurve(0, 0, xRadiusBottom, yRadiusBottom, 0, 2 * Math.PI, false, 0);
    const bottomPoints = bottomEllipse.getPoints(50);

    // Create vertices for the sides, by connecting top and bottom points
    const vertices = [];
    const uv = []; // UV coordinates for texture mapping
    const segments = topPoints.length;

    for (let i = 0; i < segments; i++) {
        const topPoint = topPoints[i];
        const bottomPoint = bottomPoints[i];

        // Top vertex (mapped to UV Y = 0)
        vertices.push(topPoint.x, height / 2, topPoint.y);
        uv.push(1 - (i / segments), 0); // Inverted X for top

        // Bottom vertex (mapped to UV Y = 1)
        vertices.push(bottomPoint.x, -height / 2, bottomPoint.y);
        uv.push(1 - (i / segments), 1); // Inverted X for bottom
    }

    // Create the faces (triangle indices) by connecting vertices between the top and bottom ellipses
    const indices = [];
    for (let i = 0; i < segments; i++) {
        const topIndex = i * 2;
        const bottomIndex = i * 2 + 1;

        const nextTopIndex = ((i + 1) % segments) * 2;
        const nextBottomIndex = ((i + 1) % segments) * 2 + 1;

        // Triangle 1
        indices.push(topIndex, bottomIndex, nextBottomIndex);

        // Triangle 2
        indices.push(topIndex, nextBottomIndex, nextTopIndex);
    }

    // Create the geometry
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2)); // Set UV coordinates for texture mapping
    geometry.setIndex(indices);

    // Compute normals for proper lighting
    geometry.computeVertexNormals();

    const textureInfo = this.drawConfig.texture;
    let textureImage;

    if(textureInfo.type == 'image') {
        textureImage = this.#texture_loader.load(textureInfo.value);
        textureImage.anisotropy = this.#renderer.capabilities.getMaxAnisotropy();
        textureImage.offset.x = 0;
        textureImage.flipY = false;
    }
    
    // Default to a green filled mesh
    const material = new THREE.MeshStandardMaterial( 
        textureInfo.type == 'color' ? { color: textureInfo.value }:
        textureInfo.type == 'image'? { map: textureImage, side: THREE.DoubleSide }: 
        { color: 0x00ff00 }
    );
    
    this.#shape = new THREE.Mesh(geometry, material);
    this.#shape.opacity = 0.9;

    this.#shape.position.x = this.BOX_DIMENSIONS.value.centerX;
    this.#shape.position.y = this.BOX_DIMENSIONS.value.centerY;

    this.#shape.rotation.x = this.ROTATION.value?.x ?? 0.21;
    this.#shape.rotation.y = this.ROTATION.value?.y ?? 6.9;

    this.#scene.add(this.#shape);
}

Here’s an image showing how the model is displayed:

I wanna simply remove that flat 2D surface in the back of the cylinder? any ideas?

Thank you

You need to sign in to view this answers