//
document.addEventListener('DOMContentLoaded', function() {
const galleryElement = document.getElementById('gallery');
const modelUrls = ['https://arbzk-science-data.s3.us-east-1.amazonaws.com/clients/southernpointco/f24/men/button%20downs/HBP01%20-%20Hadley%20Brushed%20Performance/3d%20files/Oliver%20Plaid/HBP01_Hadley%20Brushed%20Performance_Oliver%20Plaid%20_F24.gltf?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEHcaCXVzLWVhc3QtMiJGMEQCIAyLH4iazrCyyYBu9b%2BJU3rz2%2Bf1bjZuSfVMeKzcx%2BCHAiBaMGcnFbOj%2BkAvZMtVa1yf%2BtOv%2FuShkCHxqYDXtb0yvCrkAggxEAEaDDI3NTU2NDE4NDA2NyIMcJLCVatWrDcyhLesKsECqQTJoQj8F28D9iQ3SO7%2BDtYg0etsWRloA7PgmfiX4X3muQ9VztevWDjkMkNZN3svVv06eKmNSJ%2B2xYM6Ydt6ymogLK%2BBjXMXZdQjYVjJ441FR2tzuCU1Cn7xgSPT0N27JPngqHwqvh1l6NnB%2BVetyPzGB6wXbDMDU%2FPyZes7XSm980y63Abxk2tHSZmSDgfLJCTigLa4Gbn%2BIJ%2BzSF30EBmNrJnuIfKw8cu6rhu6p%2FHtmXZdEKnenuBTruLUfOUBV1dsUaTE4Spwl4PdQZXlIrsMH%2BdYZEhGbvAEBON9bWXugxxOfTmJIRNFMTcYZWr7tlSjfBn08YTwE%2FlOsbYWsOikI9VoEjoPWyrryLaNAYaEwojmLmAKaUUSye7W2ALCAKoqKKMcFP4oiULjBKFXhhDNAOzniPMB%2FjLfhfmPGHIZMLDxtK0GOrQCuyuD6HVd4rjyem299NlI8oqz3IIPLXar8oF60V3JGk9REggAxWam5Z0ua80Z%2FFIjnJXXKzeTW%2BuzJJhnhZsgv%2Bxn1mXGgXn%2FySGKN9ysNikSFevjOgfaxlfU4OjHSh9ZD%2FRVfZey74rw0EpmSy%2Bo7KUmOilMcoAtzdRda05uH7Da29dIieIIdtRgOrlruZGp7B3FtjEyNMM%2ByENWwzYEzx%2Fth84OBHCJKkGXzKBxNHdEI4cTMDZMVL4y7xU0ZzS6YQ0RX6mes2M3mSAFVe0fLlfkQbwAbbwbI9UmUs7HLOcNSsW%2BCdqEbNA9ogzwF4SxXsD9RlO4PZIYJlMzELRu0zBW6hEu9q7K%2FeasIPMzA7xZs5hSwjBzFLpBdFOLByoMiAj9dn1S%2BXHWsv4yWscvLbblLO0%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240121T153138Z&X-Amz-SignedHeaders=host&X-Amz-Expires=43200&X-Amz-Credential=ASIAUAKHHYIBYFKP5LXE%2F20240121%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=e780ccbfb39c60209074d91266e7e05e08da03d9aa04c11e11a7e19d51f5acd5',
'https://arbzk-science-data.s3.us-east-1.amazonaws.com/clients/southernpointco/f24/men/button%20downs/HL04%20-%20Hadley%20Luxe/3d%20files/stratton%20plaid/HL04_hadley%20luxe_stratton%20plaid_F24.gltf?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEHcaCXVzLWVhc3QtMiJGMEQCIAyLH4iazrCyyYBu9b%2BJU3rz2%2Bf1bjZuSfVMeKzcx%2BCHAiBaMGcnFbOj%2BkAvZMtVa1yf%2BtOv%2FuShkCHxqYDXtb0yvCrkAggxEAEaDDI3NTU2NDE4NDA2NyIMcJLCVatWrDcyhLesKsECqQTJoQj8F28D9iQ3SO7%2BDtYg0etsWRloA7PgmfiX4X3muQ9VztevWDjkMkNZN3svVv06eKmNSJ%2B2xYM6Ydt6ymogLK%2BBjXMXZdQjYVjJ441FR2tzuCU1Cn7xgSPT0N27JPngqHwqvh1l6NnB%2BVetyPzGB6wXbDMDU%2FPyZes7XSm980y63Abxk2tHSZmSDgfLJCTigLa4Gbn%2BIJ%2BzSF30EBmNrJnuIfKw8cu6rhu6p%2FHtmXZdEKnenuBTruLUfOUBV1dsUaTE4Spwl4PdQZXlIrsMH%2BdYZEhGbvAEBON9bWXugxxOfTmJIRNFMTcYZWr7tlSjfBn08YTwE%2FlOsbYWsOikI9VoEjoPWyrryLaNAYaEwojmLmAKaUUSye7W2ALCAKoqKKMcFP4oiULjBKFXhhDNAOzniPMB%2FjLfhfmPGHIZMLDxtK0GOrQCuyuD6HVd4rjyem299NlI8oqz3IIPLXar8oF60V3JGk9REggAxWam5Z0ua80Z%2FFIjnJXXKzeTW%2BuzJJhnhZsgv%2Bxn1mXGgXn%2FySGKN9ysNikSFevjOgfaxlfU4OjHSh9ZD%2FRVfZey74rw0EpmSy%2Bo7KUmOilMcoAtzdRda05uH7Da29dIieIIdtRgOrlruZGp7B3FtjEyNMM%2ByENWwzYEzx%2Fth84OBHCJKkGXzKBxNHdEI4cTMDZMVL4y7xU0ZzS6YQ0RX6mes2M3mSAFVe0fLlfkQbwAbbwbI9UmUs7HLOcNSsW%2BCdqEbNA9ogzwF4SxXsD9RlO4PZIYJlMzELRu0zBW6hEu9q7K%2FeasIPMzA7xZs5hSwjBzFLpBdFOLByoMiAj9dn1S%2BXHWsv4yWscvLbblLO0%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20240121T153220Z&X-Amz-SignedHeaders=host&X-Amz-Expires=43200&X-Amz-Credential=ASIAUAKHHYIBYFKP5LXE%2F20240121%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=f81df508829d942f04cadd10148ccfb466e94b082b0ede0f7b106336ddabe7cc']; // Replace with your model URLs
modelUrls.forEach(url => {
const canvas = document.createElement('canvas');
galleryElement.appendChild(canvas);
const app = new pc.Application(canvas, {
mouse: new pc.Mouse(canvas),
touch: new pc.TouchDevice(canvas)
});
app.start();
// Set up camera
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.1, 0.1),
farClip: 1000,
nearClip: 0.1
});
camera.setPosition(0, 0, 3);
app.root.addChild(camera);
// Set up lighting
const light = new pc.Entity('light');
light.addComponent('light', {
type: "directional",
color: new pc.Color(1, 1, 1)
});
light.setLocalEulerAngles(45, 0, 0);
app.root.addChild(light);
// Load and add the GLTF model to the scene
app.assets.loadFromUrl(url, "container", function (err, asset) {
if (err) {
console.error(err);
return;
}
const modelEntity = new pc.Entity('model');
modelEntity.addComponent('model', {
asset: asset.resource.model
});
app.root.addChild(modelEntity);
});
});
});
//
This code kinda works . When i test loading here it works fine: PlayCanvas glTF Viewer
Please help me fix this code so its like the player example