中文字体怎么设计网站,上海徐汇龙华公司鞋子,移动网站建设流程,淮安市哪里可以做网站#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.PerspectiveCamera透…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.PerspectiveCamera透视相机1.2 ☘️THREE.OrthographicCamera正交相机 二、PerspectiveCamera透视相机和OrthographicCamera正交相机对比1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中PerspectiveCamera透视相机和OrthographicCamera正交相机进行对比亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.PerspectiveCamera透视相机
THREE.PerspectiveCamera这一投影模式被用来模拟人眼所看到的景象它是3D场景的渲染中使用得最普遍的投影模式。 构造函数 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number ) fov — 摄像机视锥体垂直视野角度 aspect — 摄像机视锥体长宽比 near — 摄像机视锥体近端面 far — 摄像机视锥体远端面 这些参数一起定义了摄像机的viewing frustum视锥体。 属性 方法
1.2 ☘️THREE.OrthographicCamera正交相机
THREE.OrthographicCamera正交相机在这种投影模式下无论物体距离相机距离远或者近在最终渲染的图片中物体的大小都保持不变。 这对于渲染2D场景或者UI元素是非常有用的。 构造函数 OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number ) left — 摄像机视锥体左侧面。 right — 摄像机视锥体右侧面。 top — 摄像机视锥体上侧面。 bottom — 摄像机视锥体下侧面。 near — 摄像机视锥体近端面。 far — 摄像机视锥体远端面。 这些参数一起定义了摄像机的viewing frustum视锥体。 属性 方法
二、PerspectiveCamera透视相机和OrthographicCamera正交相机对比
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景scene。3、初始化PerspectiveCamera透视相机camera定义相机位置 camera.position。4、初始化THREE.AmbientLight环境光源scene场景加入环境光源。创建THREE.DirectionalLight平行光源directionalLight设置平行光源位置scene场景加入平行光源。5、加载几何模型创建THREE.PlaneGeometry平面几何体planeGeometry创建THREE.MeshLambertMaterial漫反射材质planeMaterial传入参数planeGeometry和planeMaterial创建平面几何体网格对象plane设置plane投影设置plane的位置和旋转角度场景scene中加入plane。在plane上循环创建立方体网格对象cube将plane铺满具体代码参考代码样例。6、加入gui控制实现PerspectiveCamera透视相机和OrthographicCamera正交相机的切换进行效果对比。加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE htmlhtmlheadtitlePerspectiveCamera透视相机和OrthographicCamera正交相机对比/titlescript typetext/javascript src../libs/three.js/scriptscript typetext/javascript src../libs/stats.js/scriptscript typetext/javascript src../libs/dat.gui.js/scriptstylebody {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}/style
/head
bodydiv idStats-output
/div
!-- Div which will hold the Output --
div idWebGL-output
/div!-- Javascript code that runs our Three.js examples --
script typetext/javascript// once everything is loaded, we run our Three.js stuff.function init() {var stats initStats();// create a scene, that will hold all our elements such as objects, cameras and lights.var scene new THREE.Scene();// create a camera, which defines where were looking at.var camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x 120;camera.position.y 60;camera.position.z 180;// create a render and set the sizevar renderer new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);// create the ground planevar planeGeometry new THREE.PlaneGeometry(180, 180);var planeMaterial new THREE.MeshLambertMaterial({color: 0xffffff});var plane new THREE.Mesh(planeGeometry, planeMaterial);// rotate and position the planeplane.rotation.x -0.5 * Math.PI;plane.position.x 0;plane.position.y 0;plane.position.z 0;// add the plane to the scenescene.add(plane);var cubeGeometry new THREE.BoxGeometry(4, 4, 4);for (var j 0; j (planeGeometry.parameters.height / 5); j) {for (var i 0; i planeGeometry.parameters.width / 5; i) {var rnd Math.random() * 0.75 0.25;var cubeMaterial new THREE.MeshLambertMaterial();cubeMaterial.color new THREE.Color(rnd, 0, 0);var cube new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.z -((planeGeometry.parameters.height) / 2) 2 (j * 5);cube.position.x -((planeGeometry.parameters.width) / 2) 2 (i * 5);cube.position.y 2;scene.add(cube);}}var directionalLight new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(-20, 40, 60);scene.add(directionalLight);// add subtle ambient lightingvar ambientLight new THREE.AmbientLight(0x292929);scene.add(ambientLight);// add the output of the renderer to the html elementdocument.getElementById(WebGL-output).appendChild(renderer.domElement);// call the render functionvar step 0;var controls new function () {this.perspective Perspective;this.switchCamera function () {if (camera instanceof THREE.PerspectiveCamera) {camera new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);camera.position.x 120;camera.position.y 60;camera.position.z 180;camera.lookAt(scene.position);this.perspective Orthographic;} else {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x 120;camera.position.y 60;camera.position.z 180;camera.lookAt(scene.position);this.perspective Perspective;}};};var gui new dat.GUI();gui.add(controls, switchCamera);gui.add(controls, perspective).listen();// make sure that for the first time, the// camera is looking at the scenecamera.lookAt(scene.position);render();function render() {stats.update();// render using requestAnimationFramerequestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position absolute;stats.domElement.style.left 0px;stats.domElement.style.top 0px;document.getElementById(Stats-output).appendChild(stats.domElement);return stats;}}window.onload init/script
/body
/html效果如下
