When you are new to three.js, you should read some tutorials or guides in order to get familiar with the library. The following documents might be very helpful since youe code snippet misses some essential parts of a 3D scene (e.g. an animation loop and lights)
There’s a gltf previewer here - https://gltf-viewer.donmccurdy.com/ which you can check to see if your model works (which it does, I checked). But as @Mugen87 says, you need to work on the set-up of your scene first to understand why your code isn’t working (render loop, lighting etc).
<!DOCTYPE html><html lang="en-US"><head><title>GLTF Loader</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {margin:0}
style {display:block}
</style></head><body><script src="three.js"></script><script src="GLTFLoader.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,500);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.GLTFLoader();
loader.load("Flower.glb",function(gltf){
console.log('model loaded');
scene.add(gltf.scene);
},undefined,function(err){
console.log(err);
});
camera.position.set(0,0,0);
camera.lookAt(0,0,0);
var animate = function(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
};
animate();
</script></body></html>
I am unable to load the model. Now I have several questions:
For the second file there are several library dependencies (three.module.js)
I don’t want to include the entire github repo with my code.
2. Which file(s) should I use for the above code?
I have visited the following link: WebGL_Loader_GLTF
It works fine. But when I try to open the file from the entirely cloned github repo it fails.
[GLTF_Loader (local)](file:///root/Desktop/three.js-dev/examples/webgl_loader_gltf.html)
NOTE: I don’t want to set up a server right now.
I have visited the following link: How To Run Things Locally
How to solve this problem?
Steps to reproduce the problem: 1. Save the above the HTML code in a file.
2. Download three.js 3. Download GLTFLoader.js
4. Download Flower.js
5. Put them in a same directory
6. Open the HTML file in browser
This could be related to a security issue since you have to host your app on a local web server. It does not work if you open your index.html directly from file. The respective guide should describe the necessary steps.
I had tried the previous link. However I managed to set up a server and the github code snippet is working properly. But I didn’t manage to successfully run my html code in order to display the model. Is there anything wrong?
Well it might be problematic to position the camera at the origin since the model could be at the exact same spot. Try to position the camera at ( 100, 100, 100 ) and see if it solves the issue.
I managed to download a working model in github. https://github.com/diving-in/threejs/blob/604de6a44940e822d9c38c73fb23273cf98091b3/threejs-7b_models.zip
It works with my model as well. It also runs for both camera.position.set(0,0,0); and camera.lookAt(0,0,0); as well as camera.lookAt(100,100,100);
But I am unable to dry run the code.
I downloaded the previous file 3D.rar
which is mentioned in this thread. But that code snippet is not working. Can you please provide a step by step explanation?
The problem with this js library is that I can’t debug it as it generally does not throw any error or warning.
If mesh is undefined in this case, it’s not really an error situation. Keep in mind that you are loading your glTF asset asynchronously. That means the mesh variable is set not at some point in the future when the scene.gltf has been loaded and parsed. So it’s better to implement animate() like so:
function animate(){
requestAnimationFrame(animate);
if (mesh) mesh.rotation.y += 0.01;
renderer.render(scene,camera);
};
You can ignore the shader warnings since they are only highlighting the fact that a certain WebGL extensions is not supported by your device.
Anyway this thing is working on my android phone.It is also working after installing windows using virtualbox. Just can’t resolve this thing on linux. Will do a fresh linux reinstallation then follow everything from scratch. Anyway thanks for assistance. Will inform if I encounter this same thing later.
[THIS PROBLEM IS RESOLVED]
I have another problem while loading gltf 2.0 using gltfloader. In blender the mesh is visible but in webpage it it black but the lighting is still enabled.
Model: torosarus.zip
I have several questions:
Is the problem is the mesh itself ?
Blender has a terrible UV mapping system (atleast it is complicated for me). So what is the possible way to load mesh and texture seperately and then map them in three.js ?
I have seen an option regarding this. var cube = new THREE.Mesh( geometry, material );
So what is the possible way to do it here ?
I’ve added an ambient and directional light to the scene. The materials of the model have a metalness value of 1. That means just adding an ambient light won’t show any effect. Consider to apply an environment map to the model.
This line creates a mesh and has nothing to do with uv unwrapping. I suggest you author texture coordinates in Blender. Please google the topic since there are many existing resources about it.
