4. 第一个3D案例—创建3D场景

入门Three.js的第一步,就是认识场景Scene相机Camera渲染器Renderer三个基本概念,接下来,咱们通过三小节课,大家演示“第一个3D案例”完成实现过程。

学习建议:只要你能把第一个3D案例搞明白,后面学习就会非常顺利了。

本节课先完成第一个3D案例的一部分,也就是3D场景Scene的创建。

三维场景Scene

你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景,用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

物体形状:几何体Geometry

Three.js提供了各种各样的几何体API,用来表示三维物体的几何形状。

文档搜索关键词geometry你可以看到threejs提供各种几何体相关API,具体使用方法,也可以参考文档。

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 

物体外观:材质Material

如果你想定义物体的外观效果,比如颜色,就需要通过材质Material相关的API实现。

threejs不同材质渲染效果不同,下面就以threejs最简单的网格基础材质MeshBasicMaterial (opens new window)为例给大家实现一个红色材质效果。

物体:网格模型Mesh

实际生活中有各种各样的物体,在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体,比如一个箱子、一个鼠标。

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

模型位置.position

实际生活中,一个物体往往是有位置的,对于threejs而言也是一样的,你可以通过位置属性.position定义网格模型Mesh在三维场景Scene中的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);

.add()方法

在threejs中你创建了一个表示物体的虚拟对象Mesh,需要通过.add()方法,把网格模型mesh添加到三维场景scene中。

scene.add(mesh); 

后续内容

写到这里,我知道你已经迫不及待想执行代码看看渲染效果了,那么你需要看看后面两节课关于相机Camera渲染器Renderer的介绍

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

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

相关文章

SEO之网站结构优化(十四-内部链接及权重分配3)

初创企业搭建网站的朋友看1号文章;想学习云计算,怎么入门看2号文章谢谢支持: 1、我给不会敲代码又想搭建网站的人建议 2、“新手上云”能够为你开启探索云世界的第一步 博客:阿幸SEO~探索搜索排名之道 7、锚文字分布及变化 前面…

部署 Web 项目到 Linux,可以使他人也访问项目的方法

目录 一、环境配置 二、建构项目并打包 三、上传Jar包到服务器, 并运行 3.1 上传Jar包 3.2 运行 jar 包 3.3 开放端口号 四、其他问题 4.1 运行异常问题 4.2 杀掉进程 五、总结 一、环境配置 如果本地项目是SpringBoot项目,使用的数据库是MySQL&#xff…

APP 数据抓取 - Charles 抓包工具的使用(Charles 端口配置、CA 证书配置、Charles Android 模拟器配置)

前言说明 此文章是我在学习 Charles APP 抓包时编写,内容都是亲测有效,文章内容也有参考其他人,参考文章如下: Android 手机使用 charles 抓 https 请求(保姆级教程)网易 mumu 模拟器安装下载 charles 的…

计算机网络(八股文)

这里写目录标题 计算机网络一、网络分层模型1. TCP/IP四层架构和OSI七层架构⭐️⭐️⭐️⭐️⭐️2. 为什么网络要分层?⭐️⭐️⭐️3. 各层都有那些协议?⭐️⭐️⭐️⭐️ 二、HTTP【重要】1. http状态码?⭐️⭐️⭐️2. 从输入URL到页面展示…

2024年9月3日嵌入式学习

数据结构 1定义 一组用来保存一种或者多种特定关系的数据的集合(组织和存储数据) 程序的设计:将现实中大量而复杂的问题以特定的数据类型和特定的存储结构存储在内存中, 并在此基础上实现某个特定的功能的操作&am…

「Python程序设计」条件控制:if-elif-else语句

我们在进行程序设计的过程中,基本上遵循的过程是,找出变量和常量,通过python编程语言,设置变量和常量,以及考虑是否需要赋予初始值。 设计变量和常量,其实就是为了模拟和计算我们的现实世界中,…

学习笔记--Docker

安装 1.卸载旧版 首先如果系统中已经存在旧的Docker,则先卸载: yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 2.配置Docker的yum库 首先要安…

IntelliJ IDEA 自定义字体大小

常用编程软件自定义字体大全首页 文章目录 前言具体操作1. 打开设置对话框2. 设置编辑器字体3. 设置编译软件整体字体 前言 IntelliJ IDEA 自定义字体大小,统一设置为 JetBrains Mono 具体操作 【File】>【Settings...】>【Editor】>【Font】 统一设置…

C++:list篇

前言: 观看C的list前需要对链表有一些了解,如C语言的链表结构。本片仅介绍list容器中常用的接口函数概念以及使用。 list的概念: 简而言之,C的list是一个双向带哨兵位的链表容器模板 list的构造: 1.list():默认构造 2.li…

认识git和git的基本使用,本地仓库,远程仓库和克隆远程仓库

本地仓库 #安装git https://git-scm.com/download/win #git是什么?有什么用? git相当于一个版本控制系统,版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统。 作用: 记录(项目&#…

物联网(IoT)支持的小型水处理厂实时硬件在环(HIL)仿真

这篇论文的标题是《Real-Time Hardware-In-The-Loop Simulation of IoT-Enabled Mini Water Treatment Plant》,作者是 Mohamad Taib Miskon 等人,发表在 2024 年 IEEE 自动控制与智能系统国际会议(I2CACIS)上。以下是该论文的主要…

【Agent】Agent Q: Advanced Reasoning and Learning for Autonomous AI Agents

1、问题背景 传统的训练Agent方法是在静态数据集上进行监督预训练,这种方式对于要求Agent能够自主的在动态环境中可进行复杂决策的能力存在不足。例如,要求Agent在web导航等动态设置中执行复杂决策。 现有的方式是用高质量数据进行微调来增强Agent在动…

vector 常见函数

目录 一.vector 构造函数 二 . Iterators 迭代器(random access iterator) 三.Capacity: 空间 3.1 resize 3.2 reserve 四.Element access: 元素访问 方式 4.1 operator[] 类似于数组的 [] 4.2 front 和back 五.Modifiers: 六.vector 的 二…

18、Gemini-Pentest-v2

难度 中 目标 root权限 一个flag 靶机启动环境为VMware kali 192.168.152.56 靶机 192.168.152.63 信息收集 web测试 访问80端口 上面介绍了一下这个系统是一个内部系统,让员工查看他们的个人资料还可以导出为PDF 页面还有一个链接是UserList可以访问但是页面什…

ES数据写入过程

1. 写入请求 当一个写入请求(如 Index、Update 或 Delete 请求)通过REST API发送到Elasticsearch时,通常包含一个文档的内容,以及该文档的索引和ID。 2. 请求路由 协调节点:首先,请求会到达一个协调节点…

微服务日常总结

1.当我们在开发中,需要连接多个库时,可以在yml中进行配置。 当在查询的时候,跨库时,需要通过DS 注解来指定,需要yml配置需要保持一致。 2. 当我们想把数据存入到clob类型中,需要再字段 的占位符后面加上j…

Zookeeper 官方示例2-SyncPrimitive 代码解读(二)

测试命令 java jar .\ZookeeperDemo-0.0.1-SNAPSHOT.jar bTest 192.168.206.100:2181 2 1. Barrier(阻塞原语) 1.1 概念 [!quote] A barrier is a primitive that enables a group of processes to synchronize the beginning and the end of a comput…

vulhub xxe靶机

先用御剑扫描出ip然后进入网页 进入robots.txt里面会发现俩个目录然后我们进去xxe里面 进入xxe页面进行登录&#xff0c;burp抓包 然后进入重放器 可以看到关于密码和用户名的是xml,那么就可以考虑用xxe注入 <?xml version"1.0" ?> <!DOCTYPE r [ <!…

监视SQL Server 内存使用量

文章目录 I 监视SQL Server 内存使用量确定页生存期确定当前的 SQL Server 内存利用率有关当前分配内存的信息II 等待资源池 %ls (%ld)中的内存资源来执行该查询时发生超时。 请重新运行查询。原因查看服务器级别设置的超时值资源信号灯 DMV sys.dm_exec_query_resource_semaph…

IP网络广播系统(IP网络广播系统是什么及它的优势与应用)

一、引言 在当今数字化的时代&#xff0c;音频传播技术也在不断革新。IP网络广播系统作为一种先进的音频传输解决方案&#xff0c;正逐渐在各个领域发挥重要作用。那么&#xff0c;究竟什么是IP网络广播系统呢&#xff1f;它又有着怎样独特的优势和广泛的应用呢&#xff1f;本…