Orthographic OrbitControls

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/es-module-shims@1.6.0/dist/es-module-shims.js"></script>

<script type="importmap">
  {
		"imports": {
			"three": "https://cdn.skypack.dev/three@0.145.0/build/three.module",
      "three/": "https://cdn.skypack.dev/three@0.145.0/",      
      "dat.gui": "https://cdn.skypack.dev/dat.gui"
		}
	}
</script>

CSS

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

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls';
import Stats from 'three/examples/jsm/libs/stats.module';
import {
  GUI
} from 'dat.gui'

const scene = new THREE.Scene()
scene.add(new THREE.GridHelper())

const data = {
  frustumSize: 5
}
const aspect = window.innerWidth / window.innerHeight
const camera = new THREE.OrthographicCamera(
  (data.frustumSize * aspect) / -2,
  (data.frustumSize * aspect) / 2,
  data.frustumSize / 2,
  data.frustumSize / -2,
  0.01,
  100
)
camera.position.set(5, 2, 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 geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
})

const cube = new THREE.Mesh(geometry, material)
cube.position.y = .5
scene.add(cube)


function onWindowResize() {
  const aspect = window.innerWidth / window.innerHeight

  camera.left = (-data.frustumSize * aspect) / 2
  camera.right = (data.frustumSize * aspect) / 2
  camera.top = data.frustumSize / 2
  camera.bottom = -data.frustumSize / 2

  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
}
window.addEventListener('resize', onWindowResize, false)


const gui = new GUI()
const cubeFolder = gui.addFolder('Cube')
cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
cubeFolder.add(cube.rotation, 'z', 0, Math.PI * 2)
cubeFolder.open()
const cameraFolder = gui.addFolder('Camera')
cameraFolder.add(data, 'frustumSize', 1, 10).onChange(() => {
  onWindowResize()
})
cameraFolder.open()

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

function animate() {
  requestAnimationFrame(animate)

  controls.update()

  render()

 ...