<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‑8" />
<meta name="viewport" content="width=device-width, initial‑scale=1.0" />
<title>3D ONLINE GAME 2</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/"
}
}
</script>
</head>
<body>
<script type="module">
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
let scene, camera, renderer, pivot;
function init() {
// Scene
scene = new THREE.Scene();
// Load background texture and set as scene background
const bgTexture = new THREE.TextureLoader().load('assets/img/windows.jpg');
scene.background = bgTexture; // image as background :contentReference[oaicite:1]{index=1}
// Camera
camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// Renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Lights
const ambient = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambient);
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);
// Create pivot for correct rotation axis
pivot = new THREE.Group();
scene.add(pivot);
// Load GLB model
const loader = new GLTFLoader();
loader.load(
'assets/glb/sativa3.glb',
(gltf) => {
const model = gltf.scene;
// Compute bounding box
const box = new THREE.Box3().setFromObject(model);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());
// Recenter model: base at Y=0
const baseY = box.min.y;
model.position.y -= baseY;
// Center horizontally
model.position.x -= center.x;
model.position.z -= center.z;
// Flip horizontally if needed
model.scale.x *= -1;
// Add model to pivot
pivot.add(model);
// Position camera straight on
const maxDim = Math.max(size.x, size.y, size.z);
const fov = camera.fov * (Math.PI / 180);
const distance = Math.abs(maxDim / 2 / Math.tan(fov / 2));
camera.position.set(0, size.y / 2, distance * 1.2);
camera.lookAt(0, size.y / 2, 0);
},
undefined,
(error) => {
console.error('GLB load error:', error);
}
);
window.addEventListener("resize", onWindowResize);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
if (pivot) pivot.rotation.y += 0.01;
renderer.render(scene, camera);
}
init();
animate();
</script>
</body>
</html>
