Develop Reference

.gltf model not appearing in the browser

I have a .gltf file. I can open this with 3d viewer. But, when I try to load this in the browser, it loads (no error in the console),, but it doesn't show up in the scene. I tried to load the model in (https://threejs.org/editor/), but, failed.
How can i fix this??? please help..
The file link: https://drive.google.com/file/d/1ckC1qiIRGDskO240Y5N7oIBJufocEiTb/view?usp=sharing

It all works fine. Your 3d Model is simply to big. Change the scale in THREE.js to 0.001 or change the size of the model in an editor like blender. Also add a light source of some sort. Otherwise it will be all black.

Adding a GLTF Model Into a Simple React Three Fiber Scene

I'm simply trying to add a model with a diffuse and bump texture to a simple scene in react 3 fiber.
I have literally no clue what I'm doing wrong.
Heres the sandbox: https://codesandbox.io/s/three-point-lighting-in-react-three-fiber-forked-qeqlx?file=/src/index.js
The model is a GLTF moon, that has the textures baked in. The moon is just a sphere but I want to use the GLTF model. Currently, the scene displays the background and lights, but no model.
If you have any insight about this I would appreciate it immensely!

At first glance, it looks like you're importing GLTFLoader and moon, but you're never using them. That's what those squiggly yellow lines mean:
Make sure you implement them as outlined in the documents:
const loader = new GLTFLoader();
loader.load(
moon,
function(gltf) {
scene.add(gltf.scene);
}
);

Alright, I figured it out. Thanks to #Marquizzo
Issues:
The .gltf file was not in the correct directory. It needed to be in the public directory since I am using the "npx #react-three/gltfjsx" script.
The .gltf was incredibly large relative to the scene. In Cinema 4d, it is perfectly sized. But in three.js, it was around 99x too large.
The position of the mesh was behind the camera. I had no clue that you could use Orbital Controls to move the camera around and manually find the object. I also positioned the object at [0,0,0].
The template scene I was using was from a tutorial from almost a year ago. So there had been some major developments since then that caused simple bugs on runtime. So I updated the dependencies.
Issues I still have:
Textures aren't loading from the baked-in .gltf file.
I increased the lighting and it seems that the lighting isnt the issue.
Heres the fixed sandbox: fixed
What I learned:
Orbital Controls
Use of OBJLoader
useHelpers like CameraHelper

THREE.js not rendering .obj with .mtl - exporting files for THREE.js

***UPDATE***This has to be an issue with the files and the way they are exported, i just don't know what that issue is. I have downloaded some more example models and they all render just fine.
I am experiencing an issue with Three.js when loading .obj and .mtl files.
I have a bunch of objects and their corresponding material files exported from 3ds. I am not the one who has exported these files, I am not a 3d modeler however if this turns out to be an issue with the files I can ask the modeler to export them again.
I have used THREE.js a few times and never come across this issue, I am loading the .mtl and .obj file using the following:
mtlLoader.load("stands/objects/Table&Chairs.mtl", function(materials){
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("stands/objects/Table&Chairs.obj", function(object){
scene.add(object);
object.position.set(-5, 0, 4);
});
});
My problem is the object loads fine, there are no errors, however nothing is shown. The object is not being rendered to the scene.
If i download some example assets from other sources and switch out the files that are being uploaded, without changing anything else, the object renders.
This leads me to believe it could be an issue with the way in which the files are being exported.
screen showing of my .obj being rendered
Screen showing the example .obj being rendered
Any help as to what could be causing this would be much appreciated.
I have uploaded the objects and materials here.
Mine are the Table&Chairs, the example ones are the Tent_Poles_01 files.

The great thing about .OBJ files is that you can just open them up in the text editor of your choice and see what is inside. This will give you a rough idea of position and scale:
Looking at the vertices in your tent model, it seems to have a size of about 2 units in each dimension, centered around the origin.
Looking at the vertices in the Table & Chairs model, they have a size of a couple of hundred/thousand units, and start near (+6000,0,-2000).
In other words, the first suspect would be your model being rendered somewhere far outside the visible viewport.
Usually, when you work together with a 3D artist, you discuss the scale you want to work at beforehand, and have them nicely align the model with the origin.
You can (sort of) correct this in code, but it will not be as practical.
mesh.geometry.center() will recenter the geometry around (0, 0, 0)... but do note that is usually not what you want. For example, a table will then be half-way through the floor in it's default centered position.
to scale the geometry to an absolute size, use something like (pseudocode)
var currentSize = new THREE.Box3().setFromObject(model).getSize();
mesh.geometry.scale(
targetWidth / currentSize.X,
targetHeight / currentSize.Y,
targetDepth / currentSize.Z)

Best way to add skybox to Autodesk Forge Viewer

I am trying to add a skybox to a model in Forge Viewer.
So far I have managed to create and add the skybox to the model via an extension.
The problem is that the skybox needs to be big, and the camera back clip plane will be to short; - eg. the skybox is only partially visible or hidden.
I did not manage to modify the camera settings to change the clip plane and was therefore thinking of another way:
I was wondering if it was better to keep the skybox in a separate ThreeJS Scene, but so far I am not able to figure out how the extra scene should be added to Autodesks Viewer3D, neither how it should be kept in sync with the main cameras rotation.
Any pointers and examples would be appreciated

Loading an extra scene can be an overkill to achieve such feature, the easiest workaround would be load a second model that has a slightly larger extends than your skybox, so the viewer will automatically update its clippings plane.
What I suggest you to do is to translate a model that contains only tiny spheres or cubes defining the desired extends of the skybox scene. Then you will load that model either using its urn or downloading its resources and loading it "Local" even if your other model is loaded from the cloud.
See there for more details about extracting viewable resources and running Local vs cloud based:
https://extract.autodesk.io
Working seamlessly online/offline when developing your Web applications with the Forge Viewer
Hope that helps

Three.js won't load blender model

I am new to Blender (using 2.70a) and I made a mesh from a bezier curve. [File: http://ivybaumgarten.com/3d/models/wiggler5.blend ]
Exporting it to three.js format gives just a shell of an export with nothing inside: http://pastebin.com/aVNnjE5f
Exporting it as Collada contains something that looks promising (http://pastebin.com/XFf7wMR8 ), but if I replace monster.dae from this example (http://threejs.org/examples/webgl_loader_collada.html) with my model, it doesn't show up. Exporting just a cube shows up fine.
In Blender, it also appears in Texture view, but when I switch over to Rendered, it's blank.
What am I doing wrong?

A friend pointed out that the export was empty because I hadn't selected anything before exporting. Selecting the model before exporting made the model show up in my three.js project.
I still don't know why Render is empty.

I don't know three.js and collada but if you want to export your mesh or a scene in order to show it through the Web via WebGL, I suggest you to use babylonjs. I have already done an export from 2.69 & 2.71 and it works well.