I'm using three.js and have the scene and everything set up but when I try to load a 3d object (.gltf from here sketchfab 3d object). But the object seems to load fully and then doesn't show up for some reason. The file is being imported correctly.
import laptop from './laptop/scene.gltf'
var objloader = new GLTFLoader();
objloader.load(laptop, function (gltf) {
gltf.scene.scale.set(2, 2, 2);
gltf.scene.position.set(220, 10, 400)
scene.add(gltf.scene);
});
This error is showing up in the console which doesn't make sense because it should be placed correctly.
RangeError: attempting to construct out-of-bounds TypedArray on ArrayBuffer
I have fixed this problem by converting the gltf to glb. The gltf folder had textures folder inside as well as a binary file. Perhaps React was not taking those extra files into account. Because glb is the entire 3d object inside one file with no dependencies.
Related
I've loaded a .dae model including multiple meshes, and tried to clone it but failed. Following is the code I used.
loader.load( 'assets/model/deck.dae', function ( collada ) {
deck = collada.scene;
console.log(deck);
window.referenceModel = deck.children[0];
refObject = window.referenceModel;
} );
var deckClone = new THREE.Mesh( refObject.geometry, refObject.material );
scene.add( deckClone );
This code works well on sample .dae file consists of one mesh but doesn't work well on the other .dae file made by myself. .dae file I made consists of several mesh groups.
I will attach those files.
This is sample .dae file.
https://drive.google.com/file/d/13BCp6avslnpb1O8Q6xCqjE-ueojgz1AD/view
And this is .dae file I made myself.
https://drive.google.com/file/d/1BTIMs0IHHqrixvj45NXcZoh1PhEnm2Qr/view
I want to know how to clone objects from the second .dae files, or how to convert the second one to .dae file with the same structure (one mesh) file.
You're only targeting ONE child of your scene when you do deck.children[0] so of course it's only going to clone that one mesh.
Try the .clone() method as mentioned in the docs, which will traverse through all its descendants and clone them for you.
loader.load( 'assets/model/deck.dae', function ( collada ) {
deck = collada.scene;
var deckClone = deck.clone(true);
scene.add(deckClone);
} );
Also, you were adding deckClone outside the .load() callback function, which means it's going to be performed before the .dae file gets loaded, and you'll run into errors and problems that way. Make sure you add your cloned object to the scene inside the callback function.
I'm using a free 3d model from turbosquid. This model is using a texture that looks like this:
It does look good in Blender:
But once exported to three.js, it seems that the texture does not follow the uv map:
Here is the code i'm using:
var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
ship = new THREE.Mesh(geometry, materials[0]);
scene.add(ship);
}
);
And here is the json I get once exported from Blender:
What am I missing?
Thanks a lot for your help!
There are some minor complexities in this model, which I think are causing issues for Blender exporters. They're not "wrong", but they're hard for exporters to handle without cleanup. You can fix those manually (open the .blend file in Blender, apply modifiers, remove all textures except the diffuse) but the easiest path is probably converting the OBJ version provided by Turbosquid to glTF. Going to the Cesium OBJ->glTF converter (or OBJ2GLTF if you need something programmatic) and dragging in the OBJ/MTL/texture will give the right result. NOTE: you'll need to move the sh3.jpg file into the same directory as the MTL file; it shouldn't be in the Textures/ folder.
Result on https://gltf-viewer.donmccurdy.com/ — using three.js r92 and THREE.GLTFLoader.
Having an issue using a JSON model w/ textures exported from Clara.io.
For those familiar with Clara.io, I'm using File -> Export All -> ThreeJS (JSON) to export and including the files in my ThreeJS project using the ObjectLoader example in the Clara.io docs:
var loader = new THREE.ObjectLoader();
loader.load("zebra.json",function ( obj ) {
scene.add( obj );
});
The mesh Geometry is loading fine, but with no texture.
Console is throwing error(s): 'Undefined texture null', yet the texture files are referenced in the JSON file.
Using ThreeJS r74.
How can I load the texture in three.js? The .json file references multiple textures.
I've reviewed #28723121 but a solution from that thread is unclear and I'd like to keep in-step w/ r74.
Any advice appreciated.
Got the example code working with a different model/texture combo not exported from Clara.io.
Not exactly 'the' answer I was looking for but its a solution for now. Doesn't appear to be a ThreeJS issue.
I have a scene which I am exporting from Blender using the Three.js exporter. After a bit of trial and error I got it to export fine. When I tried to import it into Three, I got a few WebGL errors like glDrawElements: range out of bounds for buffer, which seemed to be related to the size or positioning of the imported object. I mucked around with some stuff related to size and eventually got it to load fine. However, none of my materials with textures are loading, EXCEPT one, which was an object with a single material applied to it.
Here's my pipeline
Create base for the level in my three js editor tool
Export this and import it into Blender for texturing/uv mapping (works fine)
Objects can have a number of materials, one for each face really, each material can have a different texture mapped to it (all good, objects are uv unwrapped etc..,)
Join all objects together (except one object which is a tree with a single material/texture applied to it)
Export the Blender file as a JSON file via the Three.js exporter
Load the file into Three using the SceneImporter
When it comes into Three, there are two objects, one is the tree which has a single texture mapped to its material. The other is a large geometry with 20 materials and textures mapped. This geometry does not have any textures displaying and just shows as a MeshLambertMaterial.
Has anyone else experienced any issues like this? Any solutions?
Seems like the SceneImporter doesn't know what to do with these materials, but all the data is there, so you'll need to give it a little help.
Like so;
loader.load('sceneWithObjectOfManyFaceMaterials.json' , function(loaded)
{
for(var key in loaded.objects)
{
var mesh = loaded.objects[key];
if(mesh.material.materials)
{
mesh.material.materials.forEach(function(m , i)
{
m.map = loaded.materials[m.name].map;
});
}
scene.add(mesh);
}
render();
});
I'm creating a disc golf game for the browser. A friend of mine is assisting me by creating objects in Trimble Sketchup, so that I can import them into the game. He has exported a .dae file and the textures, and I have imported them using the ColladaLoader.js. The textures and object load, and the object is rendered, but the object is black, and, sometimes, the javascript console says some textures cannot be rendered.
Here is some code :
var loader = new THREE.ColladaLoader();
var dae;
loader.options.convertUpAxis = true;
loader.load( '/discgolf/static/models/BelmontDreamCourse.dae', function ( collada ) {
dae = collada.scene;
dae.scale.x = dae.scale.y = dae.scale.z = 2.0;
dae.position.set( 5, 5, 5 );
scene.add( dae );
} );
What else do I need to do? I will be happy to provide more information.
Without more information it's quite a quesswork, but I'd check three things first:
Make sure the texture path is correct (check Firebug Net panel or such for which path it's trying to load the textures). You might need to search & replace the texture path in the DAE, if I remember correctly SU can sometimes put absolute paths there.
Do you have lights in the scene? If I remember correctly, ColladaLoader converts the SU DAE materials to MeshPhongMaterial, which does need some lights to show up unlike MeshBasicMaterial.
Do you have an animation loop, so that the thing is constantly rendered? If not so, make sure that you re-render the scene not only after the model is loaded, but after the textures are loaded too (they are lazy loaded after the model).
Make sure to resize the texture files to power-of-two dimensions (256x512, 256x256,1024x1024 and so on). WebGL does not like arbitrarily sized textures.