three.js学习笔记 day1-2

1.three.js是什么

开发Web 3D 应用的js封装类

2.three.js需要怎么上手

2.1引入

<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>

2.2三要数(场景,照相机,渲染器)

首先,场景是一个容器,主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有场景,Three.js 就无法渲染任何物体。其次,摄相机决定了能够在场景中看到什么,即屏幕上哪些东西需要渲染。最后,渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子,然后调用底层 API 执行真正的场景绘制工作。

  1. 场景。在 Three.js 中,场景只有一种,就是用 THREE.Scene 来表示。它是所有不同对象的容器,可以用来保存所有图形场景的必要信息。也就是说, THREE.Scene 保存了所有对象、光源和渲染所需的其他对象。例如,你想要显示一个橙子,就需要将橙子这个对象加入到场景中。
  2. 在 Three.js 中提供了两种主要的摄像机,分别是正交投影摄像机和透视投影摄像机 (目前还支持了 VR 摄像机)。首先,使用正交投影摄像机 (OrthographicCamera) ,你看到的物体所被渲染的尺寸都是一样的,因为对象相对于摄像机的距离对渲染的结果是没有影响的。这种摄像机通常被用在二维游戏中。接着,我们再来看看透视投影摄像机 (PerspectiveCamera) ,这也是我们实验中大部分使用的类型。因为这种摄像机的效果更贴近真实世界。
  3. Three.js 除了提供基于 WebGL 的渲染器外,还有其他的渲染器,比如基于 HTML canvas 的渲染器、基于 CSS 的渲染器,基于 SVG 的渲染器。但是这些渲染器并不推荐使用,一方面它们十分消耗 CPU 资源,另一方面缺乏对一些功能(如:阴影、材质)的支持。在 Three.js 主要使用 WebGLRenderer() 渲染器,一般会经历如下三个过程:
    1. 创建渲染器;
    2. 开始渲染: render(scene, camera)
    3. 添加到 canvas 对象中;

还有一些开发过程中会用到的概念如下:

网络模型

几何体、材质、贴图、颜色这些概念属于网络模型( Mesh )的范畴中。Three.js 中几何体基本上是三维空间中的点(顶点)集和将这些点连接起来的面。例如,一个立方体有 8 个角,每个角都可以用 x,y 和 z 坐标点来定义,所以每个立方体在三维空间中都有 8 个顶点。其次,一个立方体有 6 个面,每个角有一个顶点。在 Three.js 中,每个面都是包含 3 个顶点的三角形。所以,立方体的每个面都是由两个三角形面组成的。当你使用几何体时,不需要自己定义几何体的所有顶点和面。例如,定义立方体只需要定义长、宽、高。 Three.js 会基于这些信息在正确的位置创建一个拥有 8 个顶点和 12 个三角形面的立方体。材质 ( Material )。材质就像物体的皮肤,决定了几何体的外表。例如,材质可以定义一个几何体看起来是否像金属,是否是透明的等等。在 Three.js 中,材质对象有一些共同的属性,例如:常用的基础属性(控制物体的透明度、可见性、引用),融合属性(决定物体如何与背景融合)以及高级属性(控制底层 WebGL 上下文对象渲染物体的方式)。

光源

Three.js 中的光源可以分为两种类型。

其中,基础光源是最常见的,所有这些光源都是基于 THREE.Light 对象扩展的。对于这些光源,我们需要知道的是:

  • THREE.AmbientLight 光源的颜色可以附加到场景中的每一种颜色上,通常用来柔化生硬的颜色和阴影。
  • THREE.PointLight 光源会朝所有方向发射光线,不能被用来阴影。
  • THREE.SpotLight 光源类似手电筒,它有一个锥形的光束,可以配置它随着距离的增大而逐渐变弱,并且可以生成阴影。
  • THREE.Directional 光源相当于远光的效果,比如太阳光。它的光线呈平行,其光强并不会随着与目标对象距离的增大而减弱。
  • THREE.HemisphereLight 光源,该光源考虑了天空和地面的反射,可以具备更加自然的户外效果。
  • THREE.AreaLight 不从单个点发射光线,而是从一个很大的区域发射光线。

day01代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>20-使用 Three.js 绘制正方体</title><style>body {margin: 0;}canvas {width: 100%;height: 100%;}</style></head><body><script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.js"></script><script>const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(65,window.innerWidth / window.innerHeight,0.1,1000); //使用 透视摄像机,第一个参数:视野角度,第二个参数是长宽比值,第三个参数是近面,第四个参数是远面const renderer = new THREE.WebGLRenderer(); // 定义 渲染器renderer.setSize(window.innerWidth / 2, window.innerHeight / 2); // 设置一个渲染器的大小尺寸,如果你希望保持你的应用程序的尺寸,但是以较低的分辨率来渲染,你可以在调用setSize时,给updateStyle(第三个参数)传入falsedocument.body.appendChild(renderer.domElement); //将renderer(渲染器)这个元素添加到我们的HTML文档中const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-10, 10, 0); //从位置(-10,10,0)开始照射场景spotLight.castShadow = true; // 启用阴影功能spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024); //控制阴影的精细程度spotLight.shadow.camera.far = 100;spotLight.shadow.camera.near = 0.1;scene.add(spotLight);const geometry = new THREE.BoxGeometry(2, 2, 2); // 定义一个 立方体 对象,这个对象包含了一个立方体中所有的顶点(vertices)和面(faces)const material = new THREE.MeshLambertMaterial({ color: 0xffffff }); // 定义材质,设置材质的颜色属性,值是一个十六进制const cube = new THREE.Mesh(geometry, material); // 定义一个网格,它是包含有一个几何体以及应用在此几何体上的材质的对象cube.castShadow = true;scene.add(cube); // 添加到场景中camera.position.z = 5; // 移动摄像机的 z 轴位置function renderScene() {// 渲染requestAnimationFrame(renderScene); //在每次屏幕刷新时对场景进行绘制renderer.render(scene, camera); // 渲染cube.rotation.x += 0.01;cube.rotation.y += 0.01;}renderScene();</script></body>
</html>

day02代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><metahttp-equiv="Cache-Control"content="no-cache, no-store, must-revalidate"/><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /><title>实战:魔方</title><style>div#canvas {width: 100%;height: 100%;}</style></head><body onload="main()"><div id="canvas"></div><script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script><!-- 对 app.js 进行版本控制,处理浏览器缓存,如果你在开发中频繁改动 app.js 内容,请修改app.js 的版本号 v 的值 --><script src="./app.js?v=1.0"></script></body>
</html>

 

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

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

相关文章

如何申请IP地址证书

什么是IP地址证书&#xff1f; IP地址证书是一种用于验证网站服务器身份的数字证书&#xff0c;它可以确保网站与用户之间的通信安全。与传统的域名证书不同&#xff0c;IP地址证书直接针对服务器的IP地址进行认证&#xff0c;适用于没有独立域名的网站或需要对多个域名进行统…

树莓派ubuntu22桌面配置(一)

烧录系统至树莓派 下载系统&#xff1a;https://ubuntu.com/download/raspberry-pi 选择合适的版本下载 镜像安装器安装&#xff1a;终端输入&#xff1a; sudo snap install rpi-imager 打开镜像安装器&#xff0c;按照需求选择树莓派版本与要写入的系统还有安装的u盘 方案…

Python 中的字符串匹配识别文本中的相似性

更多Python学习内容&#xff1a;ipengtao.com 字符串匹配是自然语言处理&#xff08;NLP&#xff09;和文本处理中的一个重要任务&#xff0c;它可以识别文本之间的相似性、找到相同或相似的模式&#xff0c;以及进行文本分类和信息检索等应用。本文将深入探讨Python中的字符串…

ssh 远程登录协议

一、SSH 服务 1.1 SSH 基础 SSH&#xff08;Secure Shell&#xff09;是一种安全通道协议&#xff0c;主要用来实现字符界面的远程登录、远程 复制等功能。SSH 协议对通信双方的数据传输进行了加密处理&#xff0c;其中包括用户登录时输入的用户口令&#xff0c;SSH 为建立在应…

【Java-随笔】常见异常

org.apache.ibatis.exceptions.PersistenceException org.apache.ibatis.executor.ExecutorException Executor was closed.【说明】 SqlSession被关闭了&#xff0c;检查是否使用了被关闭的SqlSession&#xff1b;在sqlsession会话关闭后&#xff0c;再使用sqlsession就会出现…

坚持刷题|翻转二叉树

坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天先刷个简单的&#xff1a;翻转二叉树 题目 226.翻转二叉树 考察点 翻转二叉树又称为镜像二叉树&#xff0c;使用Java实现翻转二叉树通常是为了考察对二叉树的基本操作和递归的理解能力 递归的理解&#xff1a; 能够理解…

vue前端开发自学基础,动态切换组件的显示

vue前端开发自学基础,动态切换组件的显示&#xff01;这个是需要借助于&#xff0c;一个官方提供的标签&#xff0c;名字叫【Component】-[代码demo:<component :is"ComponetShow"></component>]。 下面看看代码详情。 <template><h3>动态…

独孤思维:程前其实不该道歉

最近沸沸扬扬的程前事件&#xff0c;说一个不同的视角观点。 程在三个old money面前&#xff0c;表现出肚里没货&#xff0c;不懂礼貌。 甚至还对三个老一辈进行人身攻击。 事件持续发酵&#xff0c;程顶不住压力&#xff0c;诚恳道歉&#xff0c;却被网络群嘲。 程彻底丧失…

opencv多张图片实现全景拼接

最近camera项目需要用到全景拼接&#xff0c;故此查阅大量资料&#xff0c;终于将此功能应用在实际项目上&#xff0c;下面总结一下此过程中遇到的一些问题及解决方式&#xff0c;同时也会将源码附在结尾处&#xff0c;供大家参考&#xff0c;本文采用的opencv版本为3.4.12。 首…

Qt/QML编程学习之心得:小键盘keyboard(36)

小键盘对于qml应用是经常用到的,在qml里面,就如一个fileDialog也要自己画一样,小键盘keyboard也是要自己画的,对于相应的每个按键的clicked都要一一实现的。 这里有一个示例: 代码如下: import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Window 2.0 im…

Jerry每次能向前或向后走n*n步(始终不能超过初始位置1e5),q(q <= 1e5)次询问,求向前走d最少要几次

题目 思路&#xff1a;因为有走的过程不能超初始位置1e5的限制&#xff0c;所以不能直接用奇数最多两次&#xff0c;4的倍数最多两次的结论。spfa&#xff0c;平方数的dis为1&#xff0c;然后推出其他数的dis #include<bits/stdc.h> using namespace std; #define int …

Python 与批处理:数据处理、系统管理和任务调度

批处理学习 大数据篇 &#xff5c; 大数据实操 三剑客之一的批处理 目录 批处理的概念使用场景框架选择选型如何选docker 安装 hivePython 操作 hivedocker 安装 sparkpyspark操作 dataframe如果使用 JAVA 原生的&#xff0c;而不用 spark会有什么区别 批处理的概念 批处理…

文件夹名称大小写转换的方法:提高文件管理效率的关键

在计算机的文件管理中&#xff0c;文件夹名称的大小写是经常被忽视的一个细节。这个看似微不足道的细节&#xff0c;却可能影响到文件管理效率和查找速度。下面一起来看云炫文件管理器如何批量修改文件夹名称大小写转换的方法&#xff0c;提高文件管理效率。 文件夹名称字母大…

使用swift创建第一个ios程序

一、安装xcode 先到app store中下载一个Xcode app 二、创建项目 1、项目设定 创建ios app 2、工程结构 三、修改代码实现按键联动 四、运行测试

S1-08 流和消息缓冲区

流缓冲区 流缓冲区一般用在不同设备或者不同进程间的通讯&#xff0c;为了提高数据处理效率和性能&#xff0c;设置的一定大小的缓冲区&#xff0c;流缓冲区可以用来存储程序中需要处理的数据、对象、报文等信息&#xff0c;使程序对可以对这些信息进行预处理、排序、过滤、拆…

2024.1.14力扣每日一题——删除排序链表中的重复元素

2024.1.14 题目来源我的题解方法一 双指针&#xff08;快慢指针&#xff09; 题目来源 力扣每日一题&#xff1b;题序&#xff1a;83 我的题解 方法一 双指针&#xff08;快慢指针&#xff09; 因为题目中的链表已经是升序排列&#xff0c;因此使用两个指针&#xff0c;分别…

华为常用的命令——display,记得点赞收藏!

华为设备提供了多条display命令用于查看硬件部件、接口及软件的状态信息。通常这些状态信息可以为用户故障处理提供定位思路。 常用的故障信息搜集的命令如下&#xff1a; 路由器常用维护命令表 交换机常用的故障信息搜集 关注 工 仲 好&#xff1a;IT运维大本营&#xff0c;获…

海外媒体宣发:新闻媒体发稿引爆社交媒体的7个诀窍-华媒舍

社交媒体的崛起已经改变了新闻媒体的传播方式。从Facebook到Twitter&#xff0c;从Instagram到LinkedIn&#xff0c;社交媒体平台为新闻媒体提供了一个巨大且潜力无限的受众群体。要在这个竞争激烈的环境中引爆社交媒体&#xff0c;需要一些技巧和诀窍。在本篇文章中&#xff0…

信息质量要求

目录 \quad 会计信息质量要求 会计核算的信息质量要求是对会计核算提供信息的基本要求,是处理具体会计业务的基本依据&#xff0c;是在会计核算前提条件制约下进行会计核算的标准和质量要求。 \quad \quad 可靠性 也就是真实性, 要求会计记录以实际凭证为依据如实反映财务状况和…

Ventoy:打造你的万能启动 U 盘 | 开源日报 No.146

ventoy/Ventoy Stars: 54.3k License: GPL-3.0 Ventoy 是一个开源工具&#xff0c;用于创建支持 ISO/WIM/IMG/VHD(x)/EFI 文件的可启动 USB 驱动器。其主要功能包括将镜像文件复制到 USB 驱动器并进行引导、一次性复制多个镜像文件并提供引导菜单选择以及在本地磁盘中浏览和引…