I am working to upload a .FBX model with metallic textures, however, I am receiving the error:
THREE.FBXLoader: SpecularFactor map is not supported in three.js, skipping texture.
Is there way to get around this?
As noted within screenshots, the model is not loading correctly. Here is my code sample below:
if ( WEBGL.isWebGLAvailable() ) {
console.log("webgl is available");
} else {
var warning = WEBGL.getWebGLErrorMessage();
document.getElementById( 'container' ).appendChild( warning );
console.log("webgl is NOT available");
}
var camera, controls, scene, renderer;
init();
animate();
function init(){
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000000);
camera.position.z = 1000;
controls = new THREE.TrackballControls( camera );
controls.addEventListener('change', render);
scene = new THREE.Scene();
ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);
light = new THREE.PointLight(0xffffff, 0.8, 0.8)
light.position.set(3, 6, -3);
light.castShadow = true;
light.shadow.camera.near = 0.01;
light.shadow.camera.far = 25;
scene.add(light);
ambientLight = new THREE.AmbientLight(0xffffff, .5);
scene.add(ambientLight);
// CUBE
var geometry = new THREE.CubeGeometry(100, 100, 100);
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);
// iPad
var iPadFBX = new THREE.FBXLoader(
);
iPadFBX.load( '../models/iPad/iPad.fbx', function ( object ) {
scene.add( object );
} );
renderer = new THREE.WebGLRenderer({
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate(){
requestAnimationFrame( animate );
controls.update();
}
function render(){
renderer.render(scene, camera );
}
