转 threejs中3D视野的缩放实现Threejs基础学习——修改版

通过Threejs基础学习——修改版知道创建一个相机的相关知识点

var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );
视野角：fov 这里视野角(有的地方叫拍摄距离)越大，场景中的物体越小，视野角越小，场景中的物体越大
纵横比：aspect   (3d物体的宽/高比例)
相机离视体积最近的距离：near
相机离视体积最远的距离：far

其中fov视野角(拍摄距离)越大，场景中的物体越小。fov视野角(拍摄距离)越小，场景中的物体越大。

透视相机(近大远小)  PerspectiveCamera

//透视照相机参数设置
var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
    near = 1,//相机离视体积最近的距离
    far = 1000,//相机离视体积最远的距离
    aspect =  window.innerWidth / window.innerHeight; //纵横比
var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);

改变fov的值，并更新这个照相机

//改变fov值，并更新场景的渲染
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
 //updateinfo();

鼠标上下滑轮实现放大缩小效果  代码如下

//监听鼠标滚动事件
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;
                }
            }
            //改变fov值，并更新场景的渲染
            camera.fov = fov;
            camera.updateProjectionMatrix();
            renderer.render(scene, camera);
            //updateinfo();
}

实现效果完整代码标注具体案例为个人原创

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>threejs中3D视野的缩放</title>
        <style>
        	#canvas-frame {
        		width: 100%;
        		height: 600px;
        	}
        </style>
    </head>
    <body onload="threeStart()">
        <div id="canvas-frame" ></div>
    </body>
    <script type="text/javascript" src="./lib/three.js" ></script>
    <script type="text/javascript">
        	var renderer, 
//渲染器
        	    width = document.getElementById('canvas-frame').clientWidth, //画布宽
        	    height = document.getElementById('canvas-frame').clientHeight; //画布高
        	//照相机配置
	        var fov = 45,//拍摄距离  视野角值越大，场景中的物体越小
	            near = 1,//最小范围
	            far = 1000;//最大范围
	        //DOM对象
	        var canvas = null;
	        //初始化DOM对象    
	        function initDOM(){
	            canvas = document.getElementById("canvas-frame");
	        }
        	//初始化渲染器
        	function initThree(){
        		renderer = new THREE.WebGLRenderer({
	            	 antialias : true
	                 //canvas: document.getElementById('canvas-frame')
	            });
	            renderer.setSize(width, height);
	            renderer.setClearColor(0xFFFFFF, 1.0);
	            document.getElementById('canvas-frame').appendChild(renderer.domElement);
                    renderer.setClearColor(0xFFFFFF, 1.0);
        	}
            //初始化场景
            var scene;
            function initScene(){
            	scene = new THREE.Scene();
            }
            var camera;
            function initCamera() {  //透视相机
                camera = new THREE.PerspectiveCamera(fov,  width/height , near, far);
                camera.position.x = 150; 
                camera.position.y = 150;
                camera.position.z =250;
                camera.up.x = 0;
                camera.up.y = 1; //相机朝向--相机上方为y轴
                camera.up.z = 0;
                camera.lookAt({  //相机的中心点
                    x : 0,
                    y : 0,
                    z : 0
                });
            }
            function initLight(){
            	// light--这里使用环境光
	            //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/
	            //light.position.set(600, 1000, 800);
	           /* var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源
	            light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置
	            scene.add(light);*/
            }
            function initObject(){  //初始化对象
            	//初始化地板
            	initFloor();
            }
            function initGrid(){ //辅助网格
                var helper = new THREE.GridHelper( 1000, 50 );
                helper.setColors( 0x0000ff, 0x808080 );
                scene.add( helper );
            }
            function initFloor(){
	            //创建一个立方体
	            var geometry = new THREE.BoxGeometry(80, 20, 80);
	             for ( var i = 0; i < geometry.faces.length; i += 2 ) {
                    var hex = Math.random() * 0xffffff;
                    geometry.faces[ i ].color.setHex( hex );
                    geometry.faces[ i + 1 ].color.setHex( hex );
                }
	            var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
	            //将material材料添加到几何体geometry
	            var mesh = new THREE.Mesh(geometry, material);
	            mesh.position = new THREE.Vector3(0,0,0);
	            scene.add(mesh);
        	}
            //初始化页面加载
            function threeStart(){
            	//初始化DOM对象
            	initDOM(); 
            	//初始化渲染器
        	initThree();
        	//初始化场景
        	initScene();
        	//初始透视化相机
                initCamera();
                //初始化光源
                initLight();
                //模型对象
                initObject();
                //初始化网格辅助线
                initGrid();
                //渲染
                renderer.render(scene, camera);
                //实时动画
        	//animation();
        	//监听鼠标滚动事件
        	canvas.addEventListener('mousewheel', mousewheel, false);
            }
            function animation(){
            	//相机围绕y轴旋转，并且保持场景中的物体一直再相机的视野中
            	//实时渲染成像
        	    var timer = Date.now()*0.0001;
               
 camera.position.x = Math.cos(timer)*100;
                camera.position.z = Math.sin(timer)*100;
                camera.lookAt(scene.position);
                renderer.render(scene, camera);
                requestAnimationFrame(animation);
            }
        //鼠标滑轮-鼠标上下滑轮实现放大缩小效果
        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;
                }
            }
            console.info('camera.fov:'+camera.fov);
            console.info('camera.x:'+camera.position.x);
            console.info('camera.y:'+camera.position.y);
            console.info('camera.z:'+camera.position.z);
            //改变fov值，并更新场景的渲染
            camera.fov = fov;
            camera.updateProjectionMatrix();
            renderer.render(scene, camera);
            //updateinfo();
        }
    </script>
</html>

文章缩放来源 http://blog.csdn.net/u_9_5/article/details/50542847

WEBGL学习网（WebGLStudy.COM）专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息：
1. 本站部分资源来源于用户上传和网络，如有侵权请邮件联系站长：1218436398@qq.com！我们将尽快处理。
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源打赏售价用于赞助本站提供的服务支出（包括不限服务器、网络带宽等费用支出）！
7.欢迎加QQ群学习交流：549297468 ，或者搜索微信公众号：WebGL学习网
WEBGL学习网 » 转 threejs中3D视野的缩放实现Threejs基础学习——修改版