threejs中3D视野的缩放实现（透视投影摄像机，鼠标事件响应功能）

最新推荐文章于 2024-06-25 17:52:54 发布

天有行-地无迹-千秋怎堪一剑扫

最新推荐文章于 2024-06-25 17:52:54 发布

阅读量8.2k

点赞数

分类专栏： three.js 文章标签： three.js

three.js 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

转载：https://www.cnblogs.com/zjf-1992/p/6146486.html

threejs中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();

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

1 2	`//监听鼠标滚动事件` `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();

}

实现效果完整代码标注具体案例为个人原创

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>

文章缩放来源 http://blog.csdn.net/u_9_5/article/details/50542847

天有行-地无迹-千秋怎堪一剑扫

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
threejs中3D视野的缩放实现（透视投影摄像机，鼠标事件响应功能）

转载：https://www.cnblogs.com/zjf-1992/p/6146486.html threejs中3D视野的缩放实现通过Threejs基础学习——修改版知道创建一个相机的相关知识点 1 2 3 4 5 var camera = new THREE.PerspectiveCamera( fov, aspe...
复制链接

扫一扫

专栏目录