I’m trying to improve the performance of a website because Google PageSpeed Insights is complaining. If I leave out the three js part I get a performance of 100% with the three js part only 59%, and I don’t know how to improve it or what possibilities there are to improve the performance
import * as THREE from "../lib/three.module.js";
import { GLTFLoader } from "../lib/GLTFLoader.js";
import { OrbitControls } from "../lib/OrbitControls.js";
const canvas = document.querySelector(".webgl"),
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: !0,
alpha: !0,
});
renderer.setPixelRatio(window.devicePixelRatio),
(renderer.shadowMap.enabled = !0),
(renderer.shadowMap.type = THREE.PCFSoftShadowMap);
const scene = new THREE.Scene();
scene.background = null;
const camera = new THREE.PerspectiveCamera(45, getAspectRatio(), 1, 1e3);
camera.position.set(2, 2.5, 5.5);
const controls = new OrbitControls(camera, renderer.domElement);
(controls.enableDamping = !0),
(controls.enablePan = !1),
(controls.minDistance = 6),
(controls.maxDistance = 15),
(controls.minPolarAngle = 0.5),
(controls.maxPolarAngle = 1.5),
(controls.autoRotate = !0),
(controls.autoRotateSpeed = 1),
(controls.target = new THREE.Vector3(0, 1, 0)),
controls.update();
const ambientLight = new THREE.AmbientLight(16777215, 0.4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(16777215, 0.8);
directionalLight.position.set(5, 10, 7.5),
(directionalLight.castShadow = !0),
(directionalLight.shadow.bias = -1e-4),
(directionalLight.shadow.mapSize.width = 2048),
(directionalLight.shadow.mapSize.height = 2048),
scene.add(directionalLight);
const spotLight = new THREE.SpotLight(16777215, 1);
let mesh;
spotLight.position.set(-5, 10, -5),
(spotLight.castShadow = !0),
(spotLight.shadow.bias = -1e-4),
(spotLight.shadow.mapSize.width = 2048),
(spotLight.shadow.mapSize.height = 2048),
scene.add(spotLight);
const loader = new GLTFLoader().setPath("llLogoThreeJs/");
function setRendererSize() {
window.innerWidth > 700 &&
renderer.setSize(window.innerWidth / 4, window.innerHeight / 2);
}
function getAspectRatio() {
return window.innerWidth > 700
? window.innerWidth / 4 / (window.innerHeight / 2)
: 1;
}
loader.load("scene.gltf", (e) => {
(mesh = e.scene),
mesh.traverse((e) => {
e.isMesh && ((e.castShadow = !0), (e.receiveShadow = !0));
}),
mesh.position.set(0, 1.05, -1),
scene.add(mesh);
}),
window.addEventListener("resize", () => {
window.innerWidth > 700
? ((camera.aspect = getAspectRatio()),
camera.updateProjectionMatrix(),
setRendererSize(),
animationRunning || animate())
: (renderer.setSize(0, 0), (animationRunning = !1));
});
let animationRunning = !1;
function animate() {
window.innerWidth > 700
? ((animationRunning = !0),
requestAnimationFrame(animate),
controls.update(),
renderer.render(scene, camera))
: (animationRunning = !1);
}
window.innerWidth > 700 && (setRendererSize(), animate());
