I'm having issues trying to load dds textures with SceneLoader.
I'm currently using version 69 of three.js. I have tried modifying the SceneLoader to use THREE.DDSLoader but my page stalls and produce no errors.
Modification:
var isCompressed = fullUrl.toLowerCase().endsWith(".dds"); // had to add prototype endsWith
//console.warn(isCompressed);
if ( isCompressed) {
var loader = new THREE.DDSLoader();
console.log(fullUrl);
var texture = loader.load(fullUrl);
}
else{
var loader = THREE.Loader.Handlers.get( fullUrl );
if ( loader !== null ) {
texture = loader.load( fullUrl, textureCallback );
} else {
texture = new THREE.Texture();
loader = new THREE.ImageLoader();
( function ( texture ) {
loader.load( fullUrl, function ( image ) {
texture.image = image;
texture.needsUpdate = true;
textureCallback();
} );
} )( texture )
}
}
Nevermind, I figured it out.
I needed to replace var texture = loader.load(fullUrl) with texture = loader.load( fullUrl, textureCallback );
Related
I have loaded one model (obj file) in three js and applied custom checker texture image on all objects. Texture is applied on Model. But, issue is that - checker are not like uniformly - some checker are look small and some are look larger.
Here is link of screenshot.
Is there any way to fix it ? I mean - any calculation on geometry or any in-built properties of texture etc. in three js.
Here is link of model file Model.obj
loaded this model in three js and applied texture image.
// Below some code which I have tried.
function loadModel() {
object.traverse( function ( child ) {
if (child.type.toLowerCase() == "mesh" && child.material) {
if (child.material.length) {
for (var i=0; i < child.material.length; i++) {
child.material[i].map = texture;
child.material[i].needsUpdate = true;
}
}
else {
child.material.map = texture;
child.material.needsUpdate = true;
}
}
} );
scene.add( object );
}
manager = new THREE.LoadingManager( loadModel );
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
textureLoader = new THREE.TextureLoader( manager );
texture = textureLoader.load(currentTextureUrl); // texture checker image
texture.onUpdate = true;
function onProgress( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( 'model ' + Math.round( percentComplete, 2 ) + '% downloaded' );
}
}
function onError() {}
var loader = new THREE.OBJLoader( manager );
loader.load(modals.currentModal.objectFile, function ( obj ) {
object = obj;
}, onProgress, onError );
I am trying to render an object with UV maps and updating the texture with a loaded image thru Three JS. My problem is, I'm having artifacts on the rendered result. Why does this happen?
Notes:
Object is from a gltf file
I used blender for creating the model
I used KhronosGroup's blender gltf exporter for exporting the model
Image texture is 3239x2745 big
Here's my code
var inside_image = load_image("texture/inside.jpg");
var outside_image = load_image("texture/outside.jpg");
var textures = [];
Promise.all([inside_image, outside_image]).then((images)=>{
console.log('image', images);
for (var i in images) {
var canvas = document.createElement('canvas');
var compositeTexture = new THREE.Texture(canvas);
compositeTexture.wrapS = compositeTexture.wrapT = THREE.RepeatWrapping;
compositeTexture.repeat.y = -1;
var ctx = canvas.getContext('2d');
canvas.width = images[i].width;
canvas.height = images[i].height;
ctx.globalCompositeOperation = 'source-over';
ctx.fillRect(0,0,0,0);
ctx.drawImage(images[i], 0, 0, images[i].width, images[i].height);
compositeTexture.needsUpdate = true;
textures.push(compositeTexture);
}
loader.load(
'http://local.webgl.com/model.gltf',
function ( gltf ) {
console.log('gltf', gltf);
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
if (child.material.name == "Inside") {
child.material.map = textures[0];
} else {
child.material.map = textures[1];
}
console.log('child', child);
}
});
scene.add(gltf.scene);
// mixer = new THREE.AnimationMixer(gltf.scene);
// animations = gltf.animations;
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened', error );
}
);
});
i'm trying to load my .obj & MTL file into threejs and apply simple wall collision using raycaster. The scene has walls and other objects.
Used pointer control example
the loading and texturing are in place
problem is when using raycaster it throws an error "cannot read property visible of undefined" I guess my referencing is bad.
i used scene.children for passing objects in raycaster
here is the code for ray caster and obj loader. please let me know where im going wrong
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl( 'neavik/' );
mtlLoader.setPath( 'neavik/' );
mtlLoader.load( 'room.mtl', function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( 'neavik/' );
objLoader.load( 'room.obj', function ( object ) {
object.position.y = - 5;
object.scale.x=object.scale.y=object.scale.z=0.05
object.traverse( function( child ) { if ( child instanceof THREE.Mesh ) {
if (child.material.name == "Interior_wall") {
child.material = innerwall;
child.castShadow = true;
child.receiveShadow = true;
}
if (child.material.name == "Loby") {
child.material = innerwall1;
child.castShadow = true;
child.receiveShadow = true;
}
if (child.material.name == "TV_Black_Plastic") {
child.material = Black;
child.castShadow = true;
child.receiveShadow = true;
}});
object.name = "object";
scene.add( object );
});
} );
//Raycast
var rayCaster = new THREE.Raycaster(controls.getObject().position, cameraDirection);
var intersects = rayCaster.intersectObject(scene.children, true); //getting error on this line
$("#status").html("camera direction x: " + cameraDirection.x + " , z: " + cameraDirection.z);
// rest of the code
I had the same error and in my case the reason was that the object to be intersected was not existing yet or found at time of intersection.
Therefore I added a kind of null check to prevent this error message:
if (typeof scene != "undefined")
am exporting my models using ObjectExporter, my code is follows
exporter = new THREE.ObjectExporter;
var obj = exporter.parse(globalObject);
var json = JSON.stringify(obj);
console.log(json);
i can get the json exported data successfully, but after load it using ObjectLoader the Geometry only loading materials are not loading, am loading my saved model by following code
var loader = new THREE.ObjectLoader();
loader.load("savedjson.json",function ( obj ) {
scene.add( obj );
console.log(obj);
});
any clue to get materials work with the ObjectExporter?
I had the same problem. I have a first attempt at a workaround(but it needs to be improved for sure). What I do is, after loading the object, I traverse the model
loader.load("savedjson.json", function (obj){
obj.traverse(function(child){ initChild(child); });
scene.add(obj);
}
In initChild(child) I do this:
initChild(child)
{
if(child.material != null)
{
var childMaterialName = child.material.name;
child.material = new THREE.MeshPhongMaterial();
child.material.name = childMaterialName ;
AssignMap(child.material);
}
}
In AssignMap(material) I first load the textures, then assign them based on the material name:
AssignMap(material)
{
var texture_metal = new THREE.ImageUtils.loadTexture("media/texture_metal.jpg");
var texture_glass = new THREE.ImageUtils.loadTexture("media/texture_glass.jpg");
if(material.name == "metal texture")
{
material.map = texture_metal;
}
if(material.name == "glass texture")
{
material.map = texture_glass;
}
}
I use THREE.OBJLoader for import model obj I use code from https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj.html#L75 and i insert THREE.GeometryUtils.center for move model tothe original
var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
for ( var i = 0, l = object.children.length; i < l; i ++ ) {
object.children[ i ].material.map = texture;
}
object.position.y = - 80;
scene.add( object );
});
THREE.GeometryUtils.center(object);
loader.load( 'obj/001939.obj');
I show error in firefox is"a.computeBoundingBox() is not function".Idon't know why show it's error. Iuse firfox version 17.0.1