Threejs - 相机? 什么是相机? 照相机?

简介: Threejs - 相机? 什么是相机? 照相机?

相机

常见的相机有两类:透视相机 和 正交相机


透视相机

成像有近大远小的感觉,最接近自然的视图(图片引用网络图片)image.png

/*一:透视相机*/    /**     * 视角 :45度     * 宽高比 :window.innerWidth / window.innerHeight     * 近平面距离 :1     * 远平面距离 :1000     */    const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000); //视角 宽高比 近平面距离    //相机位置    // camera.position.x = 10;    // camera.position.y = 10;    // camera.position.z = 10;    // camera.up.x = 0;    // camera.up.y = 0;    // camera.up.z = 0;    // camera.lookAt(0,0,0);//x,y,z    camera.position.set(10,10,10); // 相机的位置    camera.lookAt(0,0,0); // 相机看着的方向


正交相机

成像有近大远小的感觉,最接近自然的视图(图片引用网络图片)image.png

/*二:正交相机*/    /**     * OrthographicCamera( left, right, top, bottom, near, far )     * 这里的 上下左右  是偏移量     * 这里添加了一个比例,如果相机的宽度个高度的比例和渲染的比例对不上,最后渲染出来就会变形     * near 观察者到最近的裁剪面的距离     * far 观察者到最远的裁剪面的距离     */    const acspet = width / height;    const camera2 = new THREE.OrthographicCamera(-5 * acspet, 5 * acspet, 5, -5, 1, 100);    camera2.position.set(10,10,10)    camera2.lookAt(0, 0, 0);

除了上述两种常用的相机,还有 CubeCamera(立方体相机或全景相机)和 StereoCamera(3D相机),这里就不做过多的阐述,想要学习的同学可以翻看threejs 官方文档


这一节我们说到相机,经过这两节的代码熟悉 我们知道了 THREE的 三大必要条件 :scene,camera,renderer 场景中必然有物体,有物体就可能有灯光,有灯光就可能有阴影...

下一章节我们将详细阐述灯光和阴影(后面章节我们会重点学习)


相关文章
|
6月前
|
数据可视化 Linux 网络安全
零基础搭建WordPress博客全流程指南!
本指南详细介绍如何使用宝塔面板与WordPress搭建个人博客。宝塔面板提供可视化操作,简化服务器管理;WordPress拥有丰富的主题和插件生态,支持快速建站。教程涵盖准备阶段(服务器、域名、面板安装)、环境配置、站点创建、SSL证书申请、WordPress一键部署及网站配置等步骤,并推荐必备插件提升安全性和性能。零基础用户也可轻松上手,适合日均5000PV以下的博客需求,扩展性强,助你开启创作之旅。
459 7
|
边缘计算 Kubernetes Linux
KubeSphere平台安装系列之三【Linux多节点部署KubeSphere】(3/3)
KubeSphere平台安装系列之三【Linux多节点部署KubeSphere】(3/3)
288 1
|
11月前
|
人工智能 安全 BI
2024年度云治理企业成熟度发展报告解读(一)云市场发展洞察
从2023年开始,阿里云携手埃森哲每年发布《云治理企业成熟度年度发展报告》,通过数据来解读企业在云上的稳定性、安全、效率、成本等方面的发展现状,并反映各行业头部客户的技术演进趋势。该报告已成为了解中国云计算行业发展趋势的重要参考。这次,埃森哲将带来最新出炉的2024年度发展趋势报告(导读版)解读。
2024年度云治理企业成熟度发展报告解读(一)云市场发展洞察
|
10月前
|
网络安全
SSL证书为什么要收费?
SSL证书为何要收费?本文解析了五大原因:1) 认证与验证的成本;2) 技术支持和保障的必要性;3) 品牌信誉及责任的维护;4) 不同类型证书的功能差异;5) 商业运作的需求。收费确保了证书的安全性和可靠性。
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能在医疗健康领域的最新进展
人工智能在医疗健康领域的最新进展
|
12月前
|
安全 云栖大会 云计算
首批Well-Architected生态合作伙伴揭晓,齐聚2024云栖大会
在帮助企业客户上好云、用好云、管好云的道路上,阿里云始终坚持开放合作的理念,不断寻求与优质的生态伙伴深化合作,携手共建Well-Architected技术与服务方案。在今年的云栖大会上,共七家合作伙伴企业荣获首批「Well-Architected阿里云卓越架构生态合作伙伴」认证。
431 2
|
Ubuntu Linux Shell
在Linux中,如何使用shell脚本判断某个服务是否正在运行?
在Linux中,如何使用shell脚本判断某个服务是否正在运行?
|
Linux Python
Linux离线安装Python第三方库Requests
本文介绍了在无法连接外网的Linux服务器上离线安装Python第三方库Requests的过程,包括下载依赖包、解决依赖问题并成功安装的步骤。
1121 0
|
Oracle 关系型数据库 MySQL
Flink CDC产品常见问题之使用cdc-Oracle连接器报错如何解决
Flink CDC(Change Data Capture)是一个基于Apache Flink的实时数据变更捕获库,用于实现数据库的实时同步和变更流的处理;在本汇总中,我们组织了关于Flink CDC产品在实践中用户经常提出的问题及其解答,目的是辅助用户更好地理解和应用这一技术,优化实时数据处理流程。
Flink CDC产品常见问题之使用cdc-Oracle连接器报错如何解决
|
Java 测试技术 Linux
Android Studio安装超详细步骤
安装Android Studio涉及多个步骤,包括**安装JDK 1.8**,配置`JAVA_HOME`和`PATH`环境变量。然后从**官方地址**下载并安装Android Studio。启动时初始化环境,通过SDK Manager安装必要的SDK Tools。配置**ANDROID_HOME**环境变量,并在`PATH`中添加SDK相关目录。确保**adb**和**emulator**命令可执行,并可能需要将build-tools降级至兼容JDK 1.8的版本(如29)。这些步骤对于设置App自动化测试环境至关重要。