threejsgltf.js

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
// Add lighting

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 1);
scene.add(directionalLight);

// Position the camera
camera.position.z = 5;

controls.update();
let model;
// Load a GLTF model
const loader = new GLTFLoader();

loader.load(
  './verysimple1.glb', // Replace this with the path to your model
  function (gltf) 
  {
        model = gltf.scene; 
        scene.add(model);
  }
);

// Animation loop
function animate() {
  requestAnimationFrame(animate);

  // Optional: Rotate the entire scene
  
  controls.update();


  model.rotation.x += 0.05;
  renderer.render(scene, camera);
}

animate();