Three.js 使用三轴正交摄影机塑造几何体不显示

我试图在three.js中显示形状。不幸的是，没有显示任何内容，我无法真正找出我缺少的内容。设置基本上如下面的代码段所示

let canvas = document.getElementById(this.canvasId);
this.scene = new Scene();
this.renderer = new WebGLRenderer({canvas: canvas});

//create the camera and set the viewport
let width = canvas.clientWidth;
let height = canvas.clientHeight;

canvas.width = width;
canvas.height = height;
this.renderer.setViewport(0, 0, width, height);

this.camera = new OrthographicCamera(width / -2, width/2, height/-2, height/2, -500, 1000);

//create a square as shape
let shape = new Shape();
shape.moveTo(100, 100);
shape.lineTo(200, 100);
shape.lineTo(200, 200);
shape.lineTo(100,200);
shape.lineTo(100,100);

let shapeGeom = new ShapeGeometry(shape);
let shapeMaterial = new MeshBasicMaterial({color: 0x00ff00});
let shapeMesh = new Mesh(shapeGeom, shapeMaterial);
shapeMesh.position.set(200, 200, 0);
this.scene.add(shapeMesh)

//render
this.renderer.render(this.scene, this.camera);

---

谢谢你的帮助

首先，请看。谢谢@WestLangley的帮助。我更改了顶部和底部边界的值。你能解释一下为什么顶部不可能有负值，底部不可能有正值吗。如果我的世界坐标是“颠倒”的呢？three.js使用右手坐标系，所以你的世界坐标也应该是。好的，谢谢你的帮助！