You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.0 KiB
88 lines
2.0 KiB
6 months ago
|
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()
|
||
|
|
|