three.js中3D视野的缩放实现代码

266 阅读 0 评论 176 点赞

我是靠谱客的博主细腻冰棍，这篇文章主要介绍three.js中3D视野的缩放实现代码，现在分享给大家，希望可以做个参考。

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

复制代码

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

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

透视相机(近大远小) PerspectiveCamera

复制代码

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

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

复制代码

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

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

复制代码

1
2
//监听鼠标滚动事件
canvas.addEventListener('mousewheel', mousewheel, false);

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//鼠标滑轮-鼠标上下滑轮实现放大缩小效果
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!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>