I’m trying to load a 3D model that is in GLTF format however it doesn’t display. I tried opening the Chrome console and I get this error.
Access to XMLHttpRequest at “my file system” from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
The following guide might help: https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally
It’s recommended to use a local web server in order to avoid this security error.
I ran a local server but I still get a black screen.
Any light source in your scene?
index.html (1.0 KB)
Cute 
What do we have to do with this page?
Any chance to provide a live working example or, at least, the link to the file of Horse.glb?
Sometimes, adding renderer.setClearColor(0x808080); allows to see a totally black model on the gray background
I finally get some sort of the part of the horse but it doesn’t show completely.
GLTFLoader.js (85.1 KB)
Horse.glb (177.5 KB)
index.html (1.2 KB)
three.js (1.1 MB)
By the way, your camera is in the center of the scene, thus it might be the reason why you see nothing, as the camera is inside of the model.
Can you give me a template to fill out that allows me to drag and rotate the model?
Add
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
and then create an instance of the controls:
var controls = new THREE.OrbitControls(camera, renderer.domElement):
You just didn’t add a light source to your scene. I’ve added THREE.HemisphereLight() and now the model is visible. Actually, as I said before, it was in the scene already, but it has the same color as the background, so I’ve set the color of background to 0x808080 and saw the black silhouette of the model
Ah, and I’ve put the camera away from the center camera.position.set(0, 0, 500);
Thank you very much. I didn’t know that you could load the files from the Three.js.org page directly. Do you know exactly where to find the files on Three.js.org?
For example. the model of the horse is here: https://threejs.org/examples/models/gltf/Horse.glb
Just take a look at the source code: https://github.com/mrdoob/three.js to know what is where.
Ok thank you very much for your help.
Also can you explain the parameters that you put in for HemisphereLight?
You can find all the information about three.js objects in the documentation.
About the HemisphereLight and its parameters is here: https://threejs.org/docs/#api/en/lights/HemisphereLight