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

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).


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([


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

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

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


But the actual rendering result is not what I expected.


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?

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

1 Like

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.