<h1 class='my-heading'>Just some HTML</h1><?php echo 'The year is ' . date('Y'); ?>

<!-- Canvas 3D -->
<div id="three-container" style="width: 100%; height: 500px; background: #f0f0f0; border-radius: 12px;"></div>

<!-- Load Three.js & GLTFLoader -->
<script type="module">
  import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
  import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
  import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';

  const container = document.getElementById('three-container');

  // === Scene Setup ===
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf0f0f0);

  const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
  camera.position.set(2, 2, 3);

  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(container.clientWidth, container.clientHeight);
  container.appendChild(renderer.domElement);

  // === Lights ===
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(5, 10, 7.5);
  scene.add(light);
  scene.add(new THREE.AmbientLight(0xffffff, 0.5));

  // === Controls ===
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.05;
  controls.enableZoom = true;

  // === Load Model ===
  const loader = new GLTFLoader();
  loader.load(
    'https://yourdomain.com/wp-content/uploads/2025/03/model.glb', // ubah ke URL model kamu
    function (gltf) {
      const model = gltf.scene;
      scene.add(model);
    },
    function (xhr) {
      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
      console.error('Error loading model:', error);
    }
  );

  // === Responsive Resize ===
  window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
  });

  // === Animation Loop ===
  function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  }
  animate();
</script>