CODEWITHSUNDEEP
javascriptthree.jsgltf
Jagr
Jagr

Reputation: 512

How to load gLTF in three.js

I am trying to upload a gLTF file using three.js but it is not working for me. I've been getting errors that I fixed doing a little research but still I have a black screen. One of the fixes was to add this to my chrome target directory

‘path to your chrome installation\chrome.exe --allow-file-access-from-files’

and that fixed my problem but when I open the console I still get this enter image description here

Can someone help me? I am just trying to display the 'DamagedHelmet.gltf' file on the screen with three.js

Sometimes the error comes back and this is what it looks like enter image description here The code:

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Three.js Crash Course</title>
        <style>
            body {
                margin: 0;
            }
            
            canvas {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/GLTFLoader.js"></script>
        <script>
            // To display anything we need three things: scene, camera, renderer.

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75/*POV*/, window.innerWidth / window.innerHeight/*aspect ratio so it takes on the size of the screen*/, 0.1, 1000);
            
            var renderer = new THREE.WebGLRenderer();//API for rendering/processing 2D and 3D to browsers
            renderer.setSize(window.innerWidth, innerHeight); // Size you want it to render which is size of screen/area
            document.body.appendChild(renderer.domElement); // Add the renderer to the HTML document/canvas
            
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            //-------create shape you need geometry, material/apperance and cube

            var loader = new THREE.GLTFLoader();
            
            loader.load(
                // Resource URL
                'models/gltf/duck/gLTF/duck.gltf',
                // Called when the resource is loaded
                 function ( gltf ) {

                     scene.add( gltf.scene );
                     camera.position.z = 5;
                     gltf.animations; // Array<THREE.AnimationClip>
                     gltf.scene; // THREE.Scene
                     gltf.scenes; // Array<THREE.Scene>
                     gltf.cameras; // Array<THREE.Camera>
                     gltf.asset; // Object 
                 },

                 // Called when loading is in progresses
                 function ( xhr ) {
                     console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

                 },

                 // Called when loading has errors
                 function ( error ) {
                     console.log( 'An error happened' );
                 }
             );
            
            var animate = function() {
                requestAnimationFrame(animate);
                // cube.rotation.x += 0.01;
                // cube.rotation.y += 0.01;
                renderer.render(scene, camera);
            }
           
            animate();
        </script>
    </body>
</html>

Upvotes: 1

Views: 4101

Answers (1)

2pha
2pha

Reputation: 10165

Taken directly from the three.js manual:
https://threejs.org/docs/#manual/introduction/How-to-run-things-locally

How to run things locally
If you use just procedural geometries and don't load any textures, webpages should work straight from the file system, just double-click on HTML file in a file manager and it should appear working in the browser (you'll see file:///yourFile.html in the address bar).

Content loaded from external files If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.

There are two ways to solve this:

  1. Change security for local files in a browser. This allows you to access your page as: file:///yourFile.html
  2. Run files from a local web server. This allows you to access your page as: http://localhost/yourFile.html

If you use option 1, be aware that you may open yourself to some vulnerabilities if using the same browser for a regular web surfing. You may want to create a separate browser profile / shortcut used just for local development to be safe. Let's go over each option in turn.

Upvotes: 5

Related Questions