import * as THREE from 'three' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' import { Vector3 } from 'three' import { randFloat, randInt } from 'three/src/math/MathUtils.js' let scene, camera, renderer let aspect, frustumSize let mesh let delta let controls var clock = new THREE.Clock() function init(){ SetupRenderer() scene = new THREE.Scene() scene.background = new THREE.Color('white') SetupCamera() SetupControls() SetupObjects() animate() } function SetupRenderer(){ renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) document.getElementById('container').appendChild(renderer.domElement) } function SetupCamera(){ aspect = window.innerWidth / window.innerHeight frustumSize = 10 camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 0.01, 5000 ) camera.position.z = 20 } function SetupControls(){ controls = new OrbitControls(camera, renderer.domElement) controls.enableRotate = false; controls.enablePan = true controls.zoomToCursor = true; controls.mouseButtons = { RIGHT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, LEFT: THREE.MOUSE.PAN } camera.position.set(0, 0, 20) controls.update() } function SetupObjects() { let geo = new THREE.BoxGeometry(1, 1, 1) let mat = new THREE.MeshNormalMaterial() mesh = new THREE.Mesh(geo, mat) scene.add(mesh) } function animate(){ requestAnimationFrame(animate) controls.update() delta = clock.getDelta() / 10 mesh.rotation.x += delta mesh.rotation.z += delta renderer.render(scene, camera) } window.addEventListener('resize', () => { aspect = window.innerWidth / window.innerHeight camera.left = -frustumSize * aspect / 2 camera.right = frustumSize * aspect / 2 camera.top = frustumSize / 2 camera.bottom = -frustumSize / 2 camera.updateProjectionMatrix() renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(window.innerWidth, window.innerHeight) }) init()