Three.js——相机

在Three.js中,相机(Camera)是用于定义视图和渲染场景的一个关键组件。相机决定了你从哪个角度和位置观察场景中的物体,以及如何呈现这些物体。Three.js 提供了几种不同类型的相机,每种相机都有其特定的用途和特性。以下是Three.js中常用的相机类型及其特点:

常见的相机类型

PerspectiveCamera(透视相机):

模拟人类眼睛的视角,具有透视效果,远处的物体显得较小。
常用于3D场景中,以提供更真实的视觉体验。
构造函数参数:PerspectiveCamera(fov, aspect, near, far)
fov(视野):垂直视野角度,以度为单位。
aspect(纵横比):通常是画布的宽高比。
near(近剪切面):摄像机到近剪切面的距离。
far(远剪切面):摄像机到远剪切面的距离。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

OrthographicCamera(正交相机):

不具有透视效果,平行投影,远处的物体不会显得较小。
常用于2D场景或需要精确测量的场景。
构造函数参数:OrthographicCamera(left, right, top, bottom, near, far)
left、right、top、bottom:定义视景体的边界。
near(近剪切面):摄像机到近剪切面的距离。
far(远剪切面):摄像机到远剪切面的距离。

const aspect = window.innerWidth / window.innerHeight;
const camera = new THREE.OrthographicCamera(-aspect * 5, aspect * 5, 5, -5, 0.1, 1000);
camera.position.set(0, 0, 5);

相机的基本操作

设置位置:

使用 position 属性设置相机的位置。

camera.position.set(x, y, z);

看向目标:

使用 lookAt 方法设置相机的朝向。

camera.lookAt(new THREE.Vector3(0, 0, 0));

更新投影矩阵:

在修改相机参数后,调用 updateProjectionMatrix 方法更新相机的投影矩阵。

camera.updateProjectionMatrix();

创建一个简单的Three.js场景并使用透视相机

// 创建场景
const scene = new THREE.Scene();// 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);// 创建几何体和材质
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建网格对象并添加到场景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 渲染循环
function animate() {requestAnimationFrame(animate);// 旋转立方体cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染场景renderer.render(scene, camera);
}animate();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17288.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity OutLine 模型外描边效果

效果展示: 下载链接

【Rust日报】ratatui版本更新

[new ver] ratatui v0.26.3 一个构建终端用户界面的库。新版本包括: 修复Unicode 截断 bug对颜色更好地序列化更快的渲染弃用assert_buffer_eq宏暴露错误类型常量函数和类型 官网: https://ratatui.rs/ 链接: https://ratatui.rs/highlights/v0263/ [new lib] ansi2…

618电商选品爆款攻略,谁掌握谁爆单

618电商节是各大电商平台和品牌商家的重要促销节点,选品和营销策略对于销售成绩至关重要。以下是一些选品和营销攻略的要点: 一、市场分析与目标定位 1、分析当前经营类目市场的流行趋势、热门品类以及消费者需求的变化。 目前市场上商品繁多&#xf…

Java 命令执行某一个特定类

在Java中,要执行一个特定的类(通常是包含main方法的类),你需要使用java命令,并指定类的完全限定名(包括包名)。通常,这还需要你设置正确的类路径(classpath)&…

Apache Cassandra和Java:介绍如何在Java中连接和使用Apache Cassandra这款数据库

1. Apache Cassandra简介 Apache Cassandra是一个开源的分布式NoSQL数据库系统,最初由Facebook开发,用来处理大量的结构化数据 across many commodity servers. Cassandra在高可用性和无单点故障的同时,提供了出色的数据分布策略。 Apache Cassandra的主要特点: 分布式…

超详细避坑指南!OrangpiAIPro转换部署模型全流程!

目录 OrangepiPro初体验 前述: 一、硬件准备 二、安装CANN工具链(虚拟机) 三、配置模型转换环境(虚拟机) 1.安装miniconda 。 2.创建环境。 3.安装依赖包 四、转换模型 1. 查看设备号(开发板&…

一步一脚印:轻松掌握服务器硬件的奥秘

在这个信息化飞速发展的时代,无论是企业还是个人,对数据处理和存储的需求日益增长。服务器,作为互联网的基石,其重要性不言而喻。但对于大多数人来说,服务器的内部世界似乎既复杂又遥远。不过,不用担心&…

在Anaconda中修改查找和安装软件包的存储库的来源channels

以下是一些关键的步骤和命令&#xff0c;用于修改Anaconda的channels&#xff1a; 查看当前channels 使用命令 conda config --show channels 可以查看当前配置的channels。 添加新的channel 使用命令 conda config --add channels <channel_url> 来添加一个新的channel…

TIM定时器PWM输出

tim.c #include "tim.h" #include "stm32mp1xx_tim.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h"//tim4初始化(蜂鸣器) void tim4_init(){//1.使能GPIOB的外设时钟RCC->MP_AHB4ENSETR | (0x1<<1);//使能TI…

办公必备!一键拆分文件,效率翻倍的秘密

需求介绍 1、我有一张数据表“测试数据.xlsx” 2、我要根据A1“COUNTY_CODE”分类拆分成几张数据表&#xff08;这里从9657到9658共12类&#xff0c;就是拆分成12张数据表&#xff09; 3、根据12个分类&#xff0c;发送数据邮件给对应的收件人 4、收件人及抄送人、共同抄送人…

Appium系列(2)元素定位工具appium-inspector

背景 如实现移动端自动化&#xff0c;依赖任何工具时&#xff0c;都需要针对于页面中的元素进行识别&#xff0c;通过识别到指定的元素&#xff0c;对元素进行事件操作。 识别元素的工具为appium官网提供的appium-inspector。 appium-inspector下载地址 我这里是mac电脑需要下…

基于Cloudflare/CloudDNS/GitHub使用免费域名部署NewBing的AI服务

部署前准备&#xff1a; Cloudflare 账号 https://dash.cloudflare.com/login CloudDNS 账号 https://www.cloudns.net/ GitHub 账号 https://github.com/Harry-zklcdc/go-proxy-bingai Cloudflare 部署 Worker CloudDNS 获取免费二级域名 GitHub New Bing Ai 项目 https://git…

揭秘黄金分割数列:斐波那契数列的奇妙之旅

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、黄金分割数列——斐波那契数列的简介 二、实现斐波那契数列的函数 三、斐波那契数列在…

前端开发之xlsx的使用和实例,并导出多个sheet

前端开发之xlsx的使用和实例 前言效果图1、安装2、在页面中引用3、封装工具类&#xff08;excel.js&#xff09;4、在vue中使用 前言 在实现业务功能中导出是必不可少的功能&#xff0c;接下来为大家演示在导出xlsx的时候的操作 效果图 1、安装 npm install xlsx -S npm inst…

Discuz!X3.4论坛网站公安备案号怎样放到网站底部?

Discuz&#xff01;网站的工信部备案号都知道在后台——全局——站点信息——网站备案信息代码填写&#xff0c;那公安备案号要添加在哪里呢&#xff1f;并没有看到公安备案号填写栏&#xff0c;今天驰网飞飞和你分享 1&#xff09;工信部备案号和公安备案号统一填写到网站备案…

数据预处理

数据预处理 引入一.配置java , hadoop , maven的window本机环境变量1.配置2.测试是否配置成功 二.创建一个Maven项目三.导入hadoop依赖四.数据清洗1.数据清洗的java代码2.查看数据清洗后的输出结果 引入 做数据预处理 需要具备的条件 : java,hadoop,maven环境以及idea软件 一…

斯坦福2024人工智能指数报告 2

《人工智能指数报告》由斯坦福大学、AI指数指导委员会及业内众多大佬Raymond Perrault、Erik Brynjolfsson 、James Manyika、Jack Clark等人员和组织合著&#xff0c;旨在追踪、整理、提炼并可视化与人工智能&#xff08;AI&#xff09;相关各类数据&#xff0c;该报告已被大多…

静态网站部署指南

一、资源准备 1.1 服务器 # 当前的服务器,公网ip:127.0.0.1 # 通过ssh协议连接访问服务器1.2 域名 目前个人拥有的域名有: 域名所有者有效期wujinet.top个人2029-04-151.3 网站代码 纯静态网站,网站源码由笔者自行开发并提供发布部署的技术支持。 二、技术栈 2.0 源码…

linux部署rustdesk

1.拉取RustDesk镜像 sudo docker image pull rustdesk/rustdesk-server2.启动hbbs服务 sudo docker run --name hbbs -p 21115:21115 -p 21116:21116 -p 21116:21116/udp -p 21118:21118 -v pwd:/root -td --nethost rustdesk/rustdesk-server hbbs3.启动hbbr服务 sudo dock…

spring boot 之 结合aop整合日志

AOP 该切面仅用于请求日志记录&#xff0c;若有其他需求&#xff0c;在此基础上扩展即可&#xff0c;不多逼逼&#xff0c;直接上代码。 引入切面依赖 <!-- 切面 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>sp…