Gltf image is loading but animate function is going to infinite loop - Angular9

Questions
,
1

Hi All,
I am new to threejs. I configured threejs and loaded one .gltf format image with 360 rotation using mouse in my angular9 sample project, but after running this page when i am going to another pages the animate (function running background) is going to loop and the browser is taking more cpu load and some other page functions are not working. Please guide what i am doing wrong here.
Here is the code from my ts file

import * as THREE from “three”;
import { GLTFLoader } from “…/myjs/js/GLTFLoader”;
import { takeUntil } from ‘rxjs/operators’;
import DragControls from “drag-controls”;
DragControls.install({ THREE: THREE });

declare var require: any;
declare const google: any;
sceneObjects = ;

ngAfterViewInit(): void {
setTimeout(()=>{
this.loadthreedrotation();
},1000)
}

loadthreedrotation() {
//Creates the scene and sets camera position
const OrbitControls = require(“three-orbit-controls”)(THREE);
var scene, camera, renderer;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(40, 500 / 300, 1, 5000);
camera.rotation.y = (45 / 180) * Math.PI;
camera.position.x = 800;
camera.position.y = 200;
camera.position.z = 1000;

//Disable (re-enable) user controls
var controls = new OrbitControls(camera);
controls.minDistance = 1100;
controls.maxDistance = 1500;
controls.addEventListener(“change”, render);
function render() {
renderer.render( scene, camera );
}
controls.minPolarAngle = Math.PI / 4;
controls.maxPolarAngle = Math.PI / 2;
controls.enablePan = true;
controls.enableZoom = true;
controls.enableDamping = true;
controls.rotateSpeed = 0.07;
controls.dampingFactor = 0.07;
controls.enabled = true;

//Set the lighting for the scene
var hemiLight = new THREE.HemisphereLight(0xe8f6fe, 0x080820, 4);
hemiLight.castShadow = true;
scene.add(hemiLight);
var light = new THREE.SpotLight(0xc4c4c4,1);
light.position.set(5,5,5);
light.castShadow = true;
scene.add( light );

//Render the scene and set the model box to show
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(0x000000, 0);
var car_div = document.getElementById(“car-container”);
var canvas_custom = document.getElementById(“canvas_custom”);
car_div.appendChild(canvas_custom);
renderer.setSize(760, 590);
canvas_custom.appendChild(renderer.domElement);

//Load the model
let loader = new GLTFLoader();

//Ford Explorer
loader.load(‘./…/myimage/gtfl/ford_scene.gltf’, function (gltf) {
scene.add(gltf.scene);
scene.scale.set(25.0, 25.0, 25.0);
scene.rotation.y = 3.1;
animate();
});

function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
console.log(“animateissue”);
}
//Push to scene
this.sceneObjects.push(scene, camera, renderer, loader, controls);
}

2

Have you tried to stop animating if you navigate to another page? This can be done by using cancelAnimationFrame(). Meaning you save the requestID when calling requestAnimationFrame() like so:

const requestID = requestAnimationFrame( animate );

and then us this ID when call cancelAnimationFrame():

cancelAnimationFrame( requestID );

If you don’t need the renderer anymore, you should also consider to call renderer.dispose().

1 Like
3

Hi @Mugen87,
seems like it not workked for me man, i tried in cancelAnimationFrame( requestID ) ngOnDestroy(). it not worked when i going other pages but now i am getting anothre error something like this when do mouse wheel scroll.

index.js:742 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See Chrome Platform Status