Svelte.js +Three.js + GLB orbital control issue

Discussion
1 
<script>
  import { onMount } from "svelte";
  import * as THREE from "three";
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

  let scene, camera, renderer, controls;

  onMount(() => {
    // Create Three.js scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x474d3c );
    // Create camera
    camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000,
    );
    camera.position.z= 2;

    // Create renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    // Create ambient light
    const ambientLight = new THREE.AmbientLight(0xffffff, 10);
    scene.add(ambientLight);

    // Create directional light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 10);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add orbit controls
    controls = new OrbitControls(camera, renderer.domElement);
    controls.addEventListener( 'change', ()=>{renderer.render(scene, camera)} );
    
    // controls.enableRotate = true; // Enable rotation
    // controls.rotateSpeed = 1.0; // Adjust rotation speed if necessary

    // controls.enableZoom = true; // Enable zooming
    // controls.enablePan = true; // Enable panning

    // controls.enableDamping = true; // Enable damping (inertia)
    // controls.dampingFactor = 0.25; // Adjust damping factor

    // controls.minPolarAngle = 0; // Allow looking straight up
    // controls.maxPolarAngle = Math.PI; // Allow looking straight down

    const loader = new GLTFLoader();
    loader.load(
      "src/assets/infinity_loop/untitled.glb",

      function (gltf) {
        const model = gltf.scene;

        const scale = 0.005;
        model.scale.set(scale, scale, scale);
        model.traverse((child) => {
          if (child.isMesh) {
            child.material.color.set(0x00ff00); // Set to green

            // Example 2: Apply a texture (uncomment if you want to use a texture)
            /*
            const textureLoader = new THREE.TextureLoader();
            const texture = textureLoader.load('path/to/your/texture.jpg');
            child.material.map = texture;
            child.material.needsUpdate = true;
            */
          }
        });

        scene.add(model);
      },

      function (xhr) {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },

      function (error) {
        console.log("An error happened");
      },
    );

    // Animation loop
    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);
    }
    animate();

    // Resize handling
    window.addEventListener("resize", () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  });
</script>

<main></main>

<style>
  main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
</style>

there is rotation or zoom in/out. Do help me out !!!

2

If you use Lume 3D HTML (powered by Three.js rendering) you can easily control it in your Svelte template, just like you can any other HTML elements.

Here’s a Lume sample with zoom in/out:

Basically the <lume-camera-rig> element contains the behavior for the rotation and zoom.

<lume-camera-rig distance="800"></lume-camera-rig>

Lume operates in CSS pixels by default (so distance="800" means the view starts the same as CSS perspective: 800px). This means that the box size (200 x 200 x 200) will be the same as a <div> with width: 200px; height: 200px on the screen by default. Makes it very easy to align 3D content with regular CSS content.

3

found out the problem
its css mistake
position : absolute is not accepted