Hello everyone,
I am currently working on a 3D jersey customizer. When the user has say a jersey and a pants or shorts model loaded and rotates the camera down or up the camera slides out to the max distance. This is continuing to happen despite zoom being disabled, and the camera distance being set to a sphere radius (for the purpose of built in view location buttons). Strangely enough though if just a jersey or just a pants model are loaded this does not happen distance remains the same. We are using draco models over gltf to bring file size down a little more since most of our users are on iPhone6.
model loader, renderer definition, and control definitions are in this function
function objLoad(model, section) {
scene.add( camera );
var p = {};
p.config = $.extend(true, {}, _config);
var baseStyle = _.findWhere(_product[section].styles, {code: p.config[section].styleCode});
p.config[section].mid = baseStyle.styles[p.config[section].styleNo].mid;
camera.position.z = 3;
if ( section == 'top' ){
if(model == oldTopModel){
updateModel();
} else {
var loader = new THREE.DRACOLoader( manager );
scene.remove( geometryTop );
loader.load( model, function ( geometry ) {
var texture = material;
var mesh = new THREE.Mesh( geometry, texture );
geometryTop = mesh;
scene.add( geometryTop );
changeView({r:1,c:1});
});
svg = document.getElementById("svg-top-container").querySelector("svg");
var svgSize = svg.getBoundingClientRect();
canvas1.width = svgSize.width;
canvas1.height = svgSize.height;
svgData = (new XMLSerializer()).serializeToString(svg);
img1.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );
img1.onload = function() {
ctx1.drawImage(img1, 0, 0);
var texture = new THREE.Texture(canvas1);
texture.needsUpdate = true;
material = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide
, map: texture
, shininess: 25
, bumpMap: textureLoader.load( 'models/' + p.config[section].mid + '-B.jpg' )
, bumpScale: 0.005
, aoMap: textureLoader.load( 'models/' + p.config[section].mid + '-AO.jpg' )
, aoMapIntensity: 0.05
, normalMap: textureLoader.load( 'models/' + p.config[section].mid + '-N.jpg' )
//, normalScale: new THREE.Vector2( 0.5, 0.5 )
});
material.map.minFilter = THREE.LinearFilter;
animate();
};
oldTopModel = model;
}
} else {
if(model == oldBottomModel){
updateModel();
} else {
var loader = new THREE.DRACOLoader( manager );
scene.remove(geometryBottom);
loader.load( newModel, function ( geometry ) {
var texture = material2;
var mesh = new THREE.Mesh( geometry, texture );
geometryBottom = mesh;
scene.add( geometryBottom );
changeView({r:2,c:1});
});
svg2 = document.getElementById("svg-bottom-container").querySelector("svg");
var svgSize = svg2.getBoundingClientRect();
canvas2.width = svgSize.width;
canvas2.height = svgSize.height;
svgData2 = (new XMLSerializer()).serializeToString(svg2);
img2.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData2))) );
img2.onload = function() {
ctx2.drawImage(img2, 0, 0);
var texture = new THREE.Texture(canvas2);
texture.needsUpdate = true;
material2 = new THREE.MeshPhongMaterial({
side: THREE.DoubleSide
, map: texture
, shininess: 15
, normalMap: textureLoader.load( 'models/' + p.config[section].mid + '-N.jpg' )
, aoMap: textureLoader.load( 'models/' + p.config[section].mid + '-AO.jpg' )
, aoMapIntensity: 0.05
, bumpMap: textureLoader.load( 'models/' + p.config[section].mid + '-B.jpg' )
, bumpScale: 0.005
});
material2.map.minFilter = THREE.LinearFilter;
animate();
};
oldBottomModel = newModel;
}
}
renderer = new THREE.WebGLRenderer({canvas:garmentOBJ,preserveDrawingBuffer:true,antialias:true,alpha:true});
renderer.setSize( 1000, 1000, false );
renderer.setClearColor( 0xFFFFFF, 0.0 );
camera.aspect = garmentOBJ.width/garmentOBJ.height;
controls = new THREE.OrbitControls( camera, garmentOBJ );
controls.addEventListener( 'change', render );
controls.minPolarAngle = 1;
controls.maxPolarAngle = 1.8;
controls.enableZoom = false;
controls.maxDistance = 7;
controls.enablePan = false;
controls.rotateSpeed = 0.3;
camera.updateProjectionMatrix();
console.log(oldTopModel);
console.log(oldBottomModel);
window.addEventListener('resize', function(){
renderSize();
});
}
View changing buttons are in this function
function changeView(view){
var col = view.c -1;
var row = view.r;
function setInitials(view, row) {
sphericalCurrent.setFromVector3(camera.position);
switch(row) {
case '1':
case 1:
source.phi = THREE.Math.degToRad(70);
radius = 3;
center = new THREE.Vector3(0,0.7,0);
break;
case '2':
case 2:
source.phi = THREE.Math.degToRad(110);
radius = 4;
center = new THREE.Vector3(0,-1.3,0);
break;
case '3':
case 3:
source.phi = THREE.Math.degToRad(90);
radius = 7;
center = new THREE.Vector3(0,-0.8,0);
break;
}
sphericalStart.copy( sphericalCurrent );
sphericalEnd.set( radius, source.phi, dir[view] );
sphericalEnd.makeSafe();
source.phi = sphericalCurrent.phi;
source.theta = sphericalCurrent.theta;
target.phi = sphericalEnd.phi;
target.theta = sphericalEnd.theta;
}
setInitials(col, row);
switch(view.c) {
case '1':
case 1:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
controls.target = center;
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '2':
case 2:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '3':
case 3:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '4':
case 4:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '5':
case 5:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '6':
case 6:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '7':
case 7:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
case '8':
case 8:
var tween = new TWEEN.Tween( source ).to( target, 500 ).easing(TWEEN.Easing.Cubic.InOut).onUpdate(
function() {
sphericalCurrent.set( radius, source.phi, source.theta );
camera.position.setFromSpherical( sphericalCurrent );
camera.lookAt( center );
controls.target = center;
}
);
tween.start();
console.log('moving to ' + view.c);
break;
}
var bottomViewButtons = $('.view-btn-container');
bottomViewButtons.find('a').removeClass('button-selected');
bottomViewButtons.find('a[c="'+ view.c +'"]').addClass('button-selected');
var topViewButtons = $('.alt-view-btn-holder');
topViewButtons.find('a').removeClass('button-selected');
topViewButtons.find('a[r="'+ view.r +'"]').addClass('button-selected');
}
Thank you for any assistance able to be provided or any ideas on what is happening really. Sorry for any formatting issues, or including a huge amount of script I am very new to requesting help for this sort of thing.