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

發(fā)布時(shí)間：2020-10-06 10:22:13 來(lái)源：腳本之家閱讀：806 作者：Avenstar 欄目：web開發(fā)

通過(guò)Threejs基礎(chǔ)學(xué)習(xí)——修改版知道創(chuàng)建一個(gè)相機(jī)的相關(guān)知識(shí)點(diǎn)

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

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

透視相機(jī)(近大遠(yuǎn)小) PerspectiveCamera

//透視照相機(jī)參數(shù)設(shè)置
var fov = 45,//拍攝距離 視野角值越大，場(chǎng)景中的物體越小
 near = 1,//相機(jī)離視體積最近的距離
 far = 1000,//相機(jī)離視體積最遠(yuǎn)的距離
 aspect = window.innerWidth / window.innerHeight; //縱橫比
var camera = new THREE.PerspectiveCamera(fov,aspect, near, far);

改變fov的值，并更新這個(gè)照相機(jī)

//改變fov值，并更新場(chǎng)景的渲染
camera.fov = fov;
camera.updateProjectionMatrix();
renderer.render(scene, camera);
 //updateinfo();

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

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

//鼠標(biāo)滑輪-鼠標(biāo)上下滑輪實(shí)現(xiàn)放大縮小效果
function mousewheel(e) {
 e.preventDefault();
 //e.stopPropagation();
 if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
 if (e.wheelDelta > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí)
  fov -= (near < fov ? 1 : 0);
 }
 if (e.wheelDelta < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí)
  fov += (fov < far ? 1 : 0);
 }
 } else if (e.detail) { //Firefox滑輪事件
 if (e.detail > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí)
  fov -= 1;
 }
 if (e.detail < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí)
  fov += 1;
 }
 }
 //改變fov值，并更新場(chǎng)景的渲染
 camera.fov = fov;
 camera.updateProjectionMatrix();
 renderer.render(scene, camera);
 //updateinfo();
}

實(shí)現(xiàn)效果完整代碼標(biāo)注具體案例為個(gè)人原創(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; //畫布高
 //照相機(jī)配置
 var fov = 45,//拍攝距離 視野角值越大，場(chǎng)景中的物體越小
 near = 1,//最小范圍
 far = 1000;//最大范圍
 //DOM對(duì)象
 var canvas = null;
 //初始化DOM對(duì)象 
 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);
 }
 //初始化場(chǎng)景
 var scene;
 function initScene(){
 scene = new THREE.Scene();
 }
 var camera;
 function initCamera() { //透視相機(jī)
 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; //相機(jī)朝向--相機(jī)上方為y軸
 camera.up.z = 0;
 camera.lookAt({ //相機(jī)的中心點(diǎn)
  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時(shí)可以忽略方向和角度，只考慮光源的位置
 scene.add(light);*/
 }
 function initObject(){ //初始化對(duì)象
 //初始化地板
 initFloor();
 }
 function initGrid(){ //輔助網(wǎng)格
 var helper = new THREE.GridHelper( 1000, 50 );
 helper.setColors( 0x0000ff, 0x808080 );
 scene.add( helper );
 }
 function initFloor(){
 //創(chuàng)建一個(gè)立方體
 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);
 }
 //初始化頁(yè)面加載
 function threeStart(){
 //初始化DOM對(duì)象
 initDOM();
 //初始化渲染器
 initThree();
 //初始化場(chǎng)景
 initScene();
 //初始透視化相機(jī)
 initCamera();
 //初始化光源
 initLight();
 //模型對(duì)象
 initObject();
 //初始化網(wǎng)格輔助線
 initGrid();
 //渲染
 renderer.render(scene, camera);
 //實(shí)時(shí)動(dòng)畫
 //animation();
 //監(jiān)聽鼠標(biāo)滾動(dòng)事件
 canvas.addEventListener('mousewheel', mousewheel, false);
 }
 function animation(){
 //相機(jī)圍繞y軸旋轉(zhuǎn)，并且保持場(chǎng)景中的物體一直再相機(jī)的視野中
 //實(shí)時(shí)渲染成像
 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);
 }
 //鼠標(biāo)滑輪-鼠標(biāo)上下滑輪實(shí)現(xiàn)放大縮小效果
 function mousewheel(e) {
 e.preventDefault();
 //e.stopPropagation();
 if (e.wheelDelta) { //判斷瀏覽器IE，谷歌滑輪事件
 if (e.wheelDelta > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí)
  fov -= (near < fov ? 1 : 0);
 }
 if (e.wheelDelta < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí)
  fov += (fov < far ? 1 : 0);
 }
 } else if (e.detail) { //Firefox滑輪事件
 if (e.detail > 0) { //當(dāng)滑輪向上滾動(dòng)時(shí)
  fov -= 1;
 }
 if (e.detail < 0) { //當(dāng)滑輪向下滾動(dòng)時(shí)
  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值，并更新場(chǎng)景的渲染
 camera.fov = fov;
 camera.updateProjectionMatrix();
 renderer.render(scene, camera);
 //updateinfo();
 }
 </script>
</html>

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽