推荐设备MORE

静态网页制作

静态网页制作

行业新闻

营销型小程序定制_three.js中3D视野的缩放完成代码

日期:2021-01-11
我要分享
three.js中3D视野的缩放实现代码       这篇文章主要为大家详细介绍了three.js中3D视野的缩放实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

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

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

 !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;
 ('camera.fov:'+camera.fov);
 ('camera.x:'+camera.position.x);
 ('camera.y:'+camera.position.y);
 ('camera.z:'+camera.position.z);
 //改变fov值,并更新场景的渲染
 camera.fov = fov;
 camera.updateProjectionMatrix();
 renderer.render(scene, camera);
 //();
 /script 
 /html 

文章缩放来源:

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