I successfully transformed an obj file into a json model using a Python tool, and now I am attempting to load it into my project. Below is the code snippet:
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 );
}
The model loads successfully, but there are no textures applied to it. The model file size is too large for me to share here, but it does come with 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
},.......
In addition, UVs are also provided for the model:
"uvs": [[0.72626,-0.65659,0.72655,-0.62558,0.72427,-0.6262,0.72391,-0.66141,0.73223,-0.62103,0.73212,.......
If anyone has any insights on where I can find a solution to apply these materials and textures correctly, please let me know.