From 400602d0b608a9017969ed9744255876f1ac2485 Mon Sep 17 00:00:00 2001
From: yandeu <20306025+yandeu@users.noreply.github.com>
Date: Tue, 23 Feb 2021 23:43:49 +0100
Subject: [PATCH] Added flat package

---
 README.md    |  7 ++++---
 src/index.ts | 21 ++++++++++++++++++++-
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index fb9d381..065d932 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 # Three.js & ammo.js
 
-Just a simple example of Three.js with ammo.js
+## Simple example of Three.js with ammo.js
 
-Run `npm install` and `npm start`
+- Contains a **CSG Example with BufferGeometries**.
+- Contains the **Flat Package for 2D Elements**.
 
 ---
 
-Contains a **CSG Example with BufferGeometries** for three.js >= r125
+Run `npm install` and `npm start`
diff --git a/src/index.ts b/src/index.ts
index 3d60b5e..c9952b1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,6 +8,9 @@ import { AmmoPhysics, ExtendedMesh, PhysicsLoader } from '@enable3d/ammo-physics
 // CSG
 import { CSG } from '@enable3d/three-graphics/jsm/csg'
 
+// Flat
+import { TextTexture, TextSprite } from '@enable3d/three-graphics/jsm/flat'
+
 console.log('Three.js version r' + THREE.REVISION)
 
 const MainScene = () => {
@@ -27,9 +30,15 @@ const MainScene = () => {
   // you can access Ammo directly if you want
   // new Ammo.btVector3(1, 2, 3).y()
 
+  // 2d camera/2d scene
+  const scene2d = new THREE.Scene()
+  const camera2d = new THREE.OrthographicCamera(0, width, height, 0, 1, 1000)
+  camera2d.position.setZ(10)
+
   // renderer
   const renderer = new THREE.WebGLRenderer()
-  renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer.setSize(width, height)
+  renderer.autoClear = false
   document.body.appendChild(renderer.domElement)
 
   // csg
@@ -49,6 +58,12 @@ const MainScene = () => {
   meshC_2.position.setX(7)
   scene.add(meshC_0, meshC_1, meshC_2)
 
+  // add 2d text
+  const text = new TextTexture('some 2d text', { fontWeight: 'bold' })
+  const sprite = new TextSprite(text)
+  sprite.setPosition(0 + text.width / 2, height - text.height / 2)
+  scene2d.add(sprite)
+
   // dpr
   const DPR = window.devicePixelRatio
   renderer.setPixelRatio(Math.min(2, DPR))
@@ -126,7 +141,11 @@ const MainScene = () => {
 
     physics.update(clock.getDelta() * 1000)
     physics.updateDebugger()
+
+    renderer.clear()
     renderer.render(scene, camera)
+    renderer.clearDepth()
+    renderer.render(scene2d, camera2d)
 
     requestAnimationFrame(animate)
   }