【threejs实战教程一】初识Three.js,场景Scene、相机Camera、渲染器Renderer

Three.js是一个基于WebGL的JavaScript 3D图形库,用于在浏览器中创建和显示3D内容
Three.js中最基础的三个关键要素就是场景Scene相机Camera渲染器Renderer
通俗一点理解,场景就是我们生活中一个具体的场景,比如自然环境中的一栋建筑,环境和内容构成了一个场景,相机就类比于人类的眼睛,渲染器就好比我们的中枢神经视觉处理器
那我们的一个网页端3D场景就是把人类观察自然界的场景的几个要素搬到了WEB端

场景Scene

那接下来详细介绍网页中的场景要素Scene
利用threejs创建一个三维场景

const scene = new THREE.Scene();

就是这么简单,我们实例化了一个虚拟世界的三维场景
接下来我们用我们web世界的眼睛来观察这个场景

相机Camera

Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera

const camera = new THREE.PerspectiveCamera(95, con_width / con_height, 0.1, 4000);//参数1,视场角  2.宽高比  3,近裁界面  4,远裁界面

我们这里使用的是模拟人眼的透视投影相机,遵循我们近大远小的一个规律
在这里插入图片描述
实例化中传入的参数就是我们这个视锥体中的几个参数
视场角:视场角越大,近大远小的视觉效果越明显
宽高比:宽高比我们一般以屏幕的宽高比进行设置
近裁面:近裁截面我们可以想象成我们人眼能看到的最近距离
远裁面:同样的,远裁截面我们可以想象成我们人眼能看到的最远距离

渲染器Renderer

渲染器就好比我们的相机按下咔后成像的一个过程,也好比我们人类的视觉中枢,主要是用来将成像的

const renderer = new THREE.WebGLRenderer();

我们可以调用我们渲染器的render()方法生成一张图像canvas,传入的参数就是我们的场景实例和相机实例

renderer.render(scene, camera)

接下来我们将渲染完成的图像放置到我们的网页元素中

document.body.appendChild(renderer.domElement)

完成这一步,一个最基本的三维网页你就搭建完成了!!!

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

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

相关文章

【leetcode hot 100 138】随机链表的复制

解决一:回溯 哈希表 本题要求我们对一个特殊的链表进行深拷贝。如果是普通链表,我们可以直接按照遍历的顺序创建链表节点。而本题中因为随机指针的存在,当我们拷贝节点时,「当前节点的随机指针指向的节点」可能还没创建&#xf…

木马查杀之AST初识篇

一、AST 定义 抽象语法树(Abstract Syntax Tree,AST)是源代码的一种抽象表示形式。它以树状结构描述源代码的语法构成,树上的每个节点都对应源代码中的一个语法结构或元素,像变量声明、函数调用、表达式等。通过这种结…

vscode接入DeepSeek 免费送2000 万 Tokens 解决DeepSeek无法充值问题

1. 在vscode中安装插件 Cline 2.打开硅基流动官网 3. 注册并登陆,邀请码 WpcqcXMs 4.登录后新建秘钥 5. 在vscode中配置cline (1) API Provider 选择 OpenAI Compatible ; (2) Base URL设置为 https://api.siliconflow.cn](https://api.siliconfl…

如何在保持安全/合规的同时更快地构建应用程序:DevOps 指南

随着敏捷思维方式的兴起,开发和 DevOps 团队都面临着持续的压力,他们需要以迭代方式缩短发布周期并加快部署速度,以满足不断增长的客户期望。随着这种对速度的追求越来越强烈,维护安全性和合规性标准的复杂性也随之增加。 当今 D…

Java中常见的PO、VO、DAO、BO、DO、DTO、POJO、Query类解释(通俗易懂)

文章目录 先点击收藏和点赞,切勿白嫖,感谢一丶PO(persistant object)持久对象二丶VO(value object)值对象三丶DAO(Data Access Objects) 数据访问对象接口四丶BO/DO(Business Object) 业务对象层五丶DTO(Data Transfer Object) 数据传输对象六丶POJO(Plain Old Java Objects) 简…

Websocket的基本使用

1. WebSocket WebSocket 是一种在单个TCP连接上进行全双工通信的协议,它在现代 Web 开发和网络应用中发挥着重要作用。在 WebSocket 出现之前,实现服务器与客户端实时通信主要采用轮询Polling和长轮询Long - Polling等技术。轮询是客户端定时向服务器发…

MySQL安装及基础操作

以下是基于MySQL 8.4.3版本(在Win11上)的安装: 1.mysql的获取 官网:www.mysql.com 也可以从Oracle官方进入:https://www.oracle.com/ 下载地址:https://downloads.mysql.com/archives/community/ 两者…

基于6自由度搬运机器人完成单关节伺服控制实现的详细步骤及示例代码

以下是基于6自由度搬运机器人完成单关节伺服控制实现的详细步骤及示例代码: 1. 系统概述 单关节伺服控制是指对机器人的单个关节进行精确的位置、速度或力矩控制。在6自由度搬运机器人中,每个关节通常由伺服电机驱动,通过反馈传感器&#x…

虚拟机新挂载磁盘后磁盘无法使用ssh问题 Permission denied (publickey).

在给vmware虚拟机挂载磁盘后再新磁盘目录里面使用ssh拉取代码一直报错: Permission denied (publickey). fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. manifests: 虚拟机可以添加硬盘,…

每天五分钟深度学习框架PyTorch:ResNet算法模型完成CAFIR十分类

本文重点 ResNet模型已经搭建完成了,本文我们使用ResNet来跑一下CAFIR10的数据集,看一下分类效果如何? 代码 本文总结 在之前的课程中我们对残差块以及ResNet模型进行了详细的介绍,并且我们对模型训练这些基础的数据集进行了详…

Python网络爬虫与数据采集实战——网络爬虫的基本流程

网络爬虫(Web Scraper)是用于自动化地从互联网上抓取信息的程序。它广泛应用于搜索引擎、数据采集、市场分析等领域。本文将详细探讨网络爬虫的基本流程,包括URL提取、HTTP请求与响应、数据解析与存储,以及一个实际的爬虫示例。文…

1.3 双指针专题:快乐数(medium)

1.题目链接 202. 快乐数 - 力扣(LeetCode)https://leetcode.cn/problems/happy-number/submissions/609206400/ 2.题目描述 编写⼀个算法来判断⼀个数 n 是不是快乐数。 「快乐数」 定义为: 对于⼀个正整数,每⼀次将该数替换…

系统结构知识点

1.主存和辅存以页面交换数据 2.计算机系统硬件固体软件 3.计算机系统结构概念的实质是确定计算机系统中软,硬件的界面,界面之上是软件实现的功能,界面之下是硬件和固体实现的功能 4.计算机组成是指计算机系统结构的逻辑实现。计算机实现是…

STM32 HAL库 CAN过滤器配置

之前在STM32 f407 CAN收发 基于HAL库和Cubemx配置_stm32f407can收发程序-CSDN博客这篇博文里写了一下配置CAN收发的方法,当时由于并没有使用过滤器的现实需求,所以就也没仔细研究。现在工作中确实需要用到过滤器了,有些项目中控制器和发动机E…

飞搭系列|数据迁移功能全新升级,助力用户实现高效无缝迁移!

前言 飞搭低代码平台(FeiDa,以下简称“飞搭”),为企业提供在线化、灵活的业务应用构建工具,支持高低代码融合,助力企业低门槛、高效率和低成本地快速应对市场变化,加速复杂业务场景落地。 在之…

【后端】【ubuntu】 ubuntu目录权限查看的几种方法

在Ubuntu中,有多种方式可以查看目录或文件的权限,以下为你详细介绍常见的指令及其使用方法: 1. ls -l 命令 这是最常用的查看文件和目录权限的命令,-l 选项用于以长格式列出文件和目录的详细信息,其中就包含权限信息…

深度学习与大模型基础-向量

大家好!今天我们来聊聊向量(Vector)。别被这个词吓到,其实向量在我们的生活中无处不在,只是我们没注意罢了。 1. 向量是什么? 简单来说,向量就是有大小和方向的量。比如你从家走到学校&#x…

TCP/IP原理详细解析

前言 TCP/IP是一种面向连接,可靠的传输,传输数据大小无限制的。通常情况下,系统与系统之间的http连接需要三次握手和四次挥手,这个执行过程会产生等待时间。这方面在日常开发时需要注意一下。 TCP/IP 是互联网的核心协议族&…

用Python和Docker-py打造高效容器化应用管理利器

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着容器化技术的发展,Docker已成为现代化应用部署的核心工具。然而,手动管理容器在规模化场景下效率低下。本文深入探讨如何利用Python结…

【RabbitMQ】事务

事务的简单配置及使用 配置事务管理器声明队列生产者代码测试 RabbitMQ是基于AMQP协议实现的,该协议实现了事务机制,因此RabbitMQ也支持事务机制. SpringAMQP也提供了对事务相关的操作.RabbitMQ事务允许开发者确保消息的发送和接收是原子性的&#xff0c…