Three.JS教程1 环境搭建、场景与相机

news2024/11/15 3:45:15

Three.JS教程1 环境搭建、场景与相机

  • 一、Three.JS简介
  • 二、环境搭建
    • 1. 开发准备
    • 2. 安装 three.js
    • 3. 新建文件
      • `index.html`
      • `main.js`
    • 4. 关于附加组件
    • 5. 启动
  • 三、创建场景
    • 1. 场景的概念
    • 2. 相机的概念
    • 3. 相机的几个相关概念
      • （1）视点（Position）
      • （2） 注视点（LookAt）
      • （3） 视口（Viewport）
      • （4） 投影矩阵（Projection Matrix）
    • 4. Three.js里的透视相机
    • 5. 渲染器 `THREE.WebGLRenderer(param)`
      • （1）可选参数param
      • （2）属性
      • （3）方法
  • 四、示例代码

在这里插入图片描述

一、Three.JS简介

Three.js 是一款基于JavaScript的开源3D图形库，它简化了在Web上创建复杂的3D场景和动画的过程。
Three.js 由Ricardo Cabello（也称为mr.doob）于2010年创建，最初是为了填补WebGL技术在那个时候的不足而设计的。随着WebGL的普及和浏览器性能的提升，Three.js逐渐成为Web上3D图形编程的事实标准之一。

官网地址： https://threejs.org/
官方文档： https://threejs.org/docs/index.html#api/en/cameras/CubeCamera

二、环境搭建

1. 开发准备

  • windows 系统
  • 安装node.js

2. 安装 three.js

# 安装构建工具vite
npm install vite --registry=https://registry.npm.taobao.org --save-dev
npm install three --registry=https://registry.npm.taobao.org --save

3. 新建文件

index.html

这个文件在后续教程中将很少进行改动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
<script type="module" src="/main.js"></script>
</body>
</html>

main.js

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

4. 关于附加组件

在默认情况下，three.js 包含了一个3D引擎的基本要素，而控制器、加载器和后处理效果，都属于 addons/ 插件目录。插件不需要单独安装，但需要单独导入。

下面的例子展示了如何导入 three.js 以及 OrbitControls 和 GLTFLoader 插件。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const controls = new OrbitControls(camera, renderer.domElement);
const loader = new GLTFLoader();

在官网还有更多的第三方项目可以引用 。

5. 启动

# 启动调试器
npx vite

在这里插入图片描述

打开网址，会显示一个空白网页。

三、创建场景

1. 场景的概念

在Three.js里，场景是用来存放、组织、管理所有三维对象的容器。场景可以包含各种对象，如网格、光源、相机等。后续章节的各种概念也会在场景的基础上进行呈现。

2. 相机的概念

计算机图形学里的相机，是用来模拟和控制视点及观察场景。在Three.js中，相机用于定义渲染场景时的视图和投影方式。

相机在Three.js有两个主要的类型： 透视相机（Perspective Camera）和正交相机 （Orthographic Camera），另外还有ArrayCamera、StereoCamera等，本章节仅介绍Perspective ，其它会在后面专门章节中进行介绍。

  • 透视相机：模拟人眼视觉，使场景中的物体近处显得大、远处显得小，就是产生透视效果。
  • 正交相机：将场景投影到一个平行的矩形中，不考虑物体与相机的距离。正交相机通过定义一个立方体来表示可见空间，可以通过设置不同的裁剪平面来调整相机的投影效果。

3. 相机的几个相关概念

（1）视点（Position）

即相机的位置，它决定了观察场景的位置。

（2） 注视点（LookAt）

相机观察的目标点，决定了相机的朝向。

（3） 视口（Viewport）

渲染到屏幕上的区域，通常使用画布的宽高比来定义。

（4） 投影矩阵（Projection Matrix）

用来定义可见空间，将三维场景投影到二维屏幕上。

4. Three.js里的透视相机

下面示例代码会使用 PerspectiveCamera 摄像机。

THREE.PerspectiveCamera(fov, aspect, near, far)

简要介绍一下该函数的参数：

  • fov（Field of View）: 场景的范围，也可以理解为视野角度，以度为单位。它定义了摄像机可见区域的大小，通常取值在 0 到 180 之间。较小的视野角度会显示出较大的近处物体，但会减少可见区域，而较大的视野角度则会显示更广阔的场景。
  • aspect: 视口的宽高比（width / height）。视口是摄像机将渲染内容投射的区域。通常，我们将它设置为渲染区域的宽度与高度的比例，以保持正确的纵横比，错误的宽高比可能让图像看起来被压扁或会拉高了。
  • near: 裁剪平面，摄像机到视锥体近端的距离。物体离摄像机越近，其深度值会越小。通常设置为一个正值，表示近端的距离。
  • far: 裁剪平面，摄像机到视锥体远端的距离。物体离摄像机越远，其深度值会越大。通常设置为一个正值，表示远端的距离。

创建相机后，可以通过设置相机的位置和朝向等属性，来调整场景的渲染效果。

5. 渲染器 THREE.WebGLRenderer(param)

渲染器用来渲染场景 ，下面介绍一下它的部分参数、属性和方法。

（1）可选参数param

  • param.canvas： 渲染器使用的canvas元素，不指定将创建新的canvas；
  • antialias： 是否启用抗锯齿，默认为true；
  • alpha： 是否绘制透明背景，默认为false;
  • precision：着色器的精度，可以是highp,mediump,lowp。

（2）属性

  • domElement：渲染器使用的canvas元素。
  • autoClear：每次渲染前是否自动清除渲染目标的内容 。
  • shadowMap：用于配置阴影映射的相关属性。

（3）方法

  • render(scene, camera)：渲染指定场景和相机的一帧；
  • setSize(width, height, updateStyle)： 设置渲染器的大小。如果使用 setSize参数为 window.innerWidth/2, window.innerHeight/2，应用会呈现1/4的大小。updateStyle参数 为false的时候，会以较低的分辨率呈现应用。
  • setClearColor(color, alpha)： 设置渲染器的清除颜色和透明度。
  • setPixelRatio(value)： 设置设备像素比，用于处理高DPI屏幕。
  • setViewport(x, y, width, height)： 设置渲染器的视口。
  • clear()： 手动清除渲染目标的内容，如果 autoClear 设置为 false 时，需要手动调用。

四、示例代码

下面的示例里还会用到几何体、运动等多个的概念，这些概念将在后续的章节中介绍，本示例主要为了在看到场景上显示的对象。

// 引入Three.js库
import * as THREE from 'three';

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机，参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();

// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);

// 创建一个立方体的几何体，参数为立方体的宽度、高度、深度
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建一个基础网格材质，颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 用几何体和材质创建一个网格对象
const cube = new THREE.Mesh(geometry, material);

// 将网格对象添加到场景中
scene.add(cube);

// 设置相机的z轴位置，使其远离场景中的物体
camera.position.z = 5;

// 创建一个动画函数
function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);

    // 使立方体绕x和y轴旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

// 调用animate函数开始渲染循环
animate();

运行效果：
在这里插入图片描述

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

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

相关文章

【机器学习】四大类监督学习_模型选择与模型原理和场景应用_第03课

【机器学习】四大类监督学习_模型选择与模型原理和场景应用_第03课

监督学习中模型选择原理及场景应用 监督学习应用场景 文本分类场景&#xff1a; o 邮件过滤&#xff1a;训练模型识别垃圾邮件和非垃圾邮件。 o 情感分析&#xff1a;根据评论或社交媒体内容的情感倾向将其分类为正面、负面或中性评价。 o 新闻分类&#xff1a;将新闻文章自动…
阅读更多...
第一篇【传奇开心果】Vant 开发移动应用：从helloworld开始

第一篇【传奇开心果】Vant 开发移动应用：从helloworld开始

传奇开心果系列博文 博文系列目录Vant of Vue 开发移动应用示例博文目录一、从helloworld开始二、添加几个常用组件三、添加组件事件处理四、添加页面和跳转切换路由五、归纳总结知识点六、知识点示例代码 博文系列目录 Vant of Vue 开发移动应用示例 博文目录 一、从hellow…
阅读更多...
二、简单控件

二、简单控件

二、简单控件 #mermaid-svg-TR8KwIeb54zOjfmt {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-TR8KwIeb54zOjfmt .error-icon{fill:#552222;}#mermaid-svg-TR8KwIeb54zOjfmt .error-text{fill:#552222;stroke:#55222…
阅读更多...
45 mount 文件系统

45 mount 文件系统

前言 在 linux 中常见的文件系统 有很多, 如下 基于磁盘的文件系统, ext2, ext3, ext4, xfs, btrfs, jfs, ntfs 内存文件系统, procfs, sysfs, tmpfs, squashfs, debugfs 闪存文件系统, ubifs, jffs2, yaffs 文件系统这一套体系在 linux 有一层 vfs 抽象, 用户程序不用…
阅读更多...
1.php开发-个人博客项目文章功能显示数据库操作数据接收

1.php开发-个人博客项目文章功能显示数据库操作数据接收

&#xff08;2022-day12&#xff09; #知识点 1-php入门&#xff0c;语法&#xff0c;提交 2-mysql 3-HTMLcss ​ 演示案例 博客-文章阅读功能初步实现 实现功能&#xff1a; 前端文章导航&#xff0c;点入内容显示&#xff0c;更改ID显示不同内容 实现步骤&#xff1…
阅读更多...
04 MyBatisPlus之逻辑删除+锁+防全表更新/删除+代码生成插件

04 MyBatisPlus之逻辑删除+锁+防全表更新/删除+代码生成插件

1 逻辑删除 1. 1 什么是逻辑删除 , 以及逻辑删除和物理删除的区别? 逻辑删除&#xff0c;可以方便地实现对数据库记录的逻辑删除而不是物理删除。逻辑删除是指通过更改记录的状态或添加标记字段来模拟删除操作&#xff0c;从而保留了删除前的数据&#xff0c;便于后续的数据…
阅读更多...
P1059 [NOIP2006 普及组] 明明的随机数————C++、Python

P1059 [NOIP2006 普及组] 明明的随机数————C++、Python

目录 [NOIP2006 普及组] 明明的随机数题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 解题思路Code——CCode——Python运行结果 [NOIP2006 普及组] 明明的随机数 题目描述 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0…
阅读更多...
uniapp的IOS证书(.p12)和描述文件(.mobileprovision)申请 2024年最新教程

uniapp的IOS证书(.p12)和描述文件(.mobileprovision)申请 2024年最新教程

文章目录 准备环境登录 iOS Dev Center 下面我们从头开始学习一下如何申请开发证书、发布证书及相对应的描述文件。首先需要申请苹果 App ID &#xff08;App的唯一标识&#xff09;生成证书请求文件申请开发(Development)证书和描述文件申请开发(Development)证书添加调试设备…
阅读更多...
免费200万Tokens 用科大讯飞API调用星火大模型服务

免费200万Tokens 用科大讯飞API调用星火大模型服务

简介 自ChatGPT火了之后&#xff0c;国内的大模型发展如雨后春笋。其中的佼佼者之一就是科大讯飞研发的星火大模型,现在大模型已经更新到V3 版本&#xff0c;而且对开发者也是相当友好&#xff0c;注册就送200万tokens,讯飞1tokens 约等于 1.5 个中文汉字 或者 0.8 个英文单词…
阅读更多...
spring data mongo 在事务中，无法自动创建collection

spring data mongo 在事务中，无法自动创建collection

spring data mongo 在事务中，无法自动创建collection org.springframework.dao.DataIntegrityViolationException: Write operation error on server xxx:30001. Write error: WriteError{code=263, message=Cannot create namespace xxx.xxxin multi-document transaction.…
阅读更多...
Visual Studio 设置编辑框（即代码编辑器）的背景颜色

Visual Studio 设置编辑框（即代码编辑器）的背景颜色

在Visual Studio 中设置编辑框&#xff08;即代码编辑器&#xff09;的背景颜色&#xff0c;可以按照以下步骤进行&#xff1a; 打开Visual Studio。在菜单栏上找到并点击“工具”(Tools)选项。在下拉菜单中选择“选项”(Options)。在“选项”对话框中&#xff0c;导航至“环境…
阅读更多...
【鸿蒙4.0】详解harmonyos开发语言ArkTS

【鸿蒙4.0】详解harmonyos开发语言ArkTS

文章目录 一.什么是ArkTS&#xff1f;1.ArkTS的背景2.了解js&#xff0c;ts&#xff0c;ArkTS的演变js(Javascript)Javascript的简介Javascript的特点 ts(Typescript)ArkTS 二. ArkTS的特点 一.什么是ArkTS&#xff1f; 1.ArkTS的背景 如官方文档所描述&#xff0c;ArkTS是基…
阅读更多...
Android Matrix绘制PaintDrawable设置BitmapShader，手指触点为圆心scale放大原图，Kotlin（二）

Android Matrix绘制PaintDrawable设置BitmapShader，手指触点为圆心scale放大原图，Kotlin（二）

Android Matrix绘制PaintDrawable设置BitmapShader&#xff0c;手指触点为圆心scale放大原图&#xff0c;Kotlin&#xff08;二&#xff09; 在 Android Matrix绘制PaintDrawable设置BitmapShader&#xff0c;手指触点为圆心scale放大原图&#xff0c;Kotlin-CSDN博客 基础上&…
阅读更多...
esp32-cam 视频查看教程

esp32-cam 视频查看教程

一、环境配置 查看以前教程 环境配置 建议使用1.0.6 二、安装基于esp32 cam的代码 资料地址&#xff1a; https://pan.baidu.com/s/1Y9-rLLmAKPYzBDcrEyuGMw 提取码&#xff1a;2022 下载后打开文件下的程序 下载程序 三、获取视频url 在arduino 看不到串口打印的信息&a…
阅读更多...
Android studio 简单登录APP设计

Android studio 简单登录APP设计

一、登录界面： 二、xml布局设计： <LinearLayoutandroid:id="@+id/linearLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:layout_editor_absoluteX="…
阅读更多...
assignment1——KNN

assignment1——KNN

KNN 整体思路 加载数据集CIFAR10并随机展示部分数据构建KNearestNeighbor分类器&#xff0c;计算测试集每张图片的每个像素点与训练集每张图片的每个像素点的距离。将图片转化为数组。在测试集使用compute_distances_one_loop&#xff0c;compute_distances_no_loops&#xf…
阅读更多...
挑战杯参赛总结-时间序列预测

挑战杯参赛总结-时间序列预测

参赛任务&#xff1a; 目标&#xff1a;针对中国各个市区的不同年份二氧化碳排放量&#xff0c;预测未来年份的二氧化碳排放量。 不同与之前我学习过的波士顿房价预测机器学习-波士顿房价预测-CSDN博客 房价预测是通过学习与房价有关的很多特征&#xff0c;训练出一个模型来预…
阅读更多...
UV胶水粘接尼龙聚酰胺类聚合物PA有哪些优势呢？

UV胶水粘接尼龙聚酰胺类聚合物PA有哪些优势呢？

使用UV胶水&#xff08;紫外线固化胶水&#xff09;粘接尼龙聚酰胺类聚合物&#xff08;PA&#xff09;具有一些优势&#xff0c;这些优势包括&#xff1a; 1.快速固化&#xff1a; UV胶水是一种紫外线固化的胶水&#xff0c;它可以在短时间内迅速固化。这使得粘接过程非常快速…
阅读更多...
02-编程猜谜游戏

02-编程猜谜游戏

本章通过演示如何在实际程序中使用 Rust&#xff0c;你将了解 let 、 match 、方法、关联函数、外部crate等基础知识。 本章将实现一个经典的初学者编程问题&#xff1a;猜谜游戏。 工作原理如下&#xff1a;程序将随机生成一个介于 1 和 100 之间的整数。然后&#xff0c;程序…
阅读更多...
Pycharm详细安装 配置教程

Pycharm详细安装 配置教程

继上次安装完Anaconda之后&#xff0c;现在更新最新版本的pycharm的安装和使用教程~~~ Anaconda&#xff1a;是一个开源的Python发行版本&#xff0c;其中包含了conda、Python等180多个科学包及其依赖项。【Anaconda和Pycharm详细安装 配置教程_anconda安装时clear the packag…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023