Hi, I am rendering a 3D model using MTL/OBJ Loader. Model render correctly but when i am dragging mouse from left to right or visa versa, model is not rotating accordingly. It is basically flipping around y axis or x axis. As i have seen multiple examples related to MTL/OBJ loader where same is happening but in my case it is not. Please Help.
Video Url:
Also On loading, Model orientation is not correct. Please Find attached screenshots for current & expected orientation. One more thing can we make this orientation generic so that whatever model i render, its orientation remains same?
Default/Current Orientation:
Expected Orientation:
Code snippet is attached.
// All of these variables will be needed later, just ignore them for now.
var container;
var camera, controls, scene, renderer;
var lighting, ambient, directionalLight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var raycaster;
var mouse;
var objects = [];
var cnt = 0;
init();
animate();
function init() {
container = document.getElementById("container");
//SCENE
scene = new THREE.Scene();
//CAMERA
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, .1, 5000);
camera.position.x = -200;
camera.position.y = -1000;
camera.position.z = 1200;
// Add the camera to the scene:
scene.add(camera);
//LIGHTING
ambient = new THREE.AmbientLight(0x404040, 1.0);
scene.add(ambient);
directionalLight = new THREE.DirectionalLight( new THREE.Color('hsl(0, 0%, 75%)'), 1 );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
//3D Object Loading
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl('http://localhost:81/3dtest/assets/');
mtlLoader.setPath('http://localhost:81/3dtest/assets/');
mtlLoader.load('MSRDC_JUNE_16_P4PRO_ARIVALI_M2_simplified_3d_mesh.mtl', function (materials) {
materials.preload();
materials.materials.texture.map.magFilter = THREE.NearestFilter;
materials.materials.texture.map.minFilter = THREE.LinearFilter;
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('http://localhost:81/3dtest/assets/');
objLoader.load('MSRDC_JUNE_16_P4PRO_ARIVALI_M2_simplified_3d_mesh.obj', function (object) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
//The child is the bit needed for the raycaster.intersectObject() method
objects.push( child );
}
});
scene.add(object);
console.log('Object::',object);
});
});
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
//RENDERER
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
container.appendChild(renderer.domElement);
//CONTROLS
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
//EVENTS
window.addEventListener('resize', onWindowResize, false);
document.addEventListener( 'dblclick', onDocumentMouseDown, false );
}
function onDocumentMouseDown( event )
{
console.log("Click.");
cnt += 1;
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( objects );
var current,selected;
for(var i=0,l=intersects.length;i<l;i++) {
current=intersects[i].point;
if(selected instanceof THREE.Vector3){
if(selected.distanceTo(camera.position)>current.distanceTo(camera.position)){
selected=current;
}
}else{
selected=current;
}
}
if(selected instanceof THREE.Vector3){
makeTextSprite(cnt.toString(),selected);
}
}
function toString(v) { return "[ " + v.x + ", " + v.y +", " + v.z + " ]"; }
function makeTextSprite(annoid,pos)
{
// Sprite
var numberTexture = new THREE.TextureLoader().load('location.png');
numberTexture.minFilter = THREE.LinearFilter;
numberTexture.magFilter = THREE.LinearFilter;
numberTexture.needsUpdate = true;
var spriteMaterial = new THREE.SpriteMaterial({
map: numberTexture,
alphaTest: 0.5,
transparent: true,
depthTest: false,
depthWrite: false
});
sprite = new THREE.Sprite(spriteMaterial);
sprite.position.copy( pos );
sprite.scale.x = sprite.scale.y = 32;
scene.add(sprite);
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate()
{
requestAnimationFrame( animate );
controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
function render() {
// Set the camera to always point to the centre of our scene, i.e. at vector 0, 0, 0
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
Thanks in Advance.
Avinash
