【three.js】场景搭建

three.js由场景、相机、渲染器、灯光、控制器等几个要素组成。每个要素都有不同的类型,例如光照有太阳光、环境光、半球光等等。每种光照都有不同的属性可以进行配置。

场景

场景(scene):场景是所有物体的容器,如果要显示一个物体,就需要将物体对象加入场景中。

场景是一个三维空间,是存放所有物品的容器,可以把场景想象成一个空房间,房间里面可以防止要呈现的物体、相机、光源等。

let scene = new THREE.Scene();

相机

相机(camera):相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能看到不同的景色。

let camera = new THREE.PerspectiveCamera(75, 
window.innerWidth/window.innerHeight, 0.1, 1000)

three.js中有两种常用的相机:【透视投影相机(perspectiveCamera)和正交投影相机(OrthographicCamera )】

透视投影相机(perspectiveCamera)!

特点:透视相机的效果是模拟人眼看到的效果,跟人眼看到的世界是一样的,近大远小

用途:大部分场景都适合使用透视投影相机,因为跟真实世界的观测效果一样;

创建透视投影相机:let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

参数介绍
fov视野:表示摄像机能看到的视野。推荐默认值50
aspect指定渲染结果水平方向和竖直方向长度的比值,推荐默认值为窗口的宽高比,即window.innerWidth/window.innerHeight,如果比例设置的不对,会发现渲染出来的画面有拉伸或者压缩的感觉。
near近端渲染距离:指定从距离摄像机多近的位置开始渲染,推荐默认值0.1
far远端距离:指定摄像机从它所在的位置最远能看到多远,太小场景中的远处不会被渲染,太大会浪费资源影响性能,推荐默认值1000。

近端渲染距离和远端距离:这两个是设置相机可以看到的场景内容的范围,只有离相机的距离大于near值,小于far值,且在相机的可视角度之内,才能被相机投影到。

let camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 创建透视投影相机// 设置相机位置
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 10;
// 以上设置相机位置可以简写为:
camera.position.set(5, 10, 10);

正交投影相机(OrthographicCamera)

特点:正交投影则远近都是一样的大小,三维空间中平行的线,投影到二维空间也一定是平行的。

用途:一般是用在制图、建模等方面,方便观察模型之间的大小比例。

创建正交投影相机:let camera = new THREE.OrthographicCamera( left,right, top,bottom, near, far )

参数介绍
left可被渲染空间的左端面
right可被渲染空间的右端面
top可被渲染空间的上端面
bottom可被渲染空间的下端面
near基于相机所在位置,可被渲染空间的近端面
far基于相机所在位置,可被渲染空间的远端面

以上6个参数规定了相机视景体的左、右、上、下、前、后六个面的位置,这六个投影面围成的区域就是相机投影的可见区域。在三维空间内,只有在这个区域内的物体才会被相机看到。

let camera = new THREE.OrthographicCamera(-2, 2, 1, -1, 1, 10); 
// 创建正交投影相机// 设置相机位置
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 10;
// 以上设置相机位置可以简写为:
camera.position.set(5, 10, 10);

正交投影和透视投影对比

正交投影,物体反射的光平行投射到屏幕上,其大小始终不变,所以远近的物体大小一样。

透视投影,符合我们平时看东西的感觉,近大远小。

渲染器

渲染器(renderder) :渲染器决定了渲染的结果应该花在页面的什么元素上面

Three.js中有很多种类的渲染器,例如webGLRenderer、canvasRenderer、SVGRenderer,通常使用的是WebGLRenderer渲染器。

创建WebGLRenderer渲染器:var renderer = new THERR.WebGLRenderer();

创建完渲染器后,需要调用render方法将之前创建好的场景和相机相结合从而渲染出来,即调用渲染器的render方法:renderer.render(scene,camera)

let renderer = new THREE.WebGLRenderer(); 
// 创建一个 WebGL 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); 
// 通过调用 setSize() 方法设置渲染的长宽(设置渲染器为全屏)
document.body.appendChild(renderer.domElement); 
// 将渲染结果展示到页面上
renderer.render(scene, camera); 
// 结合场景和相机进行渲染,即用摄像机拍下此刻的场景(最后一步)

说明:

setSize() 方法设置渲染的长宽。

renderer 的 domElement 元素,表示渲染器中的画布,所有的渲染都是画在 domElement 上,所以这里的 appendChild 表示将这个 domElement 挂接在 body 下面,这样渲染的结果就能够在页面中显示了。

render()方法中传递我们的场景和相机,相当于传递了一张由相机拍摄场景得到的一张底片,它将图像渲染到我们的画布中。

灯光

灯光(light):模拟显示环境中的光照

let directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

控制器

控制器(controls):对3D场景进行旋转、放大缩小等操作

let controls = new OrbitControls(camera, renderer.domElement);

three.js基本要素:

物体(拍摄对象):几何体模型、材质、网格

光源

码字不易,各位大佬点点赞呗。

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

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

相关文章

CSS 图片廊:网页设计的艺术与技巧

CSS 图片廊:网页设计的艺术与技巧 引言 在网页设计中,图片廊是一个重要的组成部分,它能够以视觉吸引的方式展示图片集合,增强用户的浏览体验。CSS(层叠样式表)作为网页设计的主要语言之一,提供…

Android测试ABD环境及语句

1、什么是adb ADB 全称为 Android Debug Bridge,起到调试桥的作用,是一个客户端-服务器端程序。其中客户端是用来操作的电脑,服务端是 Android 设备。 ADB 也是 Android SDK 中的一个工具,可以直接操作管理 Android 模拟器或者真…

库伦值自动化功耗测试工具

1. 功能介绍 PlatformPower工具可以自动化测试不同场景的功耗电流,并可导出为excel文件便于测试结果分析查看。测试同时便于后续根据需求拓展其他自动化测试用例。 主要原理:基于文件节点 coulomb_count 实现,计算公式:电流&…

creating-custom-commands-in-flask

在烧瓶中创建自定义命令 原文:https://www . geesforgeks . org/creating-custom-commands-in-flask/ 本文围绕如何在 flask 中创建自定义命令展开。每次使用烧瓶运行运行烧瓶时,运行实际上是一个命令,在烧瓶配置文件中启动一个名为运行的函数。同样&…

机器学习基础-机器学习的常用学习方法

半监督学习的概念 少量有标签样本和大量有标签样本进行学习;这种方法旨在利用未标注数据中的结构信息来提高模型性能,尤其是在标注数据获取成本高昂或困难的情况下。 规则学习的概念 基本概念 机器学习里的规则 若......则...... 解释:如果…

深入解析希尔排序:原理、实现与优化

目录 一、希尔排序的基本思想 二、希尔排序的时间复杂度 三、优化与改进 希尔排序(Shell Sort)是一种基于插入排序的排序算法,其改进在于通过分组(也叫增量)的方式来减少数据移动的次数,从而提高了排序的…

SpringMVC的消息转换器

SpringMVC的消息转换器(Message Converter)是Spring框架中用于处理HTTP请求和响应体与Java对象之间转换的组件。它们使得开发人员可以轻松地将HTTP请求的数据映射到方法参数,并将返回的对象转换为HTTP响应。 工作原理 当一个HTTP请求到达Spr…

python使用AprilTag 3

python使用AprilTag 3 最近想测试一下AprilTag精度,看看能不能用的上。 1 安装 法1:github源码编译安装(放弃) 一开始找到了AprilTag 3的官方github网址https://github.com/AprilRobotics/apriltag,但是按着操作下…

小程序学习07—— uniapp组件通信props和$emit和插槽语法

目录 一 父组件向子组件传递消息 1.1 props (a)传递静态或动态的 Prop (b)单向数据流 二 子组件通知父组件 2.1 $emit (a)定义自定义事件 (b)绑定自定义事件 三 插槽语法…

C# 设计模式(创建型模式):工厂模式

C# 设计模式(创建型模式):工厂模式 引言 在软件设计中,创建型模式是用来创建对象的设计模式,它们帮助我们将对象的创建过程从业务逻辑中分离出来,减少代码的重复性和耦合度。工厂模式作为创建型设计模式之…

智能水文:ChatGPT等大语言模型如何提升水资源分析和模型优化的效率

大语言模型与水文水资源领域的融合具有多种具体应用,以下是一些主要的应用实例: 1、时间序列水文数据自动化处理及机器学习模型: ●自动分析流量或降雨量的异常值 ●参数估计,例如PIII型曲线的参数 ●自动分析降雨频率及重现期 ●…

Android SPRD 工模测试修改

设备有两颗led灯,工模测试需全亮 vendor/sprd/proprietories-source/factorytest/testitem/led.cpp -13,6 13,10 typedef enum{#define LED_BLUE "/sys/class/leds/blue/brightness"#define LED_RED …

nodeJS下npm和yarn的关系和区别详解

一、命令对应关系 1. 初始化项目 操作npm 命令Yarn 命令初始化项目npm inityarn init跳过提问快速初始化npm init -yyarn init -y 2. 安装依赖 操作npm 命令Yarn 命令安装项目所有依赖npm installyarn install添加依赖npm install <package-name>yarn add <package…

C# 设计模式:装饰器模式与代理模式的区别

C# 设计模式&#xff1a;装饰器模式与代理模式的区别 在软件设计中&#xff0c;装饰器模式&#xff08;Decorator Pattern&#xff09;和代理模式&#xff08;Proxy Pattern&#xff09;都是结构型设计模式&#xff0c;它们的目的都是通过对对象进行包装&#xff0c;来增加或改…

ES中查询中参数的解析

目录 query中参数match参数match_allmatch:匹配指定参数match_phrase query中其他的参数query_stringprefix前缀查询:wildcard通配符查询:range范围查询&#xff1a;fuzzy 查询: 组合查询bool参数mustmust_notshould条件 其他参数 query中参数 词条查询term:它仅匹配在给定字段…

纵览!报表控件 Stimulsoft Reports、Dashboards 和 Forms 2025.1 新版本发布!

Stimulsoft 2025.1 新版发布&#xff0c;旨在增强您创建报告、仪表板和 PDF 表单的体验&#xff01;此最新版本为您带来了许多改进和新功能&#xff0c;使数据处理更加高效和用户友好。亮点包括对 .NET 9 的支持、Microsoft Analysis Services 的新数据适配器、发布向导中适用于…

慧集通iPaaS集成平台低代码训练-实践篇

练习使用帐号信息&#xff1a; 1.致远A8平台&#xff08;请自行准备测试环境&#xff09; 慧集通连接器配置相关信息 访问地址&#xff1a; rest账号&#xff1a;rest rest密码&#xff1a; OA账号&#xff1a; 2.云星空&#xff08;请自行准备测试环境&#xff09; 连接…

Unity Pico 应用失去焦点后,追踪功能被禁用(原生 UI 界面弹出)

在 Unity 中&#xff0c;如果正在使用新的输入系统&#xff0c;任何触发 OnApplicationFocus(false) 的事件都可能会禁用追踪功能。 负责此功能的组件是附加到主摄像机的 "Tracked Pose Driver (Input System)" 组件。由于非输入系统版本不是新输入系统的一部分&…

【运维工具】Ansible一款好用的自动化工具

Ansible一款好用的自动化工具 概述一、基本概念与特点二、核心组件三、主要功能与应用场景四、优缺点 如何使用一、安装Ansible二、配置Ansible三、使用Ansible四、注意事项 Playbook语法详解一、YAML文件的基本结构二、Playbook的主要组成部分三、Playbook示例四、注意事项 概…

使用CSS 和 JavaScript 实现鼠标悬停时图片放大、缩小和抖动

我们可以通过 CSS 和 JavaScript 来实现鼠标悬停时图片放大、缩小和抖动的效果。以下是一个简单的实现方式&#xff1a; 1.HTML 结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewp…