model.js

window.models = {
	initModel: function (
		modelName,
		positionX,
		positionY,
		positionZ,
		rotationX,
		rotationY,
		rotationZ,
		rotationAnimationX,
		rotationAnimationY,
		rotationAnimationZ,
		cameraFov,
		cameraPositionX,
		cameraPositionY,
		cameraPositionZ,
		cameraRotationX,
		cameraRotationY,
		cameraRotationZ,
		cameraRotationAnimationX,
		cameraRotationAnimationY,
		cameraRotationAnimationZ,
		ambientLightIntensity,
		spotLightIntensity,
		spotLightPositionX,
		spotLightPositionY,
		spotLightPositionZ,
		touchControl,
		mouseStop,
	) {
		var renderer,
			scene,
			camera,
			animate = true,
			myCanvas = document.getElementById('myCanvas'),
			modelContainer = document.getElementById('modelContainer');
		//RENDERER
		renderer = new THREE.WebGLRenderer({
			canvas: myCanvas,
			antialias: true,
			alpha: true
		});
		// renderer.setClearColor(0x000000);
		renderer.autoClearColor = false;
		renderer.setClearColor( 0x000000, 0 );
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(modelContainer.offsetWidth, modelContainer.offsetHeight);
		//CAMERA
		camera = new THREE.PerspectiveCamera(cameraFov, modelContainer.offsetWidth / modelContainer.offsetHeight, 0.1, 1000 );
		camera.position.x = cameraPositionX;
		camera.position.y = cameraPositionY;
		camera.position.z = cameraPositionZ;
		camera.rotation.x = cameraRotationX;
		camera.rotation.y = cameraRotationY;
		camera.rotation.z = cameraRotationZ;
		function resize(){
			renderer.setSize(modelContainer.offsetWidth, modelContainer.offsetHeight);
			camera.aspect = modelContainer.offsetWidth/modelContainer.offsetHeight;
			camera.updateProjectionMatrix()
		};
		window.onresize = resize;
		if (mouseStop) {
			myCanvas.addEventListener('mouseenter', function () {
				animate = false;
			})
			myCanvas.addEventListener('touchstart', function () {
				animate = false;
			})
			myCanvas.addEventListener('mouseout', function () {
				animate = true;
			})
			myCanvas.addEventListener('touchend', function () {
				animate = true;
			})
		}
		//SCENE
		scene = new THREE.Scene();
		//LIGHTS
		var light = new THREE.AmbientLight(0xffffff, ambientLightIntensity);
		scene.add(light);
		var light2 = new THREE.SpotLight(0xffffff, spotLightIntensity);
		light2.position.set( spotLightPositionX, spotLightPositionY, spotLightPositionZ );
		scene.add(light2);
		var loader = new GLTFLoader();
		loader.load('/assets/model/' + modelName, handle_load);
		var mesh;
		function handle_load(gltf) {
			mesh = gltf.scene;
			scene.add( mesh );
			mesh.position.x = positionX;
			mesh.position.y = positionY;
			mesh.position.z = positionZ;
			mesh.rotation.x = rotationX;
			mesh.rotation.y = rotationY;
			mesh.rotation.z = rotationZ;
		}
		//RENDER LOOP
		render();
		var delta = 0;
		var prevTime = Date.now();
		if (touchControl) {
			var controls = new OrbitControls( camera, renderer.domElement );
			controls.enablePan = false;
			controls.maxDistance = camera.position.distanceTo( controls.target );
			controls.update();
		}
		function render() {
			delta += 0.1;
			if (mesh) {
				if (animate) {
					mesh.rotation.x += rotationAnimationX;
					mesh.rotation.y += rotationAnimationY;
					mesh.rotation.z += rotationAnimationZ;
					camera.rotation.x += cameraRotationAnimationX;
					camera.rotation.y += cameraRotationAnimationY;
					camera.rotation.z += cameraRotationAnimationZ;
				}
				//animation mesh
				//mesh.morphTargetInfluences[ 0 ] = Math.sin(delta) * 20.0;
			}
			renderer.render(scene, camera);
			requestAnimationFrame(render);
		}
	}
}