I seem to have a problem importing a json object exported from Blender.
Everything seems to be working fine, but the materials aren't rendering correctly.
Does anyone have any idea as to why this peeling occurs?
I'm adding it simply via the ObjectLoader
function jsonLoad(url) {
var loader = new THREE.ObjectLoader();
loader.load(url, function (geometry, materials) {
scene.add(geometry);
});
}
Thank you very much in advance!
Related
I have a gltf model without an animation that I've loaded in aframe, and I'd like to add an animation that is connected to a different model. I've written some javascript to pull in the animation data and even bind it to the original GLB using GLTF loader, but not sure how to replace the aframe entity beyond just replacing the url.
Any help on how to solve this, or if there's a more efficient way to do this would be much appreciated! 🙂
HTML code:
<a-entity gltf-model="https://cdn.theoasis.xyz/public/bollywoodified/01.glb" id="center" position="0 0.03 -1.6" rotation="0 0 0" scale="1.3 1.3 1.3" animation-mixer\>\</a-entity\>
Javascript code:
import { GLTFLoader } from 'https://cdn.skypack.dev/three#0.129.0/examples/jsm/loaders/GLTFLoader.js';
getAnimations('https://cdn.theoasis.xyz/glb/djland.glb');
function getAnimations(glb) {
const loader = new GLTFLoader();
loader.load(glb, function ( gltf ) {
loader.load(oasis_data.metadata[0].glb, function (data) {
data.animations = gltf.animations;
});
});
}
I tried to pull the animationClip from another glb and was successful, and then was able to replace the animation array on the intended glb with the one from the animated glb. But I do not know how to actually update the entity within AFrame, nor do i know if this is the most efficient solution!
I am loading a 3D model using 3 files I've been provided with:
example.obj
example.mtl
example.jpg
I am loading them in my Three.js script with this snippet:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('./');
mtlLoader.load('example.mtl', function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('./');
objLoader.load('example.obj', function(obj) {
scene.add(obj);
}, onProgress, onError);
});
The model is displayed on screen and the textures applied, but incorrectly (textures are not properly assigned to each face, look rotated, etc). Looks like the texture mapping is incorrect. Since the snippet is so simple and everything seems to be set automatically I'm not sure what I could do to try to fix it. Any idea?
BTW, the files were exported from Zbrush.
Thanks in advance
Thanks for the comments but I finally found out what the problem was: Zbrush was exporting the textures upside down. I corrected them and the issue was fixed. Thanks again.
I created a Mesh in blender, exported it and loaded it via the JSON loader. Everything is rendered perfectly in the scene, but when I try to access it from outside the loader's callback function, I always get an "undefined".
This is my code:
var mesh, material;
var loader = new THREE.JSONLoader();
loader.load("./models/Baccanti/Bac.js", addModelToScene);
function addModelToScene(geometry,materials){
material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry,material);
mesh.position.set(0,0,0);
scene.add(mesh);
}
What do I miss or how do I access the mesh after loading?
Thank you!
You are probably calling it before the mesh is loaded. You can put another callback into your addModelToScene function to alert you when its done loading
Similar question:
using three.js JSONLoader
I would like to detect when JSONLoader loaded the model and all of its UV textures.
I tried to use the LoadingMonitor, but it was not useful. It didn't log "Loaded" message.
I don't know why. I did everything according to the example. What did I wrong?
var manager = new THREE.LoadingManager(function() {
console.log("Loaded");
});
var loader = new THREE.JSONLoader(manager);
loader.load("model.js", function(geometry, materials) {
...
});
Otherwise can it fire when textures are loaded? Or is it detectable?
Thanks for all replies.
I'm having issues getting a custom made collada object with no built in camera or lighting to render. I more or less copied what I had seen in a few collada examples to create my own loader, which looks like this:
var loader = new THREE.ColladaLoader();
var room, scene, stats;
loader.load('../Models/Rooms/boot.dae', function colladaReady( collada ){
collada.scene.getChildByName('Cube',true).doubleSided = true;
room = collada.scene;
room.scale.x = room.scale.y = room.scale.z = 1;
room.updateMatrix();
init();
});
The init function is fairly basic and looks like this
scene = new THREE.Scene();
scene.add( room );
scene.add( camera );
renderer.render(scene, camera);
Here is the actual object I'm trying to render. I have also tried it out with the monster.dae file that is in the examples folder without success. The Chrome javascript console isn't showing any errors, so I'm not quite sure where to look in my code. It all resembles functional examples, so I'm not sure why it's not functional. Is there something I'm unaware of that is relevant to collada loading?
RESOLVED: The item was rendering, but had no skin or texture associated with it. So it was rendering at the same colour as the background, which understandably appears to not be rendering at all. Discovered by adding a grid to the ground just to check.