three.js中3D視野的縮放實現(xiàn)代碼

來源：九壹網(wǎng)

通過Threejs基礎(chǔ)學習——修改版知道創(chuàng)建一個相機的相關(guān)知識點

var camera = new THREE.PerspectiveCamera( fov, aspect , near,far );

視野角：fov 這里視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大
縱橫比：aspect (3d物體的寬/高比例)
相機離視體積最近的距離：near
相機離視體積最遠的距離：far
其中fov視野角(拍攝距離)越大，場景中的物體越小。fov視野角(拍攝距離)越小，場景中的物體越大。

透視相機(近大遠小) PerspectiveCamera

//透視照相機參數(shù)設(shè)置
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();

鼠標上下滑輪實現(xiàn)放大縮小效果代碼如下

//監(jiān)聽鼠標滾動事件
canvas.addEventListener('mousewheel', mousewheel, false);

//鼠標滑輪-鼠標上下滑輪實現(xiàn)放大縮小效果
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();
}

實現(xiàn)效果完整代碼標注具體案例為個人原創(chuàng)

<!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--這里使用環(huán)境光
 //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(){ //輔助網(wǎng)格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //創(chuàng)建一個立方體
 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();
 //初始化網(wǎng)格輔助線
 initGrid();
 //渲染
 renderer.render(scene, camera);
 //實時動畫
 //animation();
 //監(jiān)聽鼠標滾動事件
 canvas.addEventListener('mousewheel', mousewheel, false);
 }
 function animation(){
 //相機圍繞y軸旋轉(zhuǎn)，并且保持場景中的物體一直再相機的視野中
 //實時渲染成像
 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);
 }
 //鼠標滑輪-鼠標上下滑輪實現(xiàn)放大縮小效果
 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>

文章縮放來源：three.js實現(xiàn)3D視野縮放效果

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

three.js中3D視野的縮放實現(xiàn)代碼