To prevent encountering this issue, it is necessary to obtain the .js files from GitHub:
three.js, GLTFLoader.js, OrbitControls.js, three.module.js
<script src="scripts/three.js"></script>
<script type="module"> src="scripts/GLTFLoader.js"></script>
<script type="module"> src="scripts/OrbitControls.js"></script>// IF THERE IS A CAMERA CONTROL IN SPACE
Place them in the project's root directory and open GLTFLoader.js. As of 05/24/2021 there are 64 lines found.
from './smthPath/smthPath/smthPath/three.module.js';
and eliminate the excess. (i.e., specify the path to the three.module.js file). In my case:
from './three.module.js';
(If there is camera control, repeat the same process with the OrbitControls.js file on line 9)
from './three.module.js';
Moving forward, it is CRUCIAL in the script where everything comes together, to add type = "module", and import the files - resulting in
<script type="module">
import {GLTFLoader} from "./scripts/GLTFLoader.js";
import {OrbitControls} from './scripts/OrbitControls.js';
//...
</script>
CRITICAL
*For individuals new to 3D web development, but familiar with Cinema4D, 3Ds Max, ZBrush ... (like myself). You'll need not just a .gltf file but also a .bin file
How can these be obtained?
- Visit the site [Scetchfab] ().
- Upload the model (configure for free download (can delete later)).
- Wait for processing.
4.download the required format (glFT)
- Delete the model from Scetchfab *
IMPORTANT
*** The final appearance of the html file ***
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dragon</title>
</head>
<body id="c" style="margin: 0;">
<!--3D-->
<script src="scripts/three.js"></script>
<script type="module" src="scripts/GLTFLoader.js"></script>
<script type="module" src="scripts/OrbitControls.js"></script>
<script type="module">
import {GLTFLoader} from "./scripts/GLTFLoader.js";
import {OrbitControls} from './scripts/OrbitControls.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x555555);
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 5, 15);
const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
renderer.setClearColor(0x000000, 0);
renderer.setSize(1920 , 1080);
document.body.appendChild(renderer.domElement);
const aLight = new THREE.AmbientLight(0x404040, 15);
aLight.position.set(0,10,10)
scene.add(aLight);
const pLight = new THREE.PointLight(0xFFFFFF, 15);
pLight.position.set(0,5,0)
scene.add(pLight);
const phelper = new THREE.PointLightHelper(pLight);
scene.add(phelper);
const loader = new GLTFLoader();
let obj = null;
loader.load("3d/Dragon/scene.gltf", function(gltf) {
obj = gltf.scene;
scene.add(gltf.scene);
});
const canvas = document.getElementById("c");
const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 1, 0);
controls.update();
function animate(){
requestAnimationFrame(animate)
obj.rotation.y += 0.005;
renderer.render(scene, camera)
}
animate();
</script>
</body>
</html>