【初体验threejs】【学习】【笔记】hello，正方体！

前言

为了满足工作需求，我已着手学习Three.js，并决定详细记录这一学习过程。在此旅程中，如果出现理解偏差或有其他更佳的学习方法，请大家不吝赐教，在评论区给予指正或分享您的宝贵建议，我将不胜感激。

搭建一个threejs项目

  1. 创建文件夹hello-cube
mkdir hello-cube
cd ./hello-cube
  1. 在根目录下创建src文件夹并在该文件夹内创建main.js(空文件)
mkdir src
  1. 初始化项目
npm init -y
  1. 使用npm install安装three库和构建工具webpack，webpack相关插件
npm install @types/three three
npm install html-webpack-plugin webpack webpack-cli webpack-dev-server -D
  1. 在根目录中创建index.html文件如下
<!DOCTYPE html>
<html><head><title>hello，正方体！</title><meta name="viewport" content="width=device-width, initial-scale=1" /><meta charset="UTF-8" /></head><style>#scene-container {width: 100vw;height: 100vh;}</style><body><div id="scene-container"></div></body>
</html>
  1. 在根目录创建webpack.config.js文件如下
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {mode: "development",entry: "./src/main.js",output: {filename: "main.js",path: path.resolve(__dirname, "dist"),clean: true,},devServer: {static: "./dist",},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "index.html"),}),],
};
  1. 在package.json中scripts添加指令
"scripts": {"start": "webpack serve --open",
}

小结
至此项目已搭建完成，大家可以安装自己的方式搭建。如果是安装本文搭建现在可以终端执行npm run start启动看看。只要webpack能构建成功就可以了。

场景、相机和渲染器

  1. 场景（scene）
    场景是我们能看到的一切的载体。
    场景空间是一个 3D 笛卡尔坐标系。场景的中心是点(0,0,0)，也称为坐标系的原点。每当我们创建一个新对象并将其添加到我们的场景中时，它将被放置在原点，并且每当我们移动它时，是在这个坐标系中移动它。
import { Scene } from 'three';
const scene = new Scene;
  1. 相机（camera）
    查看场景
    对我们来说，最重要的投影类型是透视投影，它旨在匹配我们的眼睛看待世界的方式。要使用透视投影查看场景，我们使用 PerspectiveCamera。
import { PerspectiveCamera } from 'three';
const fov = 35; //视野： 相机的视野有多宽，以度为单位。
const aspect = container.clientWidth / container.clientHeight; //纵横比： 场景的宽度与高度的比率。
const near = 0.1; // 近剪裁平面：任何比这更靠近相机的东西都是不可见的。
const far = 100; // 远剪裁平面：任何比这更远离相机的东西都是不可见的。
const camera = new PerspectiveCamera(fov, aspect, near, far);

这四个参数一起用于创建一个有边界的空间区域，称之为视锥体。

我们传递给构造函数的四个参数PerspectiveCamera分别创建了截锥体的一个方面：

  1. 视野定义了平截头体扩展的角度。小视场会产生窄截锥体，而宽视场会产生宽截锥体。
  2. 纵横比将平截头体与场景容器元素相匹配。当我们将其设置为容器的宽度除以其高度时，我们确保可以将类似矩形的平截头体完美的扩展到容器中。如果我们弄错了这个值，场景看起来会伸展和模糊。
  3. 近剪切平面定义了平截头体的小端（最接近相机的点）。
  4. 远剪裁平面定义了平截头体的大端（距相机最远）。
    渲染器不会绘制场景中不在平截头体内的任何对象。如果一个物体部分在平截头体体内部，部分在平截头体外部，则外部的部分将被切掉（剪掉）。
  1. 渲染器（renderer）
    渲染
    渲染器，通过相机观察并将看到的东西非常快的绘制到一个canvas中去。 我们把这个过程叫做渲染，得到的图片就是一个渲染效果图。使用 WebGLRenderer —— 它使用 WebGL2来渲染我们的场景 （如果可用），如果不可用则回退到WebGL V1。
import { WebGLRenderer } from 'three';
const renderer = new WebGLRenderer();

小结
场景、相机和渲染器一起为我们提供了 three.js 应用程序的基本脚手架。

网格 Mesh

网格是 3D 计算机图形学中最常见的可见对象，用于显示各种 3D 对象——猫、狗、人类、树木、建筑物、花卉和山脉都可以使用网格来表示。

import { Mesh } from 'three';
const mesh = new Mesh(geometry, material);

Mesh构造函数有两个参数：几何和材质。在创建网格之前，我们需要创建这两个。

几何体

几何体定义了网格的形状。
需要一个立方缓冲几何体，将使用 BoxGeometry。

import { BoxGeometry } from 'three';
const geometry = new BoxGeometry(2, 2, 2);
材料

几何体定义了形状，材质定义了网格表面的外观。
使用 MeshBasicMaterial ，这是可用的最简单的材质，更重要的是，不需在场景中添加任何灯光。

import { MeshBasicMaterial } from 'three';
const material = new MeshBasicMaterial();

开始编写

  1. 初始设置
    从three引入相关的类，并获取容器。
    在main.js添加内容如下：
import {BoxGeometry, // 立方缓冲几何体Color, // 颜色Mesh, // 网格MeshBasicMaterial, // 基础网格材质Scene, // 场景PerspectiveCamera, // 透视相机WebGLRenderer, // WebGL Render 用WebGL渲染出你精心制作的场景。
} from "three";
const container = document.querySelector("#scene-container");
  1. 创建场景
    main.js: 创建场景并将背景设置为天蓝色
const scene = new Scene();
scene.background = new Color("skyblue");
  1. 创建相机
    main.js: 创建相机并设置相机位置
// 创建相机
const fov = 35; // 视野： 相机的视野有多宽，以度为单位。
const aspect = container.clientWidth / container.clientHeight; // 纵横比： 场景的宽度与高度的比率。
const near = 0.1; // 近剪裁平面：任何比这更靠近相机的东西都是不可见的。
const far = 100; // 远剪裁平面：任何比这更远离相机的东西都是不可见的。
const camera = new PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 0, 10); // 设置相机位置
  1. 创建可见对象
    main.js:创建几何体
// 创建几何体
const geometry = new BoxGeometry(2, 2, 2);

main.js:创建材质

// 创建材质
const material = new MeshBasicMaterial();

此材质还会忽略场景中的任何灯光，并根据材质的颜色和其他设置为网格着色（阴影）。

如果使用除MeshBasicMaterial之外的几乎任何其他材质类型，将无法看到任何东西，因为场景完全处于黑暗中。就像在现实世界中一样，我们通常需要光线才能看到场景中的事物。MeshBasicMaterial是该规则的一个例外。

main.js:创建网格

// 创建网格
const cube = new Mesh(geometry, material);

main.js: 将网格添加到场景中

// 将网格添加到场景中
scene.add(cube);
  1. 创建渲染器
    main.js: 创建渲染器，设置渲染器大小，设置设备像素大小，将canvas元素添加到我们的页面
// 创建渲染器
const renderer = new WebGLRenderer();
// 设置渲染器大小
renderer.setSize(container.clientWidth, container.clientHeight);
// 设置设备像素大小 这是防止 HiDPI 显示器模糊所必需的 （也称为视网膜显示器）。
renderer.setPixelRatio(window.devicePixelRatio);
// 将canvas元素添加到我们的页面
container.appendChild(renderer.domElement);
  1. 渲染场景
    main.js: 渲染场景
// 渲染场景
renderer.render(scene, camera);

总结

至此已经全部完成。你好，正方体！如果出现理解偏差或有其他更佳的学习方法，请大家不吝赐教，在评论区给予指正或分享您的宝贵建议，我将不胜感激。

主要文献

three.js官网
《discoverthreejs》

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

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

相关文章

git 常用命令 切换分支

git 常用命令 切换分支

切换分支 git checkout master 从 当前分支 切换到 本地master分支 git checkout origin/main 从 当前分支 切换到 远程仓库的 main 分支git checkout test6 潜在规则 git checkout test6 远程仓库有test6分支 本地没有时 自动拉取远程分支test6 并创建同名…
阅读更多...
滑块（Slider）

滑块（Slider）

滑块（Slider） 滑块，也称为滑块控件或滑动条，是一种常见的用户界面元素，允许用户通过拖动指示器（通常是一个小方块或圆点）来选择一个值或一组值。滑块广泛用于各种应用程序和网站中，用于调节音量、亮度、温度或其他可变设置。本文将探讨滑块的设计、实现和最佳实践。 …
阅读更多...
Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE&#xff08;Server-Sent Events&#xff09;&#xff0c;并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。 1. 背景 …
阅读更多...
ABAP开发：屏幕输入中，在多个选项卡中如何确定选择了哪个Tab Strips？

ABAP开发：屏幕输入中，在多个选项卡中如何确定选择了哪个Tab Strips？

在ABAP开发中&#xff0c;使用了SELECTION-SCREEN来创建了一个带有多个选项卡&#xff08;Tab Strips&#xff09;的屏幕。每个选项卡对应一个不同的屏幕编号&#xff08;SCREEN 101, 102, 103&#xff09;&#xff0c;如下图&#xff1a; 屏幕中有Name、Age、City三个标签选择…
阅读更多...
39、基于深度学习的(拼音)字符识别(matlab)

39、基于深度学习的(拼音)字符识别(matlab)

1、原理及流程 深度学习中常用的字符识别方法包括卷积神经网络&#xff08;CNN&#xff09;和循环神经网络&#xff08;RNN&#xff09;。 数据准备&#xff1a;首先需要准备包含字符的数据集&#xff0c;通常是手写字符、印刷字符或者印刷字体数据集。 数据预处理&#xff1…
阅读更多...
【网络安全】网络安全威胁及途径

【网络安全】网络安全威胁及途径

1、网络安全威胁的种类及途径 &#xff08;1&#xff09;网络安全威胁的主要类型 网络安全面临的威胁和隐患种类繁多&#xff0c;主要包括人为因素、网络系统及数据资源和运行环境等影响。网络安全威胁主要表现为&#xff1a;黑客入侵、非授权访问、窃听、假冒合法用户、病毒…
阅读更多...
webpack 自动清理 dist 文件夹的两种实现方法

webpack 自动清理 dist 文件夹的两种实现方法

我们知道在做 vue 项目时&#xff0c;由于项目不断扩大&#xff0c;dist 文件越来越复杂&#xff0c;webpack 生成文件并将其默认放置在 /dist 文件夹中&#xff0c;但是它不会追踪哪些文件是实际在项目中需要的。 &#xff08;1&#xff09;webpack 配置 通常我们会在构建前…
阅读更多...
Langevin动力学

Langevin动力学

Langevin动力学 Langevin动力学是一种数学模型&#xff0c;用于描述带有摩擦和随机扰动的粒子的运动。它是经典动力学与统计物理学的结合&#xff0c;尤其在研究布朗运动和其他由热涨落驱动的现象时非常重要。 数学上&#xff0c;Langevin方程可以写成以下形式&#xff1a; m…
阅读更多...
18. 第十八章 继承

18. 第十八章 继承

18. 继承 和面向对象编程最常相关的语言特性就是继承(inheritance). 继承值得是根据一个现有的类型, 定义一个修改版本的新类的能力. 本章中我会使用几个类来表达扑克牌, 牌组以及扑克牌性, 用于展示继承特性.如果你不玩扑克, 可以在http://wikipedia.org/wiki/Poker里阅读相关…
阅读更多...
概率论拾遗

概率论拾遗

条件期望的性质 1.看成f(Y)即可 条件期望仅限于形式化公式&#xff0c;用于解决多个随机变量存在时的期望问题求解&#xff0c;即 E(?)E(E(?|Y))#直接应用此公式条件住一个随机变量&#xff0c;进行接下来的计算即可 定义随机变量之间的距离为&#xff0c;即均方距离 随机…
阅读更多...
Redis分布式锁的实现、优化与Redlock算法探讨

Redis分布式锁的实现、优化与Redlock算法探讨

Redis分布式锁最简单的实现 要实现分布式锁，首先需要Redis具备“互斥”能力，这可以通过SETNX命令实现。SETNX表示SET if Not Exists，即如果key不存在，才会设置它的值，否则什么也不做。利用这一点，不同客户端就能实现互斥，从而实现一个分布式锁。 举例： 客户端1申请加…
阅读更多...
提升学术研究效率与质量的关键

提升学术研究效率与质量的关键

科研工具与资源的发展在信息时代尤为重要&#xff0c;它们不仅能够提升学术研究的效率&#xff0c;还能够促进科学成果的共享与交流。本文旨在探讨几种主要的科研工具与资源&#xff0c;涵盖文献检索、语言翻译、实验方案、数据库查询、在线绘图等多个方面&#xff0c;帮助研究…
阅读更多...
(科学:某天是星期几)泽勒一致性是由克里斯汀·泽勒开发的用于计算某天是星期几的算法。

(科学:某天是星期几)泽勒一致性是由克里斯汀·泽勒开发的用于计算某天是星期几的算法。

(科学:某天是星期几)泽勒一致性是由克里斯汀泽勒开发的用于计算某天是星期几的算法。这个公式是: 其中: h是一个星期中的某一天(0 为星期六;1 为星期天;2 为星期一;3 为星期二;4 为 星期三;5 为星期四;6为星期五)。 q 是某月的第几天。 m 是月份(3 为三月&#xff0c;4 为四月,…
阅读更多...
朴素贝叶斯分类器 #数据挖掘 #Python

朴素贝叶斯分类器 #数据挖掘 #Python

朴素贝叶斯分类器是一种基于概率统计的简单但强大的机器学习算法。它假设特征之间是相互独立的&#xff08;“朴素”&#xff09;&#xff0c;尽管在现实世界中这通常不成立&#xff0c;但在许多情况下这种简化假设仍能提供良好的性能。 基本原理&#xff1a;朴素贝叶斯分类器…
阅读更多...
笔记本开机原理

笔记本开机原理

从按下开机键开始&#xff0c;机器是如何开到OS的呢&#xff1f;今天这篇文章和大家极少EC-BIOS-OS的整个开机流程。首先大家要对笔记本的基本架构有所了解&#xff0c;基本架构如下图所示&#xff08;主要组成部分为大写黑体内容&#xff09;。 一、按下PowerButton按钮&#…
阅读更多...
说下你对Spring IOC 的理解

说下你对Spring IOC 的理解

总结&#xff1a;IOC是一个容器&#xff0c;用来管理对象之间的依赖关系。 控制反转&#xff0c;依赖注入--->注入的方式。。。 说下你对Spring IOC 的理解 1. Spring IOC是一个管理对象之间依赖关系的容器&#xff0c;它实现了依赖注入技术&#xff0c;可以解决传统的紧耦…
阅读更多...
人工智能发展历程了解和Tensorflow基础开发环境构建

人工智能发展历程了解和Tensorflow基础开发环境构建

目录 人工智能的三次浪潮 开发环境介绍 Anaconda Anaconda的下载和安装 下载说明 安装指导 模块介绍 使用Anaconda Navigator Home界面介绍 Environment界面介绍 使用Jupter Notebook 打开Jupter Notebook 配置默认目录 新建文件 两种输入模式 Conda 虚拟环境 添…
阅读更多...
酷开会员丨酷开系统K歌模式，父亲节的家庭欢聚时光

酷开会员丨酷开系统K歌模式，父亲节的家庭欢聚时光

K歌以其独特的魅力&#xff0c;为家庭娱乐带来了无限乐趣。想象一下&#xff0c;父亲节这天&#xff0c;打开电视进入K歌频道&#xff0c;与家人一起嗨唱&#xff0c;客厅里充满了欢声笑语&#xff0c;酷开系统的K歌应用也就成为了连接亲情的桥梁&#xff0c;让爸爸们都能在这个…
阅读更多...
STM32面试题

STM32面试题

STM32面试题通常涉及STM32微控制器的特性、功能、应用以及编程知识。以下是一些可能的面试问题： STM32微控制器的基本介绍： STM32微控制器是由哪家公司生产的？STM32微控制器主要应用于哪些领域？STM32的特性和功能： STM32微控制器有哪些主要特性？请描述STM32的GPIO（通用输…
阅读更多...
SQL join和EXISTS效率

SQL join和EXISTS效率

先看两个查询&#xff0c;查询目的是在a表中找出b表出现的vid 1.join查询 select a.vid, a.attach_url, a.attach_url_type, a.create_time from ods_truck.tl_vehicle_attach_log ajoin (select distinct vidfrom ods_truck.tl_truck_log_20240613where oprater in (remove,…
阅读更多...
最新文章

Copyright @ 2022~2023