Three.js in WordPress Elementor

				
					<script type="module">
	import * as THREE from 'three';

	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';

	import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

	let camera, scene, renderer, mixer;

	let width = 600;
	const height = 400;

	const container = document.getElementById("container");

	width = container.parentNode.offsetWidth;

	init();
	render();

	function init() {
		camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
		camera.position.set(300, 100, 300);

		scene = new THREE.Scene();

		const hemiLight = new THREE.HemisphereLight(0xffffff, 0xcccccc, 5);
		hemiLight.position.set(0, 400, 0);
		scene.add(hemiLight);

		const dirLight = new THREE.DirectionalLight(0xffffff, 2.5);
		dirLight.position.set(0, 200, 200);
		dirLight.castShadow = true;
		dirLight.shadow.camera.top = 180;
		dirLight.shadow.camera.bottom = - 100;
		dirLight.shadow.camera.left = - 120;
		dirLight.shadow.camera.right = 120;
		scene.add(dirLight);

		const dirLight2 = new THREE.DirectionalLight(0xffffee, 1);
		dirLight2.position.set(400, 0, -100);
		dirLight2.castShadow = true;
		dirLight2.shadow.camera.top = 180;
		dirLight2.shadow.camera.bottom = -100;
		dirLight2.shadow.camera.left = - 120;
		dirLight2.shadow.camera.right = 120;
		scene.add(dirLight2);

		const dirLight3 = new THREE.DirectionalLight(0xffffff, .5);
		dirLight3.position.set(-400, 0, 0);
		dirLight3.castShadow = true;
		dirLight3.shadow.camera.top = 180;
		dirLight3.shadow.camera.bottom = -100;
		dirLight3.shadow.camera.left = - 120;
		dirLight3.shadow.camera.right = 120;
		scene.add(dirLight3);

		// ground
		const mesh = new THREE.Mesh(
			new THREE.PlaneGeometry(2000, 2000),
			new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
		);
		mesh.rotation.x = - Math.PI / 2;
		mesh.receiveShadow = true;
		scene.add(mesh);

		const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
		grid.material.opacity = 0.2;
		grid.material.transparent = true;
		scene.add(grid);

		scene.background = new THREE.Color().setHex(0xeeeeee);

		// model
		const loader = new FBXLoader();
		loader.load('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', function (object) {
			mixer = new THREE.AnimationMixer(object);

			if (object.animations.length) {
				const action = mixer.clipAction(object.animations[0]);
				action.play();
			}

			object.traverse(function (child) {
				if (child.isMesh) {
					child.castShadow = true;
					child.receiveShadow = true;
				}
			});

			scene.add(object);

			render();
		});

		renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(width, height);
		renderer.toneMapping = THREE.ACESFilmicToneMapping;
		renderer.toneMappingExposure = 1;
		renderer.shadowMap.enabled = true;
		container.appendChild(renderer.domElement);

		const controls = new OrbitControls(camera, renderer.domElement);
		controls.addEventListener('change', render); // use if there is no animation loop
		controls.minDistance = 100;
		controls.maxDistance = 500;
		controls.target.set(0, 0, - 0.2);
		controls.update();

		window.addEventListener('resize', onWindowResize);
	}

	function onWindowResize() {
		width = container.parentNode.offsetWidth;

		camera.aspect = width / height;
		camera.updateProjectionMatrix();

		renderer.setSize(width, height);

		render();
	}

	function render() {
		renderer.render(scene, camera);
	}
</script>
<div id="container"></div>