threejs import model from blender

in blender export as gltf

check export only visible object

copy exported donut.glb to threejs directory

//threejs/main.js

import './style.css'

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// Setup

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({

  canvas: document.querySelector('#bg'),

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

camera.position.setZ(30);

renderer.render(scene, camera);

const pointLight = new THREE.PointLight(0xffffff);

pointLight.position.set(20, 20, 20);

const ambientLight = new THREE.AmbientLight(0xffffff);

scene.add(pointLight, ambientLight);

const lightHelper = new THREE.PointLightHelper(pointLight);

scene.add(lightHelper);

const controls = new OrbitControls(camera, renderer.domElement);

function addStar() {

  const geometry = new THREE.SphereGeometry(0.25, 24, 24);

  const material = new THREE.MeshStandardMaterial({ color: 0xffffff });

  const star = new THREE.Mesh(geometry, material);

  const [x, y, z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(100))

  star.position.set(x, y, z);

  scene.add(star);

}

Array(200).fill().forEach(addStar);

const spaceTexture = new THREE.TextureLoader().load('space.jpg');

scene.background = spaceTexture;

// Instantiate a loader

const blenderLoader = new GLTFLoader();

var donut;

blenderLoader.load('donut.glb', function (gltf) {

  donut = gltf.scene;

  scene.add(donut)

}, undefined, function (error) {

  console.error(error);

});

function moveCamera() {

  const t = document.body.getBoundingClientRect().top;

  donut.rotation.x += 0.05;

  donut.rotation.y += 0.075;

  donut.rotation.z += 0.05;

  const scale = 100

  donut.scale.x = scale

  donut.scale.y = scale

  donut.scale.z = scale

  camera.position.x = t * -0.002;

  camera.rotation.y = t * -0.002;

  camera.position.z = 30 - t * 0.01;

}

document.body.onscroll = moveCamera

function animate() {

  requestAnimationFrame(animate);

  controls.update();

  renderer.render(scene, camera);

}

animate()

reference:

https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

https://chuanshuoge3.blogspot.com/2022/02/threejs-scroll-event.html