I have loaded a model using the DRACO loader and essentially, I get a single model with references to several materials. How could you programmatically match materials to the correct parts of the OBJ?
Please see issue here on GitHub with a solution needing THREE.js details.
Related
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
what is the most supported format to load on ThreeJS for Animated models by bones with multi-textures ?
i find most examples (including JSON) are showing models with single texture.
if JSON is the best, where can i find working example model with multi-textures? i tried to export one from Blender but it does not work.
Had also problems with multi-textured animated models last time and best solution I've found was
http://www.cgdev.net/json/index.php
There is an exporter and a loader for threejs inside.
Hope this will help.
I'm struggling to get an exported scene from blender into three.js and have been researching and experimenting for about two weeks now, however all information I can find on the subject seems to date back several years and is now too out of date to be of use.
I'm working with the following
Blender: 2.7.7
Blender Threejs export: 1.5.0
Three.js: r76
I've tried a few hundred combinations of export settings and while I can always get the geomety exported correctly, the materials while referenced correctly as far as I can see in the JSON file do not seem to want to load in. This occurs with both embeded and referenced textures.
While I have plenty of code samples for loading in JSON with the ObjectLoader all the images, references I find are to much older versions of the exporter (which I have tried) and I've yet to find one thta contians materials, the closest I found was a blender export with colours.
If anyone has any resources for the exporter or the object Importer, or would be able to see any issues with the JON file t would be a great help. The documentation and resources I can find are rather thin on the ground for the newer versions of ThreeJS it seems.
Here is a sample of the exported JSON https://paste.ee/p/RH42a I encoded the textures on this one. For some reason it's also exporting upside down, but that can be easily fixed.
Object loader
var loader = new THREE.ObjectLoader();
loader.load('obj/test/blender/export/test.json', function(obj) {
scene.add(obj);
});
I tried to import models from the 3D Warehouse, but some models fail to load (error in ColladaLoader.js (line 2808)
Uncaught TypeError: Cannot read property 'input' of null). I experienced this error with a lot of different models from 3D warehouse.
I prepared a fiddle (elcsiga/rep1z1xt/4), it loads the model from a different domain via ajax (CORS violation), however it worked me in Chrome.
A fully working example (fails to load model):
http://projecthost.hu/webview/jsfiddle/metro.html
Exactly same code with the monster model from three.js repository (it works):
http://projecthost.hu/webview/jsfiddle/monster.html
The collada model is available here: projecthost.hu/webview/jsfiddle/metro.dae
First I tried to download it as a .kmz file, unzip and use the .dae file in it directly. Additionally, I tried to download the .skp file, opened it in Sketchup and exported it into .dae format, but got the same error in ColladaLoader.js.
Do these models contain an unsupported geometry, or is it a bug in Collada loader?
Thanks.
The Model don't have any vertices so the Loader cant create a geometry. (maybe I'm wrong)
You created the Model via Google SketchUp right?
https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
find
var vertexData = sources[ this.vertices.input['POSITION'].source ].data;
in ColladaLoader.js, replace it with
var vertexData = [];
if (this.vertices && this.vertices.input['POSITION'].source) {
vertexData = sources[ this.vertices.input['POSITION'].source ].data;
}
this can fix my problem by avoiding empty vertices. It may lost some info of dae file, but it won't harm ColladaLoader.js's function.
I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.