形状几何与正交相机在threejs不显示

Question

我试图在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);

感谢您的帮助！