Unable to view obj file in threejs

Questions
1

I have tried to load this obj file which I have converted from dwg file with the help of autodesk model derivative API. I have uploaded this obj file in autodesk viewer, It is viewing perfectly. But in this program, I am usng the same obj file but I am unable to see anything. I have attached the file. Could you please tell me what shall I do?
JW.obj (764.0 KB)

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

scene.background = new THREE.Color( 'grey' );

var renderer = new THREE.WebGLRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );

// scene.add( cube );

camera.position.z = 200;

var controls = new THREE.OrbitControls(camera,renderer.domElement);

controls.enableDamping = true;

controls.campingFactor = 0.25;

controls.enableZoom = true;

var keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30,100%,75%)'),1.0);

keyLight.position.set(-100,0,100);

var fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240,100%,75%)'),0.75);

fillLight.position.set(-100,0,100);

var backLight = new THREE.DirectionalLight(0Xffffff,1.0);

backLight.position.set(100,0,-100).normalize();

var light = new THREE.PointLight(0xc4c4c4,1);

light.position.set(0,300,500);

var light2 = new THREE.PointLight(0xc4c4c4,1);

light2.position.set(500,100,0);

var light3 = new THREE.PointLight(0xc4c4c4,1);

light3.position.set(0,100,-500);

var light4 = new THREE.PointLight(0xc4c4c4,1);

light4.position.set(-500,300,0);

scene.add(keyLight);

scene.add(fillLight);

scene.add(backLight);

scene.add(light);

scene.add(light2);

scene.add(light3);

scene.add(light4);

// var mtlLoader = new THREE.MTLLoader();

// mtlLoader.setTexturePath('/examples/3d-obj-loader/assets/');

// mtlLoader.setPath('/examples/3d-obj-loader/assets/');

// mtlLoader.load('T80.mtl',function(materials){

// materials.preload();

var objLoader = new THREE.OBJLoader();

// objLoader.setMaterials(materials);

objLoader.setPath('/examples/3d-obj-loader/assets/');

objLoader.load('JW.obj',function(object){

object.position.y -= 1600;

scene.add(object);

console.log(object);

object.computeBoundingBox()

});

// });

var animate = function () {

requestAnimationFrame( animate );

// cube.rotation.x += 0.1;

// cube.rotation.y += 0.1;

renderer.render(scene, camera);

};

animate();

// render();

// var center = new THREE.Vector3(0, 0, 0);

// var distanceToMove = 10;

// console.log(object);

// for (var i = 0; i < object.children.length; i++) {

// var meshPosition = object.children[i].position;

// console.log("hello world");

// var direction = meshPosition.clone().sub(center).normalize();

// var moveThisFar = direction.clone().multiplyScalar(distanceToMove);

// console.log("move this far",moveThisFar);

// let move = {

// x : Math.floor(Math.random() * 100),

// y : Math.floor(Math.random() * 100),

// z : Math.floor(Math.random() * 100)

// }

// object.children[i].position.add(move);

// }
2

I have no problems to load your file into the three.js editor. Just drag&drop it into the viewport and then double-click on the JW.obj entry in the outliner. Doing so will automatically focus the camera to the object. You also have to add some lights, otherwise the shape is black.

image
image1298×1036 8.8 KB

I suggest you use the same approach like recommended in the following topic to solve this issue in your app:

3

But I am unable to view json file with the help of above code.I want to use it for a web application. Could you please check my code?

4

HI, did you finally use it for a web application? i want to do some similar but i can’t