STEINNI
117 lines
3.6 KiB
JavaScript
117 lines
3.6 KiB
JavaScript
import * as THREE from './three.module.js';
|
|
import { OrbitControls } from './OrbitControls.module.js';
|
|
|
|
export class Threetobus{
|
|
|
|
constructor(canvasEl){
|
|
this.canvasEl = canvasEl
|
|
this.cameras = {}
|
|
}
|
|
|
|
initScene(){
|
|
// Scene
|
|
this.scene = new THREE.Scene()
|
|
|
|
// Cameras
|
|
this.cameras.persp1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
|
|
this.cameras.persp1.position.set(3, 3, 5)
|
|
const aspect = window.innerWidth / window.innerHeight
|
|
const frustumSize = 10
|
|
this.cameras.cam2Dtop = new THREE.OrthographicCamera(
|
|
-frustumSize * aspect / 2,
|
|
frustumSize * aspect / 2,
|
|
frustumSize / 2,
|
|
-frustumSize / 2,
|
|
0.1,
|
|
1000
|
|
)
|
|
this.cameras.cam2Dtop.position.set(0, 100, 0)
|
|
this.cameras.cam2Dtop.lookAt(0, 0, 0)
|
|
//this.camera = this.cameras.persp1
|
|
|
|
// Lights
|
|
const light = new THREE.DirectionalLight(0xffffff, 1)
|
|
light.position.set(5, 5, 5)
|
|
light.intensity = 2
|
|
this.scene.add(light)
|
|
this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
|
|
|
|
// Renderer
|
|
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
|
|
|
|
}
|
|
|
|
startRendering(){
|
|
//controls
|
|
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
|
//this.renderer.render(this.scene, this.camera)
|
|
|
|
window.addEventListener('resize', () => {
|
|
this.camera.aspect = window.innerWidth / window.innerHeight
|
|
this.camera.updateProjectionMatrix()
|
|
renderer.setSize(window.innerWidth, window.innerHeight)
|
|
})
|
|
|
|
this.render()
|
|
}
|
|
|
|
changeCamera(camName){
|
|
if(camName in this.cameras){
|
|
this.camera = this.cameras[camName]
|
|
}
|
|
}
|
|
|
|
buildFromJSON(desc){
|
|
let obj
|
|
if(desc.type === 'Mesh') {
|
|
const geom = new THREE[desc.geometry.type](...(desc.geometry.args || []))
|
|
const mat = new THREE[desc.material.type]( desc.material.color ? { color: desc.material.color } : {} )
|
|
obj = new THREE.Mesh(geom, mat)
|
|
} else if(desc.type === 'Group') {
|
|
obj = new THREE.Group()
|
|
} else {
|
|
throw new Error("Unknown type: " + desc.type)
|
|
}
|
|
|
|
// Apply transforms
|
|
if(desc.position) obj.position.set(...desc.position)
|
|
if(desc.rotation) obj.rotation.set(...desc.rotation)
|
|
if(desc.scale) obj.scale.set(...desc.scale)
|
|
|
|
// Recursively add children
|
|
if(desc.children) {
|
|
desc.children.forEach(childDesc => {
|
|
obj.add(this.buildFromJSON(childDesc))
|
|
})
|
|
}
|
|
|
|
return obj
|
|
}
|
|
|
|
_resizeRendererToDisplaySize() {
|
|
const canvas = this.renderer.domElement
|
|
const width = canvas.clientWidth
|
|
const height = canvas.clientHeight
|
|
if (canvas.width !== width || canvas.height !== height) {
|
|
this.renderer.setSize(width, height, false)
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
render() {
|
|
if(this._resizeRendererToDisplaySize()) {
|
|
this.camera.aspect = this.renderer.domElement.clientWidth / this.renderer.domElement.clientHeight
|
|
this.camera.updateProjectionMatrix()
|
|
}
|
|
this.renderer.render(this.scene, this.camera)
|
|
requestAnimationFrame(this.render.bind(this))
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
// Make this module available to common JS
|
|
if(!app.LoadedModules) app.LoadedModules = {}
|
|
app.LoadedModules.Threetobus = Threetobus |