轉 threejs中3D視野的縮放實現
經過Threejs基礎學習——修改版知道建立一個相機的相關知識點javascript
var camera = new THREE.PerspectiveCamera( fov, aspect , near,far ); 視野角：fov 這裏視野角(有的地方叫拍攝距離)越大，場景中的物體越小，視野角越小，場景中的物體越大 縱橫比：aspect (3d物體的寬/高比例) 相機離視體積最近的距離：near 相機離視體積最遠的距離：far
其中fov視野角(拍攝距離)越大，場景中的物體越小。fov視野角(拍攝距離)越小，場景中的物體越大。html
透視相機(近大遠小) 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();
}
實現效果完整代碼 標註具體案例爲我的原創java
<!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/50542847canvas
相關文章
- 1. THREEJS的鼠標事件實現（中心旋轉，放大縮小等）
- 2. UITableViewCell實現3D縮放動畫
- 3. Unity 3D鼠標操做實現旋轉、縮放觀察物體
- 4. 利用threejs實現3D全景圖
- 5. Drawable轉BitMap實現Drawable的縮放
- 6. 在Delphi中實現圖片的旋轉、縮放 (轉)
- 7. Android之歡迎頁動畫（視差、3D翻轉、放大縮小）
- 8. 3D座標系中 點 的 平移、旋轉和縮放
- 9. Unity通過鼠標實現相機視角旋轉和縮放
- 10. OpenGL實現平移縮放旋轉
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Hibernate實現增刪改查 - Hibernate教程
- • ☆基於Java Instrument的Agent實現
- • C# 中 foreach 遍歷的用法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
