STEINNI
87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
import * as THREE from './three.module.js';
|
|
import { OrbitControls } from './OrbitControls.module.js';
|
|
|
|
export class Threetobus{
|
|
|
|
constructor(canvasEl){
|
|
this.canvasEl = canvasEl
|
|
}
|
|
|
|
init(){
|
|
// Scene
|
|
this.scene = new THREE.Scene()
|
|
//scene.background = new THREE.Color(0x202080)
|
|
|
|
// Camera
|
|
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
|
|
this.camera.position.set(3, 3, 5)
|
|
|
|
// Renderer
|
|
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
|
|
|
|
//renderer.setSize(window.innerWidth, window.innerHeight)
|
|
|
|
// Cube
|
|
const geometry = new THREE.BoxGeometry()
|
|
const material = new THREE.MeshStandardMaterial({ color: 'red' })
|
|
this.cube = new THREE.Mesh(geometry, material)
|
|
this.scene.add(this.cube)
|
|
this.cube.position.x+=2
|
|
|
|
|
|
// Light
|
|
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))
|
|
|
|
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.animate()
|
|
|
|
this._render()
|
|
|
|
}
|
|
|
|
_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))
|
|
}
|
|
|
|
|
|
animate() {
|
|
requestAnimationFrame(this.animate.bind(this))
|
|
this.cube.rotation.x += 0.01
|
|
this.cube.rotation.y += 0.01
|
|
this.controls.update()
|
|
this.renderer.render(this.scene, this.camera)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
// Make this module available to common JS
|
|
if(!app.LoadedModules) app.LoadedModules = {}
|
|
app.LoadedModules.Threetobus = Threetobus |