113 lines
2.1 KiB
JavaScript
113 lines
2.1 KiB
JavaScript
import * as THREE from 'three';
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
import { Timer } from 'three/examples/jsm/misc/Timer.js';
|
|
|
|
/**
|
|
* Base
|
|
*/
|
|
// Canvas
|
|
const canvas = document.querySelector('canvas.webgl');
|
|
|
|
// Scene
|
|
const scene = new THREE.Scene();
|
|
|
|
/**
|
|
* Object
|
|
*/
|
|
const geometry = new THREE.BoxGeometry(1, 1, 1);
|
|
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
|
|
const mesh = new THREE.Mesh(geometry, material);
|
|
scene.add(mesh);
|
|
|
|
/**
|
|
* Sizes
|
|
*/
|
|
const sizes = {
|
|
width: window.innerWidth,
|
|
height: window.innerHeight
|
|
};
|
|
|
|
window.addEventListener('resize', () =>
|
|
{
|
|
// Update sizes
|
|
sizes.width = window.innerWidth;
|
|
sizes.height = window.innerHeight;
|
|
|
|
// Update Camera
|
|
camera.aspect = sizes.width / sizes.height;
|
|
camera.updateProjectionMatrix();
|
|
|
|
// Update Renderer
|
|
renderer.setSize(sizes.width, sizes.height);
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
|
});
|
|
|
|
window.addEventListener('dblclick', () =>
|
|
{
|
|
const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
|
|
if (!fullscreenElement)
|
|
{
|
|
if (canvas.requestFullscreen)
|
|
{
|
|
canvas.requestFullscreen();
|
|
}
|
|
else if (canvas.webkitRequestFullscreen)
|
|
{
|
|
canvas.webkitRequestFullscreen();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if (document.exitFullscreen)
|
|
{
|
|
document.exitFullscreen();
|
|
}
|
|
else if (document.webkitExitFullscreen)
|
|
{
|
|
document.webkitExitFullscreen();
|
|
}
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Camera
|
|
*/
|
|
// Base camera
|
|
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
|
|
camera.position.z = 3;
|
|
scene.add(camera);
|
|
|
|
// Controls
|
|
const controls = new OrbitControls(camera, canvas);
|
|
controls.enableDamping = true;
|
|
|
|
/**
|
|
* Renderer
|
|
*/
|
|
const renderer = new THREE.WebGLRenderer({
|
|
canvas: canvas
|
|
});
|
|
renderer.setSize(sizes.width, sizes.height);
|
|
|
|
/**
|
|
* Animate
|
|
*/
|
|
const timer = new Timer();
|
|
timer.connect(document); // pause otomatis saat tab tidak aktif
|
|
|
|
const tick = () =>
|
|
{
|
|
timer.update();
|
|
const elapsedTime = timer.getElapsed();
|
|
|
|
// Update controls
|
|
controls.update();
|
|
|
|
// Render
|
|
renderer.render(scene, camera);
|
|
|
|
// Call tick again on the next frame
|
|
window.requestAnimationFrame(tick);
|
|
};
|
|
|
|
tick(); |