当前位置: 首页 > news >正文

three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera</title><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head><body><div id="myContainer"></div><script>/*var renderer = new THREE.WebGLRenderer({ //创建渲染器对象// canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布,alpha: false, // 画布是否包含alpha(透明度)缓冲区。默认值为false。premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默认为true。antialias: true, //是否执行抗锯齿。默认值为false。preserveDrawingBuffer: true, //是否保留缓冲区直到手动清除或覆盖。默认值为false。depth: true, //绘图缓冲区是否具有至少16位的 深度缓冲区。默认为true。autoClear: true, //定义渲染器是否应在渲染帧之前自动清除其输出。//以上为基础配置选项。//以下为高级进阶调渲染后期gammaFactor: 0.5, //伽马基础值gammaInput: true, //如果设置,那么它期望所有纹理和颜色都是预乘伽马。默认值为false。gammaOutput: true, //如果设置,那么它期望所有纹理和颜色需要以预乘伽马输出。默认值为false。shadowMap: null, //如果使用,它包含阴影贴图的引用。physicalCorrectLights: true, //是否使用物理上正确的照明模式。默认值为false。toneMapping: 0.5, //曝光值toneMappingExposure: 1, //色调映射的曝光级别。默认值为1。renderLists: [], //在内部用于处理场景对象渲染的排序sortObjects: true //定义渲染器是否应对对象进行排序。默认为true。})*///创建渲染器  antialias是否执行抗锯齿。默认值为false。var myRenderer = new THREE.WebGLRenderer({ antialias: true });//设置渲染尺寸大小myRenderer.setSize(window.innerWidth, window.innerHeight);//设置渲染背景色myRenderer.setClearColor('white', 1.0);var myScene = new THREE.Scene();/*正投影相机-OrthographicCamera,通过正投影相机渲染出来的物体的尺寸都一样,不会因为观察距离的远近而出现近大远小的情况var camera = new THREE.OrthographicCamera( left,right,top,bottom,near,far)left	左边界:可渲染部分的左边界right	右边界:可渲染部分的右边界top	    上边界:可渲染部分的上边界bottom	下边界:可渲染部分的下边界near	近面:基于相机位置,表示从这里开始渲染场景;一般会设置一个很小的值,默认值0.1far	    远面:基于相机位置,表示停止渲染的位置;要注意设置合适的距离,保证场景全部可见,默认值1000     *///创建正交照相机var width = window.innerWidth;var height = window.innerHeight;var k = width / height;var s = 30;  //缩放比例var myCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 3000);myCamera.position.set(-1.66, 2.21, 18.1);myCamera.lookAt(myScene.position);//创建第一个立方体var myGeometry1 = new THREE.BoxGeometry(20, 20, 20);var myMaterial1 = new THREE.MeshNormalMaterial();var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);//移动x轴位置myMesh1.translateX(-30);myScene.add(myMesh1);//更多源码 请点击下方链接下载</script>
</body></html>

正投影相机-OrthographicCamera,通过正投影相机渲染出来的物体的尺寸都一样,不会因为观察距离的远近而出现近大远小的情况

源码下载地址

three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

相关文章:

three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera</title><script src"ThreeJS/three.js"></script><script src&qu…...

Golang 搭建 WebSocket 应用(七) - 性能、可用性

在前面的文章中&#xff0c;提到过非功能性需求决定了架构。 今天我们再来考虑一下另外两个非功能性需求&#xff1a;性能和可用性。 前言 关于性能&#xff0c;其实并不是只有我们这个消息推送系统独有的问题。 对于所有的开发者而言&#xff0c;都多多少少会处理过性能相关…...

Qt 状态机框架:The State Machine Framework (一)

传送门: Qt 状态机框架:The State Machine Framework (一) Qt 状态机框架:The State Machine Framework (二) 一、什么是状态机框架 状态机框架提供了用于创建和执行状态图/表[1]的类。这些概念和表示法基于Harel的Statecharts:一种复杂系统的可视化形式,也是UML状态图的基…...

高通平台学习一

什么是QMI? Qualcom Message Interface 高通信息接口 高通平台目前都是非对称多核心&#xff0c;最主要的是AP和Modem。两个处理器怎么进行通信呢&#xff0c;我们把AP和Modem当作两个主机&#xff0c;问题就变得了很简单&#xff0c;TCP/IP协议不是一种非常成功的进程间跨主…...

Python爬虫时被封IP,该怎么解决?四大动态IP平台测评

在使用 Python 进行爬虫时&#xff0c;很有可能因为一些异常行为被封 IP&#xff0c;这主要是因为一些爬虫时产生的异常行为导致的。 在曾经的一次数据爬取的时候&#xff0c;我尝试去爬取Google地图上面的商家联系方式和地址信息做营销&#xff0c;可是很不幸&#xff0c;还只…...

积分梳状滤波器CIC原理与实现

CIC&#xff08;Cascade Intergrator Comb&#xff09;&#xff1a;级联积分梳状滤波器&#xff0c;是由积分器和梳状滤波器级联而得。滤波器系数为1&#xff0c;无需对系数进行存储&#xff0c;只有加法器、积分器和寄存器&#xff0c;资源消耗少&#xff0c;运算速率高&#…...

【项目管理】CMMI-原因分析与解决过程(CAR)

概述&#xff1a; “原因分析与解决”通过预防缺陷或者问题的引入以及识别并适当纳入优秀过程性能的原因&#xff0c;改进质量与生产率。 目录 1、文档结构 2、原因分析与解决过程域包括如下活动 3、选择需要加以分析的结果(启动条件) 4、过程活动与实践对照表 5、实例 1、…...

【设计模式】文件目录管理是组合模式吗?

组合模式是什么&#xff1f; 组合模式是一种将对象组合成树形结构以表示"部分-整体"的层次结构的设计模式。它使得用户对单个对象和组合对象的使用具有一致性。 组合模式在什么情况下使用&#xff1f; 当你发现你需要在代码中实现树形数据结构&#xff0c;让整体-部…...

利用appium自动控制移动设备并提取数据

安装appium-python-client模块并启动已安装好的环境 安装appium-python-client模块 在window的虚拟环境下执行pip install appium-python-client 启动夜神模拟器&#xff0c;进入夜神模拟器所在的安装路径的bin目录下&#xff0c;进入cmd终端&#xff0c;使用adb命令建立adb…...

day22_236二叉树最近公共祖先_235二叉搜索树(最近公共祖先_701插入一个节点_450删除一个节点)

文章目录 [236 二叉树的最近公共祖先](https://programmercarl.com/0236.%E4%BA%8C%E5%8F%89%E6%A0%91%E7%9A%84%E6%9C%80%E8%BF%91%E5%85%AC%E5%85%B1%E7%A5%96%E5%85%88.html#%E7%AE%97%E6%B3%95%E5%85%AC%E5%BC%80%E8%AF%BE)[235 二叉搜索树的最近公共祖先](https://program…...

OpenSource - 工具管理器easy-manager-tool

文章目录 功能说明运行配置环境配置启动docker部署 项目安全UI展示 Easy-Manager-Tool 打造软件行业首款集成工具&#xff0c;不管你是程序员&#xff0c;测试&#xff0c;运维等都可以使用该软件来提升自己的工作效率。 Easy-Manager-Tool 的诞生是为了解决软件行业众多参与者…...

Laravel7 + easyWeChat 实现微信公众号支付功能

注册服务号&#xff0c;需进行微信认证&#xff0c;此时需缴费 300 元/年&#xff0c;必须是认证成功的服务号才能开通微信支付。 注册微信支付商户号 1、登录 https://pay.weixin.qq.com/index.php/core/home/login?return_urlhttps%3A%2F%2Fpay.weixin.qq.com%2Findex.php%…...

Linux环境下,针对QT软件工程搭建C++Test单元测试环境的操作指南

文章目录 前言一、安装QT二、安装CTest三、使用QT生成.bdf文件四、创建CTest工程注意事项 前言 CTest是Parasoft公司出品的一款可以针对C/C源代码进行静态分析、单元测试、集成测试的测试工具。本文主要讲解如何在Linux环境下&#xff0c;搭建QT插件版的CTest测试环境。 一、…...

16k+ start 一个开源的的监控系统部署教程

安装条件 Linux或macOS系统 4GB内存 开放 33014、33174、3183端口 1.安装 1、下载源码 首先使用 git 克隆源码到本地 git clone -b main https://github.com/SigNoz/signoz.git && cd signoz/deploy/ 方式1&#xff1a;运行 install.sh 脚本一键安装 ./install.s…...

Mermaid使用教程(绘制各种图)

Mermaid使用教程&#xff08;绘制各种图&#xff09; 文章目录 Mermaid使用教程&#xff08;绘制各种图&#xff09;简介饼状图简单的例子应用案例 序列图简单案例应用案例另一个应用案例 甘特图简单案例应用案例一个更为复杂的应用案例 Git图简单案例 总结 简介 本文将主要介…...

OpenAI/ChatGPT Plus 支持的虚拟卡有哪些

最近&#xff0c;有关 OpenAI/ChatGPT Plus 需要信用卡的讨论越来越多。在这篇文章中&#xff0c;我将分享一些我在绑定信用卡过程中得到的经验和教训&#xff0c;以及 OpenAI/ChatGPT Plus 支持的卡类型。 不支持的卡 根据 OpenAI 的地区限制&#xff0c;国内和香港的卡都不…...

ARM多核调度器DSU

1. 背景 从A75开始&#xff0c;ARM提出了一个新的多核心管理系统单元&#xff0c;叫做DSU(DynamIQ Shared Unit)。DSU的核心功能是控制CPU内核&#xff0c;使其成簇Cluster使用&#xff0c;簇内每一个核心可以单独开关、调整频率/电压&#xff0c;能效表现更佳&#xff0c;甚至…...

vue解决部署文件缓存方式

问题&#xff1a;系统上线后&#xff0c;除了bug。紧急修复后&#xff0c;发现安卓正常&#xff0c;ios上海市有问题。通过debug后发现&#xff0c;ios上缓存严重。于是想到了打包文件加时间戳的方式来去除缓存。 vue2 配置打包输出文件名方式&#xff1a; const baseUrl &qu…...

游戏开发中的噪声算法

一、噪声 噪声是游戏编程的常见技术&#xff0c;广泛应用于地形生成&#xff0c;图形学等多方面。 那么为什么要引入噪声这个概念呢&#xff1f;在程序中&#xff0c;我们经常使用直接使用最简单的rand()生成随机值&#xff0c;但它的问题在于生成的随机值太“随机”了&#xf…...

CodeReview 小工具

大家开发中有没有遇到一个版本开发的非常杂&#xff0c;开发很多个项目&#xff0c;改动几周后甚至已经忘了自己改了些什么&#xff0c;领导要对代码review的时候&#xff0c;理不清楚自己改过的代码&#xff0c;只能将主要改动的大功能过一遍。这样就很容易造成review遗漏&…...

如何通过开源数据集创造商业价值:Awesome Public Datasets全攻略

如何通过开源数据集创造商业价值&#xff1a;Awesome Public Datasets全攻略 【免费下载链接】awesome-public-datasets A topic-centric list of HQ open datasets. 项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-public-datasets 在数据驱动决策的时代&a…...

别再只加Mask了!手把手教你用FlashAttention实现真正的Sliding Window Attention(附代码)

突破传统误区&#xff1a;用FlashAttention实现高效滑动窗口注意力的实战指南 在Transformer模型优化领域&#xff0c;许多开发者对滑动窗口注意力(Sliding Window Attention, SWA)存在一个普遍误解——认为只需在注意力矩阵上添加滑动窗口掩码就能实现线性复杂度。这种错误认…...

郭老师-我们为什么要爱国?

我们为什么要爱国&#xff1f; ——因为家在&#xff0c;根在&#xff0c;魂在“你可以不爱你的管家&#xff0c; 但必须爱你家的房子。”&#x1f33f; 国家如屋&#xff0c;人民为主&#xff0c; 执政者不过管家—— 而这屋&#xff0c;是我们的命脉所系。&#x1f3e0; 一、…...

巧用Google Maps与ScreenToGif:零行程数据也能轻松生成动态路线图

1. 从零开始制作动态路线图的必备工具 最近有个朋友问我&#xff1a;"想给客户展示项目选址的交通路线&#xff0c;但实地考察还没开始&#xff0c;怎么做出专业的动态路线图&#xff1f;"这让我想起自己两年前第一次做商业提案时的窘境——当时为了展示物流配送路线…...

intv_ai_mk11行业落地:教育机构课件辅助生成、HR招聘文案批量产出案例

intv_ai_mk11行业落地&#xff1a;教育机构课件辅助生成、HR招聘文案批量产出案例 1. 模型能力与行业价值 intv_ai_mk11作为一款基于Llama架构的文本生成模型&#xff0c;在教育培训和人力资源领域展现出独特的实用价值。这个开箱即用的解决方案特别适合需要快速处理大量文本…...

AD快捷键避坑指南:为什么你的自定义快捷键总是不生效?

AD快捷键避坑指南&#xff1a;为什么你的自定义快捷键总是不生效&#xff1f; 在AD&#xff08;Altium Designer&#xff09;这个功能强大的电子设计自动化软件中&#xff0c;快捷键是提升工作效率的利器。但很多用户都遇到过这样的困扰&#xff1a;明明按照教程设置了自定义快…...

别再只会用百度搜了!手把手教你用site语法精准锁定CSDN、知乎等网站的技术文章

技术搜索的艺术&#xff1a;用site语法打造高效信息获取系统 每次打开搜索引擎&#xff0c;输入技术关键词后&#xff0c;铺天盖地的结果中真正有用的内容却寥寥无几——这可能是大多数开发者都经历过的困扰。广告推广、低质量转载、过时教程混杂其中&#xff0c;而真正优质的C…...

Arcgis符号化实战:用矢量文件制作专业级统计地图(附最新配色方案)

ArcGIS符号化实战&#xff1a;用矢量文件制作专业级统计地图&#xff08;附最新配色方案&#xff09; 当你面对一叠枯燥的表格数据时&#xff0c;是否想过如何让这些数字"活"起来&#xff1f;统计地图正是将抽象数据转化为直观视觉表达的利器。作为地理信息系统领域的…...

S2-Pro自动化运维脚本生成:应对Linux服务器常见管理任务

S2-Pro自动化运维脚本生成&#xff1a;应对Linux服务器常见管理任务 1. 运维工程师的新助手 最近遇到个挺有意思的事。我们团队新来的运维小哥&#xff0c;处理服务器问题时总要先翻半天文档&#xff0c;再到处搜脚本模板。看着他手忙脚乱的样子&#xff0c;我突然想起自己刚…...

抖音无水印内容管理工具:从数据获取到价值沉淀的完整指南

抖音无水印内容管理工具&#xff1a;从数据获取到价值沉淀的完整指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾遇到这样的困境&#xff1a;精心收藏的抖音教学视频突然消失&#xff0c;重要的…...