How to load gLTF in three.js
Question
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
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 JS 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>
1 answers
solution1
4 ACCPTED 2018-05-17 02:11:26
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:
- Change security for local files in a browser. This allows you to access your page as:
file:///yourFile.html - 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.