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

前端之家收集整理的这篇文章主要介绍了three.js中3D视野的缩放实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

通过知道创建一个相机的相关知识点

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

透视相机(近大远小) PerspectiveCamera

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

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

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(); }

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

threejs中3D视野的缩放

文章缩放来源:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/35189.html

猜你在找的JavaScript相关文章