ShaneBrumback · May 30, 2025 08:54
diff --git a/threejs-examples-animating-3d-gltf-models.html b/threejs-examples-animating-3d-gltf-models.html
 <!--////////////////////////////////////////////////////////////////////////////////////////
 ///                                                                                      ///
 ///  Example Using Three.js Library, HTML, CSS & JavaScript                              ///
 //   3D Interactive Web Apps & Games 2021-2024                                           ///
 ///  Contact Shane Brumback https://www.shanebrumback.com                                ///
 ///  Send a message if you have questions about this code                                ///
 ///  I am a freelance developer. I develop any and all web.                              ///
 ///  Apps Websites 3D 2D CMS Systems etc. Contact me anytime :)                          ///
 ///                                                                                      ///
 ////////////////////////////////////////////////////////////////////////////////////////////-->


 <!DOCTYPE html>
 <html>
 <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Examples - Animating 3D GLTF Models | www.shanebrumback.com</title>

 </head>
 <body>

    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/controls/OrbitControls.js"></script>

    <script type="module">

        // Set up Three js scene
        const scene = new THREE.Scene();
        {
            const near = 5;
            const far = 10;
            const color = 'black';
            const density = 0.03;
            scene.fog = new THREE.FogExp2(color, density);
            scene.background = new THREE.Color(color);
        }

        // Set up the camera
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
        camera.position.z = 5;

        // Set up the renderer and configure settings
        let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.setClearColor(0x000000);
        renderer.domElement.style.position = 'fixed';
        renderer.domElement.style.zIndex = '-1';
        renderer.domElement.style.left = '0';
        renderer.domElement.style.top = '0';
        document.body.appendChild(renderer.domElement);

        // Add camera controls
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
        controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

        // Create the spotlight with shadows
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(10, 20, 30);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // Add ambient light
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);

        // Create the plane's geometry
        const planeGeometry = new THREE.PlaneGeometry(100, 100);
        // Create a material to apply to the plane
        const planeMaterial = new THREE.MeshBasicMaterial({
            color: 'blue',
            side: THREE.DoubleSide,
            depthWrite: false
        });

        // Create the plane
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = Math.PI / 2;
        plane.position.y = -3;
        plane.receiveShadow = true;
        plane.castShadow = true
        scene.add(plane);

        //Add a grid helper
        var grid = new THREE.GridHelper(100, 30);
        grid.renderOrder = 0;
        grid.position.y = -3;
        scene.add(grid);

        const loader = new THREE.GLTFLoader();
        loader.load('/models/gltf/spinner/scene.gltf', (gltf) => {

            const model = gltf.scene;
            scene.add(model);
            camera.lookAt(scene.position)

            const mixer = new THREE.AnimationMixer(model);
            const action = mixer.clipAction(gltf.animations[0]);
            action.play();

            function animate() {
                requestAnimationFrame(animate);
                mixer.update(0.01);
                controls.update();
                renderer.render(scene, camera);
            }

            animate();

        });


        // Resize renderer when window size changes
        window.addEventListener('resize', function () {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });


    </script>
 </body>
 </html>
	<!--////////////////////////////////////////////////////////////////////////////////////////
	/// ///
	/// Example Using Three.js Library, HTML, CSS & JavaScript ///
	// 3D Interactive Web Apps & Games 2021-2024 ///
	/// Contact Shane Brumback https://www.shanebrumback.com ///
	/// Send a message if you have questions about this code ///
	/// I am a freelance developer. I develop any and all web. ///
	/// Apps Websites 3D 2D CMS Systems etc. Contact me anytime :) ///
	/// ///
	////////////////////////////////////////////////////////////////////////////////////////////-->


	<!DOCTYPE html>
	<html>
	<head>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Three.js Examples - Animating 3D GLTF Models \| www.shanebrumback.com</title>

	</head>
	<body>

	<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/build/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/loaders/GLTFLoader.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/js/controls/OrbitControls.js"></script>

	<script type="module">

	// Set up Three js scene
	const scene = new THREE.Scene();
	{
	const near = 5;
	const far = 10;
	const color = 'black';
	const density = 0.03;
	scene.fog = new THREE.FogExp2(color, density);
	scene.background = new THREE.Color(color);
	}

	// Set up the camera
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
	camera.position.z = 5;

	// Set up the renderer and configure settings
	let renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.setClearColor(0x000000);
	renderer.domElement.style.position = 'fixed';
	renderer.domElement.style.zIndex = '-1';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	// Add camera controls
	const controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.dampingFactor = 0.1; // Reduce camera damping for smoother movement
	controls.autoRotate = true; // Make the camera rotate sinuously around the spheres

	// Create the spotlight with shadows
	const spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(10, 20, 30);
	spotLight.castShadow = true;
	scene.add(spotLight);

	// Add ambient light
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(ambientLight);

	// Create the plane's geometry
	const planeGeometry = new THREE.PlaneGeometry(100, 100);
	// Create a material to apply to the plane
	const planeMaterial = new THREE.MeshBasicMaterial({
	color: 'blue',
	side: THREE.DoubleSide,
	depthWrite: false
	});

	// Create the plane
	const plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.rotation.x = Math.PI / 2;
	plane.position.y = -3;
	plane.receiveShadow = true;
	plane.castShadow = true
	scene.add(plane);

	//Add a grid helper
	var grid = new THREE.GridHelper(100, 30);
	grid.renderOrder = 0;
	grid.position.y = -3;
	scene.add(grid);

	const loader = new THREE.GLTFLoader();
	loader.load('/models/gltf/spinner/scene.gltf', (gltf) => {

	const model = gltf.scene;
	scene.add(model);
	camera.lookAt(scene.position)

	const mixer = new THREE.AnimationMixer(model);
	const action = mixer.clipAction(gltf.animations[0]);
	action.play();

	function animate() {
	requestAnimationFrame(animate);
	mixer.update(0.01);
	controls.update();
	renderer.render(scene, camera);
	}

	animate();

	});


	// Resize renderer when window size changes
	window.addEventListener('resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	});


	</script>
	</body>
	</html>
No results found