|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>GLB Model Viewer</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/RGBELoader.js"></script> |
|
|
<style> |
|
|
body { margin: 0; } |
|
|
canvas { display: block; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<script> |
|
|
let scene, camera, renderer, controls; |
|
|
|
|
|
function init() { |
|
|
scene = new THREE.Scene(); |
|
|
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
camera.position.set(0, 2, 5); |
|
|
|
|
|
renderer = new THREE.WebGLRenderer({ antialias: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping; |
|
|
renderer.toneMappingExposure = 1; |
|
|
document.body.appendChild(renderer.domElement); |
|
|
|
|
|
controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
|
controls.enableDamping = true; |
|
|
controls.dampingFactor = 0.05; |
|
|
controls.screenSpacePanning = false; |
|
|
controls.minDistance = 1; |
|
|
controls.maxDistance = 10; |
|
|
|
|
|
|
|
|
const rgbeLoader = new THREE.RGBELoader(); |
|
|
rgbeLoader.load('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr', function (texture) { |
|
|
texture.mapping = THREE.EquirectangularReflectionMapping; |
|
|
scene.environment = texture; |
|
|
scene.background = texture; |
|
|
}); |
|
|
|
|
|
|
|
|
const light = new THREE.DirectionalLight(0xffffff, 10); |
|
|
light.position.set(5, 10, 5); |
|
|
scene.add(light); |
|
|
|
|
|
const ambientLight = new THREE.AmbientLight(0x404040, 10); |
|
|
scene.add(ambientLight); |
|
|
|
|
|
const loader = new THREE.GLTFLoader(); |
|
|
loader.load('attack_drone_scifi.glb', function (gltf) { |
|
|
let model = gltf.scene; |
|
|
model.scale.set(2, 2, 2); |
|
|
model.position.y = 0; |
|
|
scene.add(model); |
|
|
}, undefined, function (error) { |
|
|
console.error('An error happened', error); |
|
|
}); |
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
} |
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
controls.update(); |
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
init(); |
|
|
animate(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
