Three.js3D field of view scaling effect implementation method

This article mainly introduces the 3D field of view scaling effect achieved by three.js in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

First of all, let’s stop talking nonsense. What is three.js and what it does. If you know, you know. If you don’t know, go to Baidu.

The editor recommends an article for everyone: Three.js Quick Start Tutorial

Yesterday I discovered that the reduction and magnification effects of the 3D field of view in three.js can be achieved by using the far and near focus of the camera.

After zooming out:

The perspective camera is used here:

//照相机配置 var fov = 40;//拍摄距离 var near = 1;//最小范围 var far = 1000;//最大范围 var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

Here you can change the value of fov and update the camera.

camera.fov = fov;//fov是变量哦 camera.updateProjectionMatrix(); renderer.render(scene, camera);

In addition: We are all accustomed to using the mouse wheel up and down to achieve the zoom effect, so look at the code

canvas.addEventListener('mousewheel', mousewheel, false); //鼠标滑轮 function mousewheel(e) { e.preventDefault(); //e.stopPropagation(); if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 fov -= (near < fov ? 1 : 0); } if (e.wheelDelta < 0) { //当滑轮向下滚动时 fov += (fov < far ? 1 : 0); } } else if (e.detail) { //Firefox滑轮事件 if (e.detail > 0) { //当滑轮向上滚动时 fov -= 1; } if (e.detail < 0) { //当滑轮向下滚动时 fov += 1; } } camera.fov = fov; camera.updateProjectionMatrix(); renderer.render(scene, camera); //updateinfo(); }

Related recommendations:

three.js tutorial on drawing a 3D cube

##Three.js implementation of 3D map example sharing

Detailed examples of HTML5 and CSS3 to achieve 3D conversion effects

The above is the detailed content of Three.js3D field of view scaling effect implementation method. For more information, please follow other related articles on the PHP Chinese website!