Seeking guidance on integrating animated 3D models onto a webpage using THREE.js. Currently, I have successfully loaded a static 3D model named 'aaa.gltf' with auto rotation and orbit control functionality. However, when trying to load another animated 3D model named "bbb.glb", it fails to display.
Below is the HTML file structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./style.css" />
<title>Document</title>
</head>
<body>
<div class="scene"></div>
<script src="./three.min.js"></script>
<script src="./GLTFLoader.js"></script>
<script src="./OrbitControls.js"></script>
<script src="./app.js"></script>
</body>
</html>
Attached below you'll find the JavaScript setup:
//JavaScript setup
let container;
let camera;
let renderer;
let scene;
let house;
let mixer;
function initialize() {
container = document.querySelector(".scene");
//Setting up the scene
scene = new THREE.Scene();
const fov = 35;
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1;
const far = 1000;
//Camera configuration
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 100);
const ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(ambient);
const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(50, 50, 100);
scene.add(light);
//Renderer settings
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
controls = new THREE.OrbitControls(camera, renderer.domElement);
container.appendChild(renderer.domElement);
const clock = new THREE.Clock();
//Loading the Model
let loader = new THREE.GLTFLoader();
loader.load("./house/bbb.glb", function(gltf) {
scene.add(gltf.scene);
house = gltf.scene.children[0];
mixer = new THREE.AnimationMixer(house);
mixer.clipAction(gltf.animations[0]).play();
animate();
});
}
function animateModel() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
mixer.update(delta);
house.rotation.z += 0.005;
renderer.render(scene, camera);
}
initialize();
function updateWindow() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
}
window.addEventListener("resize", updateWindow);
CSS styling has been applied as follows:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
overflow: hidden;
background: url("https://wallpaperaccess.com/full/1155041.jpg");
}
.scene,
canvas {
position: absolute;
width: 100%;
height: 100%;
}
The change made was updating the source of the 3D model from 'aaa.gltf' to 'bbb.glb' in line 46 of the JavaScript file:
Replaced this
loader.load("./house/aaa.gltf", function(gltf) {
with this
loader.load("./house/bbb.glb", function(gltf) {
Attachments for 'aaa.gltf' can be accessed here: https://drive.google.com/file/d/1RCO8iSvYwTZdcTC55EVzJ0rBLl6aZy9L/view?usp=sharing
For 'bbb.glb' check out the link provided: https://drive.google.com/file/d/1fzk7AZl2VHwTvZm0Gl0m-oyaIZUmHyeB/view?usp=sharing
If anyone has insights on resolving this issue, your assistance would be greatly appreciated! Thanks in advance!