A strange rendering result: the rendering size using BufferGeometry is smaller than expected

Questions
1

I created a box in the scene and got the size of the box.
I used an orthographic camera to render another perspective( front face).

rectangle_front

My code like this…

const camera = new Three.OrthographicCamera(-5, 5, -5, 5, 0.1, 1000)
camera.up.set(0, 0, 1)
camera.lookAt(0, 1, 0)
camera.position.set(10, 0, 0)

const x = this._width / 2
const y = this._height / 2
const z = this._depth / 2

const leftTop = [x, -y, z]
const rightTop = [x, y, z]
const rightBottom = [x, y, -z]
const leftBottom = [x, -y, -z]

const vertices = new Float32Array([
    ...leftBottom,
    ...rightBottom,
    ...rightTop,

    ...rightTop,
    ...leftTop,
    ...leftBottom
])

const geometry = new BufferGeometry()
geometry.setAttribute('position', new BufferAttribute(vertices, 3))

const plane_mesh = new Mesh(
    geometry, 
    new MeshBasicMaterial({
        color: 'red',
        transparent: true,
        opacity: 0.5,
    })
)

const plane_edge = new LineSegments(
    new EdgesGeometry(plane_mesh.geometry),
    new MeshBasicMaterial({
        color: 'red'
    })
)

scene.add(plane_mesh)
scene.add(plane_edge)

But the actual rendering result is not what I expected.

rectangle_result

The border of the plane is completely correct.
But the translucent red is not completely filled in the plane.

I can’t figure out why this happens, and what might be the cause?

2

It might be because you’re dividing the width, height & depth by 2?

1 Like
3

I was crying stupidly by myself.

I have found the cause of the problem, and there is a rather stupid error elsewhere.

My question can be closed or deleted directly.