File json exported by editor is not work - javascript

i import the obj file to editor and then export geometry to js file, when i put it on my code, nothing appear with the error in firefox debug:"Type Error: t1 is undefined" .
I change model to the .js file exported by MaxExporter with option "Export UVs", "Export Normals" selected, it's work fine.
Next, i change model to file exported by MaxExporter with only "Export UVs" selected, once again, "Type Error: t1 is undefined", so is this a bug or the problem is just my code, and how to fix it?
This is my code:
var ambient = 0xffffff, diffuse = 0xffffff, specular = 0x000000, shininess = 100;
var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].value = THREE.ImageUtils.loadTexture( "md/normals.jpg" );
uniforms[ "uNormalScale" ].value.set( 1.5, 1.5 );
uniforms[ "tDiffuse" ].value = THREE.ImageUtils.loadTexture( "md/diff.jpg" );
uniforms[ "enableDiffuse" ].value = true;
uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
uniforms[ "uSpecularColor" ].value.setHex( specular );
uniforms[ "uAmbientColor" ].value.setHex( ambient );
uniforms[ "uShininess" ].value = shininess;
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
var material = new THREE.ShaderMaterial( parameters );
loader = new THREE.JSONLoader( true );
loader.load( "md/model.js", function( geometry ) { createScene( geometry, 100, material ) } );
container.appendChild( renderer.domElement );
window.addEventListener('resize', onWindowResize, false);
}
function createScene( geometry, scale, material ) {
geometry.computeTangents();
geometry.computeVertexNormals();
mesh = new THREE.Mesh( geometry, material );
mesh.castShadow = true;
mesh.receiveShadow = true;
mesh.position.y = - 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
scene.add( mesh );
}

There is a problem with your code.
geometry.computeTangents() requires vertex normals. You need to switch the order.
geometry.computeVertexNormals();
geometry.computeTangents();
That fixes the error.
But, geometry.faces[4].normal is zero. There is something wrong with your model.
three.js.r.63

Related

How to load two or more .obj objects in a scene using three.js from user input?

How to load more than two objects in three js of .obj file . I tried by applying a for loop across the loader file of obj and mtl but it is not working instead it shows only the last object ?Please if any one can help.
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );
// model
THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
var setBaseUrl1 = 'newObj/';
var setPath1 = 'newObj/';
var i = 0;
var mltLoad1,objLoad1;
var mtlLoader = new Array(res.length);
var objLoader = new Array(res.length);
for(i=0;i<res.length;i++)
{
mtlLoad1 = String(res[i].concat(".mtl"));
objLoad1 = String(res[i].concat(".obj"));
mtlLoader[i] = new THREE.MTLLoader();
mtlLoader[i].setBaseUrl( setBaseUrl1 );
mtlLoader[i].setPath( String(setPath1) );
mtlLoader[i].load( mtlLoad1, function( materials ) {
materials.preload();
objLoader[i] = new THREE.OBJLoader();
objLoader[i].setMaterials( materials );
objLoader[i].setPath( setPath1 );
objLoader[i].load( objLoad1, function(object) {
object.position.y = -95;
object.position.z = 500;
camera.position.x = 500;
scene.add( object );
});
});
}
}
load model without for loop ,it looks your variable holds obj override .

How get three.js json model vertex position

I use this code to load a THREE.js json model :
var noisenormalmap = THREE.ImageUtils.loadTexture( "obj/jgd/noisenormalmap.png" );
noisenormalmap.wrapS = THREE.RepeatWrapping;
noisenormalmap.wrapT = THREE.RepeatWrapping;
noisenormalmap.repeat.set( 5, 5 );
var loader = new THREE.JSONLoader();
loader.load( 'myobject.json', function ( geometry ) {
JGDframe = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {
color: 0xAF0000 ,
side: THREE.DoubleSide,
specular: 0x222222,
shininess: 1000,
emissive:0x000000,
normalMap: noisenormalmap,
normalScale: new THREE.Vector2( 0.32, 0.32 ),
envMap: reflectionCube,
reflectivity:0.82,
refractionRatio:0.1,
combine: THREE.AddOperation
} ) );
scene.add( JGDframe );
});
I want to get myobject.json.geometry.vertex[0].position.x. How can I get it ?
It is JGDframe.geometry.vertices[0].x or y or z

How do I attach a texture to JSON object in Three.js?

How do I attach a texture to JSON object in Three.js?
Someone help me. Please see my inability cord below.
var texture = new THREE.ImageUtils.loadTexture('panel.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );
var loader = new THREE.JSONLoader();
loader.load( 'panel.json', function ( geometry ) {
model = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( {map: texture} ) );
scene.add( model )
} );
Try below codes, define the material in your json file.
var loader = new THREE.JSONLoader();
loader.load( 'panel.json', function ( geometry, material ) {
model = new THREE.Mesh( geometry, material);
scene.add( model )
}, 'panel.png');

Texture update in three.js

In my three.js project I try to change the color texture by clicking on an image.
Here goes my code:
...
var col;
document.getElementById('image3').onclick = function() {
col=("textures/synleder/synleder_COL.png");
};
var textures = {
color: THREE.ImageUtils.loadTexture(col),
normal: THREE.ImageUtils.loadTexture('textures/synleder/synleder_NRM.jpg'),
specular: THREE.ImageUtils.loadTexture('textures/synleder/synleder_SPEC.jpg'),
};
textures.color.wrapS = textures.color.wrapT = THREE.RepeatWrapping;
textures.color.repeat.set( 2, 2);
textures.normal.wrapS = textures.normal.wrapT = THREE.RepeatWrapping;
textures.normal.repeat.set( 2, 2);
textures.specular.wrapS = textures.specular.wrapT = THREE.RepeatWrapping;
textures.specular.repeat.set( 2, 2);
var shader = THREE.ShaderLib[ "normalmap" ];
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].value = textures.normal;
uniforms[ "uNormalScale" ].value.y = 2;
var material2 = new THREE.MeshPhongMaterial( {
map: textures.color,
specularMap: textures.specular,
normalMap: uniforms[ "tNormal" ].value,
normalScale: uniforms[ "uNormalScale" ].value,
} );
loader = new THREE.JSONLoader( true );
document.body.appendChild( loader.statusDomElement );
loader.load( "geo/kugel5.js", function( geometry ) { createScene( geometry, scale, material2 ) } );
...
what I tried until now is that I defined a variable col which should contain the path of my color textures. And by clicking on image3 the new color texture should be visible on my geometry. Unfortunately it doesn´t work.
After some research I found this thread: Three.js texture / image update at runtime
and I think I have to add something to update the texture: textures.color.needsUpdate=true;
But when I add this to my code like:
document.getElementById('image3').onclick = function() {
col=("textures/synleder/synleder_COL.png");
textures.color.needsUpdate=true;
};
my geometry disappears. Does anyone have a clue what I did wrong?
Many thanks!
document.getElementById('image3').onclick = function() {
textures.color = THREE.ImageUtils.loadTexture("textures/synleder/synleder_COL.png",function(){
material2.color = textures.color;
textures.color.wrapS = textures.color.wrapT = THREE.RepeatWrapping;
textures.color.repeat.set( 2, 2);
textures.color.needsUpdate=true;
});
};
This should do it

How to add shader to THREE.Object3D loaded from OBJMTLLoader

I have a model loaded using THREE.OBJMTLLoader.
var loader = new THREE.OBJMTLLoader();
loader.addEventListener('load', function(event) {
var mesh = event.content;
scene.add(mesh);
});
loader.load('model/machine.obj', 'model/machine.mtl');
I need to apply a vertex and fragment shader to this model. How to do this?
In addition to Gero3's answer, this would ensure that all the meshes in the content will get the right material:
var material = new THREE.ShaderMaterial( {
uniforms: shader.uniforms,
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader
} );
var object = event.content;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
scene.add( object );
You need a shadermaterial for adding a vertex and fragment shader.
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms
} ),

Categories

Resources