three.js场景三元素

three.js是一个基于WebGL的轻量级、易于使用的3D库。它极大地简化了WebGL的复杂细节,降低了学习成本,同时提高了性能。

three.js的三大核心元素:

  1. 场景(Scene)

    • 场景是一个三维空间,是所有物品的容器。可以将其想象成一个空房间,里面可以放置要呈现的物体、相机、光源等。
    • 使用方法:通过new THREE.Scene()来创建一个新的场景。
/**1. 创建场景  -- 放置物体对象的环境*/
const scene = new THREE.Scene();
  1. 相机(Camera)
    相机用来确定观察位置、方向、角度。相机看到的内容,就是最终在屏幕上看到的内容。
    three.js中常用的相机类型包括:
    透视投影相机(PerspectiveCamera):模拟人眼看到的效果,近大远小。通过指定视野(Field of View,FOV)、长宽比、近端渲染距离和远端距离来创建。
    例如:new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
/** 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 长宽比0.1, // 进截面1000 // 远截面
);
// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera); // 将相机添加到场景中

在这里插入图片描述

  • 使用THREE.PerspectiveCamera构造函数创建一个新的透视相机实例。
  • 75:视野角度(Field of View,简称FOV),表示相机“看到”的角度范围。这里设置为75度。
  • window.innerWidth / window.innerHeight:相机的纵横比(Aspect Ratio),通常设置为窗口的宽度与高度的比值,以确保渲染的图像不会拉伸或压缩。
  • 0.1:近裁剪面(Near Clipping Plane),表示相机能够“看到”的最近距离。小于这个距离的物体将不会被渲染。
  • 1000:远裁剪面(Far Clipping Plane),表示相机能够“看到”的最远距离。大于这个距离的物体将不会被渲染。
  • 使用camera.position.set()方法设置相机的位置。这里的坐标是(0, 0, 10),意味着相机位于世界坐标的原点上方10个单位的位置(在Z轴上)。在3D空间中,这通常意味着相机是“俯视”场景的。
    正交投影相机(OrthographicCamera):远近都是一样的大小,三维空间中平行的线,投影到二维空间也一定是平行的。
    在程序运行过程中,可以调整相机的位置、方向、角度。
// 假设你已经有一个场景(scene)对象  // 创建正交相机  
const camera = new THREE.OrthographicCamera(  left, // 相机左平面  right, // 相机右平面  top, // 相机上平面  bottom, // 相机下平面  near, // 近裁剪面  far // 远裁剪面  
);  // 设定相机位置(对于正交相机来说,这不是必需的,但通常你需要设置它以获得期望的视角)  
camera.position.set(0, 0, 10);  // 将相机添加到场景中(注意:相机通常不直接添加到场景中,而是由渲染器使用)  
// 但在这里,如果你只是为了存储它或做其他操作,你可以这样做  
// scene.add(camera); // (这通常是不必要的)  

为了设置正交相机的参数,你需要定义六个值:

  • left:相机左平面与视图的左边界的距离。
  • right:相机右平面与视图的右边界的距离。
  • top:相机上平面与视图的上边界的距离。
  • bottom:相机下平面与视图的下边界的距离。
  • near:近裁剪面,相机能够“看到”的最近距离。
  • far:远裁剪面,相机能够“看到”的最远距离。
    在实际使用中,你可能需要根据你的场景大小和所需的视图范围来计算这些值。例如,如果你想要一个与窗口宽度和高度匹配的正交视图,你可以这样设置:
const aspectRatio = window.innerWidth / window.innerHeight;  
const width = 10; // 假设你想要的视图宽度为10个单位  
const height = width / aspectRatio; // 计算视图高度以保持相同的宽高比  const camera = new THREE.OrthographicCamera(  -width / 2, // left  width / 2, // right  height / 2, // top  -height / 2, // bottom  1, // near  1000 // far  
);

在这里插入图片描述

  1. 渲染器(Renderer)

    • 渲染器是用来通过相机把画面渲染到屏幕上的组件。
    • 使用方法:创建一个WebGL渲染器实例,设置渲染的尺寸大小,然后将渲染器的canvas内容添加到HTML文档的body中。
    • 例如:使用new THREE.WebGLRenderer()来创建一个WebGL渲染器,并通过renderer.setSize(width, height)设置渲染尺寸,最后使用document.body.appendChild(renderer.domElement)将渲染的canvas添加到页面中。
      以下是如何创建一个THREE.WebGLRenderer并将其添加到HTML文档中的基本步骤:
      1.创建渲染器实例:
      使用new THREE.WebGLRenderer()来创建一个新的WebGL渲染器实例。
      2.设置渲染器尺寸:
      使用renderer.setSize(width, height)方法来设置渲染器的宽度和高度。这通常与HTML元素的尺寸相匹配,例如元素。
      3.将渲染器的DOM元素添加到HTML文档中:
      渲染器会创建一个canvas元素,你可以通过renderer.domElement访问它。将这个canvas元素添加到HTML文档的某个位置,通常是body元素内。
      4.渲染场景:
      使用renderer.render(scene, camera)方法来渲染场景。这个方法需要两个参数:场景(Scene)和相机(Camera)。它会将相机视角下的场景内容渲染到渲染器的canvas元素上。
      下面是一个简单的示例代码:
// 假设你已经有了场景(scene)和相机(camera)// 1. 创建渲染器实例
const renderer = new THREE.WebGLRenderer();// 2. 设置渲染器尺寸(通常与canvas元素或窗口大小匹配)
renderer.setSize(window.innerWidth, window.innerHeight);// 3. 将渲染器的DOM元素添加到HTML文档中
document.body.appendChild(renderer.domElement);// 4. 渲染场景
renderer.render(scene, camera);// 注意:你可能还需要一个动画循环来持续更新和渲染场景
function animate() {requestAnimationFrame(animate); // 请求下一个动画帧// 更新场景中的物体(如果需要)// ...// 渲染场景renderer.render(scene, camera);
}
animate();// 另外,你可能还需要处理窗口大小变化事件来更新渲染器尺寸
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight; // 更新相机纵横比(如果需要)camera.updateProjectionMatrix(); // 更新投影矩阵renderer.setSize(window.innerWidth, window.innerHeight); // 更新渲染器尺寸
}

在这个示例中,animate函数使用requestAnimationFrame来创建一个动画循环,该循环在每个动画帧中更新场景并渲染它。同时,还添加了一个事件监听器来处理窗口大小变化事件,以确保渲染器的尺寸与窗口尺寸保持一致。

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

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

相关文章

安卓速度下载v1.0.5/聚合短视频解析下载

功能特色 短视频下载与高级管理 – 支持短视频下载,为您提供一系列高级视频管理功能包括视频内容提取、智能防重复技术、视频体积压缩以及视频转换成GIF图片等; 磁-力链接下载升级 – 现支持磁力链接下载,实现边下载边播放的便捷体验&#x…

构建基于LLMs混合型大模型的先进事实性问答系统架构

1.引言 传统搜索系统基于关键字匹配,缺少对用户问题理解和答案二次处理能力。本文探索使用大语言模型(Large Language Model, LLM),通过其对自然语言理解(Natural Language Understanding,NLU)…

阿里云常用的操作

阿里云常见的产品和服务 容器服务 可以查看容器日志、监控容器cpu和内存, 日志服务 SLS 可以查看所有服务的日志, Web应用防火墙 WAF 可以查看 QPS. 阿里云查看集群: 点击 “产品和服务” 中的 容器服务,可以查看 集群列表&…

linux server下人脸检测与识别服务程序的系统架构设计

一、绪论 1.1 定义 1.2 研究背景及意义 1.3 相关技术综述 二、人脸检测与识别技术概述 2.1 人脸检测原理与算法 2.2 人脸识别技术及方法 2.3 人脸识别过程简介 三、人脸检测与识别服务程序的系统架构 3.1 系统架构设计 3.2 技术实现流程 四、后续设计及经验瞎谈 4.…

解释Java中的抽象类、接口、重载和重写等核心概念

Java中的抽象类、接口、重载和重写等核心概念详解 在Java编程中,抽象类、接口、重载和重写是面向对象编程的四个核心概念。这些概念不仅构成了Java编程语言的基础,也是面试官在面试过程中经常考察的要点。下面,我将从技术难点、面试官关注点…

字符串

对应练习题&#xff1a;力扣平台 14. 最长公共前缀 class Solution { public:string longestCommonPrefix(vector<string>& strs) {string strs1strs[0];//初始前缀字符串for (int i 1; i < strs.size(); i) {while(strs[i].find(strs1)!0)//遍历找到共同最长前…

第五节:如何使用其他注解方式从IOC中获取bean(自学Spring boot 3.x的第一天)

大家好&#xff0c;我是网创有方&#xff0c;上节我们实践了通过Bean方式声明Bean配置。咱们这节通过Component和ComponentScan方式实现一个同样功能。这节实现的效果是从IOC中加载Bean对象&#xff0c;并且将Bean的属性打印到控制台。 第一步&#xff1a;创建pojo实体类studen…

Android进阶之路 - DialogFragment有没有了解的必要?

几个月前写到了弹框业务&#xff0c;以前经常用Dialog、ButtomDialog 、popupWindow 组件&#xff0c;为了契合项目结构参考了原有的 DialogFragment 组件&#xff0c;特此予以记录 我一般在项目中写弹框组件的话&#xff0c;主要用到 alertDialog、popupWindow 组件&#xff0…

面试经验分享 | 渗透测试工程师(实习岗)

所面试的公司&#xff1a;某安全厂商 所在城市&#xff1a;南京 面试职位&#xff1a;渗透测试工程师实习岗位 面试过程&#xff1a; 腾讯会议&#xff08;视频&#xff09; 面试过程&#xff1a;整体流程就是自我介绍加上一些问题问题balabalabala。。。由于面的岗位是渗透…

用GPT-4纠错GPT-4 OpenAI推出CriticGPT模型

根据OpenAI周四&#xff08;6月27日&#xff09;发布的新闻稿&#xff0c;该公司新推出了一个基于GPT-4的模型——CriticGPT&#xff0c;用于捕获ChatGPT代码输出中的错误。CriticGPT的作用相当于让人们用GPT-4来查找GPT-4的错误。该模型可以对ChatGPT响应结果做出批评评论&…

有没有能用蓝牙的游泳耳机,性能超凡的4大游泳耳机力荐

在现代科技的推动下&#xff0c;越来越多具备蓝牙功能的游泳耳机正在改变游泳爱好者的体验方式。这些创新产品不仅在防水性能上有了显著提升&#xff0c;还能让您在水中享受到高质量的音乐。然而&#xff0c;选择一款优秀的蓝牙游泳耳机并不简单&#xff0c;需要考虑到防水等级…

【秋招突围】2024届秋招笔试-科大笔试题-01-三语言题解(Java/Cpp/Python)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系计划跟新各公司春秋招的笔试题 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; 文章目录 &#x1f4d6…

基于SSM的大学生家教管理系统【附源码+LW】

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本大学生家教平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&a…

c语言--指针

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理c语言中指针的相关知识点。 指针概念 指针存储的就是数据的地址。 直观理解: 李华家是北洋路130号1单元101 用变量处理数据: 我们去李华家拿数据。 用指针处理数据: 我们去北洋路130号1单元101拿数据…

Paragon NTFS与Tuxera NTFS有何区别 Mac NTFS 磁盘读写工具选哪个好

macOS系统虽然以稳定、安全系数高等优点著称&#xff0c;但因其封闭性&#xff0c;不能对NTFS格式磁盘写入数据常被人们诟病。优质的解决方案是使用磁盘管理软件Paragon NTFS for Mac&#xff08;点击获取激活码&#xff09;和Tuxera NTFS&#xff08;点击获取激活码&#xff0…

2024年科技型中小企业申报指南

01 什么是科技型中小企业 科技型中小企业是指依托一定数量的科技人员从事科学技术研究开发活动&#xff0c;取得自主知识产权并将其转化为高新技术产品或服务&#xff0c;从而实现可持续发展的中小企。 02 申请“科技型中小企业”的好处 一、政策扶持与优惠 1.税收减免&…

Vue2组件传值(通信)的方式

1.父传后代 ( 后代拿到了父的数据 ) 1. 父组件引入子组件&#xff0c;绑定数据 <List :str1‘str1’></List> 子组件通过props来接收props:{str1:{type:String,default:}}***这种方式父传子很方便&#xff0c;但是父传给孙子辈分的组件就很麻烦&#xff08;父》子…

《GPT模型揭秘:数据驱动AI的核心概念与GPT系列对比分析》

DS&#xff1a;《What Are the Data-Centric AI Concepts behind GPT Models?通过三个数据为中心的人工智能目标(训练数据开发、推理数据开发和数据维护)揭示GPT模型背后的数据为中心的人工智能概念》解读—GPT-1/GPT-2/GPT-3系列对比(语料大小参数量解码层数上下文长度隐藏层…

技术学习的奥秘与乐趣

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 在当今快速发展的科技时代&#xff0c;学习技术已经成为了许多人追求的重要目标之一。无论是为了个人发展&#…

并发编程基础概念

相关概念 并行 并行是指同一个时刻&#xff0c;多个任务同时进行。只有在多核CPU下才会发生。 并发 并发是指单个CPU在不同任务之间来换切换工作&#xff0c;但是同一时刻只有一个任务在工作。由于CPU的切换速度很快&#xff0c;给人的感受是多个任务在一起运行。 串行 串行…