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

news2024/12/24 11:15:57

入门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.coloradmin.cn/o/2103776.html

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

相关文章

幼儿园数字化探索:从入园适应到全面启智

金秋九月,全国各地幼儿园迎来开学季。幼儿园门口,一幅幅温情与成长的画面交织在一起。针对小班幼儿普遍存在的分离焦虑问题,幼儿园教师团队展现出了高度的专业性和人文关怀。据上海市普陀区汇丽幼儿园叶老师介绍,为有效缓解这一挑…

【技术分享】顶尖 GIS 技术

谈到 GIS,就不能不提到现代地理智能。是指基于 GIS、遥感和卫星定位技术的地理空间可视化、分析、决策、设计和控制的技术总称。地理智能是 GIS 区别于其他信息技术最重要的价值之一。它由地理可视化、地理决策、地理设计、地理控制四个层次组成。它们形成了一个地理…

wordpress发送邮件的方法?怎么配置功能?

wordpress发送邮件设置教程?WordPress如何配置发信? WordPress作为最受欢迎的内容管理系统之一,被广泛用于创建和管理网站。AokSend将详细介绍WordPress发送邮件的方法,并指导您如何配置这一功能,确保您的邮件发送既高…

跑步用耳机哪款好?这五款运动骨传导耳机健身人士都说好!

在无线耳机市场持续繁荣的今天,入耳式耳机以其卓越的音质体验赢得了众多用户的青睐。然而,随着健康意识的提升,长时间佩戴入耳式耳机所带来的健康隐患日益受到关注。正是在这样的背景下,骨传导耳机凭借其独特的非入耳式设计&#…

iMeta: 南医大余光创组ggtree最新文章-系统发育树存储与可视化的数据结构

Ggtree:用于系统发育树及相关数据存储与可视化的数据结构 https://onlinelibrary.wiley.com/doi/10.1002/imt2.56 SHORT COMMUNICATION ● 2022年9月28日,南方医科大学基础医学院余光创团队在iMeta在线发表了题为“Ggtree: a serialized data object f…

UOS系统下Java执行权限问题

在程序部署中,出现 /bin/java 权限不足 问题,这个问题是由于java文件无运行权限导致,通过 sudo chmod ax bin/java 项目中需要展示系统当前所有运行程序窗口界面截图功能,这个功能在实现时通过 import 截图可获取界面图片&…

【Story】国际标准组织及其相关信息(全)

目录 1. ISO(International Organization for Standardization)2. IEC(International Electrotechnical Commission)3. ITU(International Telecommunication Union)4. ISO/IEC 合作标准5. IEEE&#xff08…

使用ChatGPT7小时完成高分论文写作,AI写作避坑全攻略指南

大家好,感谢关注。我是七哥,一个在高校里不务正业,折腾学术科研AI实操的学术人。关于使用ChatGPT等AI学术科研的相关问题可以和作者七哥(yida985)交流,多多交流,相互成就,共同进步,为大家带来最酷最有效的智能AI学术科研写作攻略。经过数月爆肝,终于完成学术AI使用教…

探索前沿的WebGIS开发技术:新中地教育限时福利课程免费分享

随着新学期的到来,新中地教育特别推出了限时免费领取课程合集活动,领取截止时间9月9日。为广大GIS学习者和爱好者提供一个宝贵的学习机会。此次活动旨在鼓励更多人加入到地理信息系统(GIS)技术的学习中来,掌握前沿的We…

NYNQ u-boot+kernel+rootfs.ext4的构造

其中u-boot位与NoFlash中内核和根文件系统位于emmc中 具体描述: 基于上表,在进行内存地址分配将会事半功倍。

嵌入式在线商城

一、主线功能 1、设计与实现在线商城系统涉及到前端展示、后台管理以及数据库进行查找,功能包含登录页面、商品搜素、商品详细信息查找。 二、页面设计 2.1、商品搜索设计 2.2、商品详细信息展示设计 2.3、TCP并发服务器设计 HTTP是基于Tcp服务器搭建起来的 第一…

【Hadoop|HDFS篇】HDFS的Shell操作

1. 基本语法 hadoop fs 具体命令或者hadoop dfs 具体命令。 两个是完全相同的。 2. 命令大全 hadoop fs&#xff1a; Usage: hadoop fs [generic options][-appendToFile <localsrc> ... <dst>][-cat [-ignoreCrc] <src> ...][-checksum <src> ..…

Robotics: computational motion planning 部分笔记—— week 1 graph-based

grassfire algorithm 四周扩散性&#xff1b;从终点开始按照相邻最小距离格子移动 Dijkstra’s Algorithm 标明从起点开始的所有点的最短距离&#xff08;从上一节点继承&#xff09;&#xff0c;直到终点 A* Algorithm 带有启发性的&#xff0c;给出距离估计&#xff0c…

大数据-117 - Flink DataStream Sink 案例:写出到MySQL、写出到Kafka

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

LLM常见问题(RAG部分)

1. 什么是 Graph RAG&#xff1f; Graph RAG 是由悦数图数据提出的概念&#xff0c;是一种基于知识图谱的检索增强技术&#xff0c;通过构建图模型的知识表达&#xff0c;将实体和关系之间的联系用图的形式进行展示&#xff0c;然后利用大语言模型 LLM进行检索增强。 通过图技…

鸿蒙Harmony--状态变量更改通知--@Watch装饰器详解

风雨飘摇中&#xff0c;我心起伏&#xff0c; 万丈雄心&#xff0c;却难以施展。 天高地远&#xff0c;路途迷茫&#xff0c; 理想如星&#xff0c;却遥不可及。 千百次跌倒&#xff0c;千百次爬起&#xff0c; 在命运的手掌中&#xff0c;挣扎前行。 谁知我心中的热血滚烫&…

什么是科学碳目标(SBTI认证)

科学碳目标&#xff08;SBTI认证&#xff09;&#xff0c;这一绿色发展的璀璨明珠&#xff0c;是企业迈向可持续未来的重要里程碑。它不仅是全球环境信息研究中心(CDP)、联合国全球契约组织(UNGC)、世界资源研究所(WRI)与世界自然基金会(WWF)共同铸就的智慧结晶&#xff0c;更是…

【C++模板初阶】

文章目录 一、泛型编程二、函数模板1.函数模板概念2.函数模板格式3.函数模板的原理4 函数模板的实例化1. 隐式实例化2. 显式实例化不同类型形参传参时的处理 5.模板参数的匹配原则 三、类模板1 类模板的定义格式2 类模板的实例化 一、泛型编程 首先大家先思考一个问题&#xff…

Django form.save 方法的详细分析

在 Django 中&#xff0c;form.save() 方法是用于将表单中的数据保存到数据库的核心方法。它的功能和实现可以分为几个重要的部分&#xff0c;下面就是我对 form.save() 方法的详细分析&#xff1a; 1、问题背景 在 Django 中&#xff0c;我们经常会使用 Form 来处理用户提交的…

yum无法使用解决Could not resolve host: mirrorlist.centos.org; Unknown error

报错如下 2、问题原因 CentOS 7 的官方仓库在 2024 年 6 月 30 日之后已经停止维护。CentOS 7 的官方支持已经结束&#xff0c;部分仓库已被移至归档库。导致yum 命令无法找到所需的元数据文件。 3、解决方法 进入/etc/yum.repos.d目录下找到 CentOS-Base.repo cd /etc/yum.…