Despite trying numerous solutions to a common problem, I am still unable to import my 3D model in Three.js using the following code:
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<!-- <script src="js/3d.js"></script> -->
<script>
/**
* Base
*/
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
//Material
const material = new THREE.MeshToonMaterial({ color: '#ffeded'})
/**
* Object Meshes
*/
const mesh1 = new THREE.Mesh(
new THREE.TorusGeometry(1, 0.4, 16, 60),
material
)
const mesh2 = new THREE.Mesh(
new THREE.ConeGeometry(1, 2, 32),
material
)
const mesh3 = new THREE.Mesh(
new THREE.TorusKnotGeometry(0.8, 0.35, 100, 16),
material
)
scene.add(mesh1,mesh2, mesh3)
function loadGLTF() {
let gbLoader = new THREE.GLTFLoader();
gbLoader.load('GB.gltf', (gltf) => {
// gbMesh.scale.set(0.1, 0.1, 0.1);
scene.add(gltf.scene);
});
}
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
// Position
const objectsDistance = 4
mesh1.position.y = - objectsDistance * 0
mesh2.position.y = - objectsDistance * 1
mesh3.position.y = - objectsDistance * 2
const sectionMeshes = [ mesh1, mesh2, mesh3 ]
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(35, sizes.width / sizes.height, 0.1, 100)
camera.position.z = 100
scene.add(camera)
/**
* Lights
*/
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(1, 1, 0)
scene.add(directionalLight)
/**
* Scroll
*/
let scrollY = window.scrollY
window.addEventListener('scroll', () =>
{
scrollY = window.scrollY
})
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Animate camera
camera.position.y = - scrollY / sizes.height * objectsDistance
// Animate meshes
for(const mesh of sectionMeshes)
{
mesh.rotation.x = elapsedTime * 0.1
mesh.rotation.y = elapsedTime * 0.12
}
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
</script>
<script>
AOS.init({
once: true,
});
</script>
While everything else is functioning correctly, unfortunately, my 3D model does not appear on the screen as expected.
Here are the results of running the code in my browser
I have placed my .gltf file in the same directory as my javascript file and I am using a MAMP server to run the code. Any assistance would be greatly appreciated.
Could someone please provide a solution?