Threejs Boilerplate

Threejs Boilerplate : https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate Threejs Course : https://sbcode.net/threejs/ Discount Coupons : https://sbcode.net/coupons#threejs

by seanwasere

HTML

<!--
Threejs Boilerplate : https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate
Threejs Course : https://sbcode.net/threejs/
Discount Coupons : https://sbcode.net/coupons#threejs
-->

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://cdn.skypack.dev/[email protected]/build/three.module",
      "three/": "https://cdn.skypack.dev/[email protected]/",
      "csg": "https://cdn.jsdelivr.net/gh/Sean-Bradley/THREE-CSGMesh@master/dist/client/CSGMesh.js"
		}
	}
</script>

CSS

body {
  overflow: hidden;
  margin: 0px;
}

#button {
  position: absolute;
  height: 40px;
  width: 100px;
  margin: -20px -50px;
  top: 50%;
  left: 50%;
}

JavaScript

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module'
import {
  Font,
  FontLoader
} from 'three/examples/jsm/loaders/FontLoader'
import {
  TextGeometry
} from 'three/examples/jsm/geometries/TextGeometry'
import {
  CSG
} from 'csg'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(3, 4, 5)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const loader = new FontLoader()
loader.load('https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/fonts/helvetiker_bold.typeface.json', function(f) {
  const textGeometry = new TextGeometry('Hello', {
    font: f,
    size: 2,
    height: 0.2,
    curveSegments: 2
  })
  textGeometry.scale(1, 1, 3)
  textGeometry.center()

  const cubeCSG = CSG.fromGeometry(new THREE.BoxGeometry(10, 3, 0.25))
  const textCSG = CSG.fromGeometry(textGeometry)

  const subtractCSG = cubeCSG.subtract(textCSG)
  
  const finalMesh = CSG.toMesh(
    subtractCSG,
    new THREE.Matrix4()
  )
  finalMesh.material = new THREE.MeshNormalMaterial()
  scene.add(finalMesh)

})

window.addEventListener('resize', onWindowResize, false)

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  render()
}

const stats = Stats()
document.body.appendChild(stats.dom)

function animate() {
  requestAnimationFrame(animate)
  controls.update()
  render()
  stats.update()
}

function render() {
  renderer.render(scene, camera)
}
animate()