| <!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> |
|
|
