three.js中3D视野的缩放实现代码
更新时间：2017年11月16日 10:11:12 作者：Avenstar
这篇文章主要为大家详细介绍了three.js中3D视野的缩放实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
通过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>
文章缩放来源：three.js实现3D视野缩放效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript 2018 中即将迎来的新功能：异步生成器及更好的正则表达式。更多常规正则表达式功能大家跟随小编一起通过本文学习吧2018-09-09
在javascript中， 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解2013-10-10
javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）
密码强度是一个很普遍的功能，比较简单，主要是怎么制定这个强度规则。2010-05-05
这篇文章主要为大家详细介绍了js实现模糊匹配功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
这篇文章主要为大家详细介绍了JavaScript实现随机点名器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了javascript使用smipleChart实现简单图表的方法及示例分享,需要的朋友可以参考下2015-01-01
正则表达式是用于匹配字符串中字符组合的模式,下面这篇文章主要给大家介绍了一次JavaScript正则的诡异经历记录,文中通过实例介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了JS+CSS模拟可以无刷新显示内容的留言板,涉及javascript操作dom元素、鼠标事件及css样式的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了javascript跨浏览器的属性判断的方法,需要的朋友可以参考下2014-03-03
bootstrap框架中的网格系统就是将容器平分成12份，在使用的时候可以根据实际情况重新编译LESS/SASS源码来修改12这个数值。接下来通过本文给大家介绍Bootstrap网格系统，感兴趣的朋友一起学习2016-04-04
最新评论