We Keep Coding

.obj file in javascript is not moving when using keyboard

The most important part in my code is in JavaScript. I want that my objects can move when I press "down" or "right" or etc. The problem is that object from .json file is moving, but object from .obj file is not. Is it possible to fix that?
This is my code:
<script>
var container, scene, camera, renderer, controls, stats;
var keyboard = new THREEx.KeyboardState();
var keyboard = new KeyboardState();
var galva;
init();
animate();
render();
function init()
{
var spgeometry = new THREE.SphereGeometry( 30, 32, 32 );
var spmaterial = new THREE.MeshBasicMaterial( {color: 0x00000} );
galva = new THREE.Mesh( spgeometry, spmaterial );
galva.position.set(125, 150, 90);
scene.add( galva );
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/android.js", addModelToScene );
var loader = new THREE.OBJLoader();
loader.load("models/teaport.obj", function ( object ) {
var material = new THREE.MeshLambertMaterial( );
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
object.scale.set(50,50,50);
scene.add( object );
} );
}
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshLambertMaterial( materials );
c = new THREE.Mesh( geometry, material );
c.scale.set(50,50,50);
scene.add( c );
}
function update()
{
keyboard.update();
if ( keyboard.down("left") ){
galva.translateX( -50 );
}
if ( keyboard.down("right") ){
c.translateX( 50 );
galva.translateX( 50 );
object.translateX( 50 );
}
controls.update();
stats.update();
}

If you put together a jsfiddle or something similar - it could be easier to figure out. I think you end up with variable shadowing, and your "object" is simply undefined. Try following change.
var loader = new THREE.OBJLoader();
loader.load("models/teaport.obj", function ( o ) {
var material = new THREE.MeshLambertMaterial( );
o.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
o.scale.set(50,50,50);
scene.add( o );
object = o; // <-- important

Three.js multi-material implementation in r85

I'm trying to migrate multi-material to r85 but can't seem to see any result.
Previously I had:
mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ material1, material2 ] );
mesh.children[1].material.transparent = true;
Example Pen.
Now I do:
materials = [ material1, material2 ];
mesh = new THREE.Mesh( geometry, materials );
material2.transparent = true;
Example Pen.
But I can't see both materials. Why?

ThreeJS cannot load Json files

first, i have already read this question didn't help
How i do: first i export a model from C4D to .ojb. Then i import the obj into www.trheejs/editor
I fill all the blank
then from the tree i select my object and export it to a Threejs Object, it save a .json file
My code
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true);
loader.load( "brikk2.json", function ( geometry, materials ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff0000, ambient: 0xff0000 } ) );
scene.add( mesh );
});
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
When i run i have theses error messages
THREE.WebGLRenderer 67 three.js:20806
THREE.WebGLRenderer: elementindex as unsigned integer not supported. three.js:26942
XHR finished loading: "http://xxxxxx.xx/tst/mrdoob-three2/brikk2.json". three.js:12018
THREE.JSONLoader.loadAjaxJSON three.js:12018
THREE.JSONLoader.load three.js:11942
load test.html:23
(anonymous function) test.html:28
Uncaught TypeError: Cannot read property 'length' of undefined three.js:12087
parseModel three.js:12087
THREE.JSONLoader.parse three.js:12028
xhr.onreadystatechange three.js:11969
the Json i load
{
"metadata": {
"version": 4.3,
"type": "Object",
"generator": "ObjectExporter"
},
"geometries": [
{
"uuid": "213E28EF-E388-46FE-AED3-54695667E086",
"name": "brikkG",
"type": "Geometry",
"data": {
"vertices": [0.036304,-0.016031,-0.027174,0.036304,0.......
........ 232,1228,1139,1141,1140,1]
}
}],
"materials": [
{
"uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
"name": "lego",
"type": "MeshPhongMaterial",
"color": 16721408,
"ambient": 16777215,
"emissive": 0,
"specular": 16777215,
"shininess": 30,
"opacity": 1,
"transparent": false,
"wireframe": false
}],
"object": {
"uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6",
"name": "BrikkM",
"type": "Mesh",
"geometry": "213E28EF-E388-46FE-AED3-54695667E086",
"material": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
"matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1]
}
}
structure of the json file
basically i have tried all i have read about importing native json into ThreeJS, i tried files from the treejs/editor or clara.io still have the same error message, i have no idea anymore, i spend 3 days trying all the way i read to solve this.
If i try to create geometry like CubeGeometry it render without problems, but at soon as i try with native json, nothing work anymore
somebody could help ?

Ok, i found the answer here: http://helloenjoy.com/2013/from-unity-to-three-js/
the native json code is perfect, it's just no be mean to be loaded with JSONLoader but with ObjectLoader (do not mismatch with OBJLoader like i did i one of my experiment). JSONLoader is mean to load json, but with a different format/structure. ObjectLoader is mean to load native format that is also written in json but with a native structure/format.
so use
var loader = new THREE.ObjectLoader();
loader.load( 'brikk2.json', function ( object ) {
scene.add( object );
} );
and it's working
full example code
<body>
<script src="build/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xffffff, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
var loader = new THREE.ObjectLoader();
loader.load( 'brikk2.js', function ( object ) {
scene.add( object );
} );
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
</body>
EDIT
The top code i showed in the top question was right but it was for Geometry loading
loader = new THREE.JSONLoader();
loader.load( 'ugeometry.json', function ( geometry ) {
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'environment.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } ) );
scene.add( mesh );
So the recap.
if from threes/editor or Clara.io you save GEOMETRY use JSONLoader, if you save as OBJECT use ObjectLoader, and if you save as SCENE they should be a SceneLoader (unverified)

JSON model texture not loading

I've converted obj file to json model using python tool
and i'm trying to load it
here is the code
var camera, scene, renderer;
var mesh, aircraft;
function addModelToScene( geometry, materials )
{
aircraft = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
scene.add( aircraft );
}
function init()
{
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20000 );
camera.position.z = 30;
scene = new THREE.Scene();
var jsonLoader = new THREE.JSONLoader( true );
jsonLoader.load( "XA-20.js", addModelToScene );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate()
{
requestAnimationFrame( animate );
aircraft.rotation.y += 0.02;
renderer.render( scene, camera );
}
model is loading but no textures on it
model file is big so I can't post it here
but there are materials
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "plane",
"colorAmbient" : [0.117647, 0.117647, 0.117647],
"colorDiffuse" : [1.0, 1.0, 1.0],
"colorSpecular" : [0.75294099999999997, 0.75294099999999997, 0.75294099999999997],
"illumination" : 2,
"mapBump" : "XA-20_Razorback_Strike_Fighter_N.png",
"mapDiffuse" : "XA-20_Razorback_Strike_Fighter_P01.png",
"specularCoef" : 8.0
},
{
"DbgColor" : 15597568,
"DbgIndex" : 1,
"DbgName" : "glass",
"colorAmbient" : [0.117647, 0.117647, 0.117647],
"colorDiffuse" : [1.0, 1.0, 1.0],
"colorSpecular" : [0.75294099999999997, 0.75294099999999997, 0.75294099999999997],
"illumination" : 2,
"mapDiffuse" : "Glass_Cockpit.png",
"specularCoef" : 8.0
},.......
and uvs as well
"uvs": [[0.72626,-0.65659,0.72655,-0.62558,0.72427,-0.6262,0.72391,-0.66141,0.73223,-0.62103,0.73212,.......
any clues where i can look for solution ?

jsonLoader.load has a third argument which sets the texturepath. Set this texturePath to the folder which has the textures and it should work.
https://github.com/mrdoob/three.js/blob/master/src/loaders/JSONLoader.js#L16

In my case problem was that I did not properly added lighting
so models didn't had enough light to appear as colorful
it did loaded textures but visually it was invisible because of lighting
so if run into similar problem check your lighting first

show textures - maya to three.js

i need converted maya to js for simple model with textures
work fine but show without textures
my code:
var loader = new THREE.JSONLoader();
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
online demo : http://mika.ir/virtual-exhibition/
download code : http://mika.ir/virtual-exhibition/virtual-exhibition.rar

You have to pass in a texture to one of the material objects. Use either MeshLambertMaterial or MeshPhongMaterial and pass in a THREE.Texture. You first have to load the texture and pass a callback. I would do something like the following if the texture you want to load is 'path/texture.png':
var modelTexture = THREE.ImageUtils.loadTexture('path/texture.png', false, loadModel);
function loadModel() {
loader.load( "models/t2.js", function(geometry) {
var part1 = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial({ map: modelTexture });
mesh =new THREE.Object3D();
mesh.add( part1 );
//var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(30,30,30);
scene.add( mesh );
});
}