How to fix zoom in and zoom out in three js? - three.js

Question

I am using three js for loading 3D model on webpage.and i used PerspectiveCamera class to see 3d model.but when i zoom out that 3d model it dispppears.how to fix that issue?
This is my code in javascript
import { GLTFLoader } from './GLTFLoader.js';
import { OrbitControls } from './OrbitControls.js';
var scene, camera, renderer, obj, newMaterial;
var object_name = []; //array to store object_name getting from api.
var exhibitor_id = localStorage.getItem('exhibitor');
console.log(exhibitor_id)
function init() {
scene = new THREE.Scene();
//camera
camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000);
// camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 700);
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
$('.model').append(renderer.domElement)
var loader = new GLTFLoader();
//filepath:it is path for scene.gltf file
loader.load(filepath, function (gltf) {
obj = gltf.scene;
obj.position.set(0, -200, 0);
obj.traverse(function (object) { object.frustumCulled = false; });
scene.add(obj);
animate();
$.ajax({
type: 'get',
url: '/3dbasetextures/1',
data: {},
success: function (response) {
for (i = 0; i < response.length; i++) {
object_name.push(response[i].object_name)
}
},
error: function (data) {
},
});
$.ajax({
type: 'get',
url: '/3dcollage/' + exhibitor_id,
data: {},
success: function (response) {
// console.log("3dtextures", data.data[0].collage_path);
var textureLoader = new THREE.TextureLoader();
console.log(response.data)
for (i = 0; i < response.data.length; i++) {
// console.log(i, response.data[i])
if (response.data[i].collage_path != null) {
var newTexture = textureLoader.load(response.data[i].collage_path);
var posterobj = obj.getObjectByName(object_name[i]);
posterobj.material.map = newTexture;
newTexture.flipY = false;
}
else {
alert("Images not creted.")
}
}
},
error: function (data) {
}
});
console.log(object_name)
});
// background
// scene.background = new THREE.Color(0xC1C1C1);
// light
// var light = new THREE.HemisphereLight(0xffffff, 0x000000, 3);
var light = new THREE.HemisphereLight(0xffffff, 0x000000, 3);
scene.add(light);
//controls
controller();
scene.add(camera);
}
function controller() {
var controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 1, 0);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.minAzimuthAngle = -0.6;
controls.maxAzimuthAngle = 1.5;
controls.minPolarAngle = controls.maxPolarAngle = 1.57079
}
function animate() {
requestAnimationFrame(animate);
// controls.update();
renderer.render(scene, camera);
}
// for implementing responsiveness
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);
init();
There is one method to fix zoom in and out but it is applicable for OrthrographicCamera.
But PerspectiveCamera is more suitable for viewing 3D model

Answer 1

For Perspective Camera, zooming is called "dollying". you can use the distance (minDistance & maxDistance) to limit the zoom/ dolly.
controls.minDistance = <your value here>;
https://threejs.org/docs/?q=CONTROL#examples/en/controls/OrbitControls