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

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.mzph.cn/news/630646.shtml

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

相关文章

Ability to Use Oracle Data Pump to Export and Import the Unified Audit Trail

Ability to Use Oracle Data Pump to Export and Import the Unified Audit Trail

Ability to Use Oracle Data Pump to Export and Import the Unified Audit Trail 从18c版本开始才能使用数据泵工具导出统一审计的记录
阅读更多...
DAY03_Spring—自动装配注解模式优化XML文件

DAY03_Spring—自动装配注解模式优化XML文件

目录 1 Spring注解模式1.1 自动装配1.1.1 说明1.1.2 配置规则 1.2 注解模式1.2.1 关于注解的说明1.2.2 注解使用原理1.2.3 编辑配置文件1.2.4 属性注解 1.3 实现MVC结构的纯注解开发1.3.1 编写java代码1.3.2 编辑xml配置文件1.3.3 编写测试类1.3.4 关于注解说明1.3.5 关于Sprin…
阅读更多...
Ubuntu20.4 Mono C# gtk 编程习练笔记(二)

Ubuntu20.4 Mono C# gtk 编程习练笔记(二)

界面设计习练后&#xff0c;下面写一些程序设计心得。 程序结构 先看一下程序总体结构&#xff0c;先在program.cs中找到main入口&#xff0c;在命名空间下是MainClass类&#xff0c;Main函数进入后首先建立应用程序环境 Application.Init&#xff0c;然后对MainWindow进行实…
阅读更多...
【嘉立创EDA-PCB设计指南】3.网络表概念解读+板框绘制

【嘉立创EDA-PCB设计指南】3.网络表概念解读+板框绘制

前言&#xff1a;本文对网络表概念解读板框绘制&#xff08;确定PCB板子轮廓&#xff09; 网络表概念解读 在本专栏的上一篇文章【嘉立创EDA-PCB设计指南】2&#xff0c;将设计的原理图转为了PCB&#xff0c;在PCB界面下出现了所有的封装&#xff0c;以及所有的飞线属性&…
阅读更多...
【开源】基于JAVA语言的智慧家政系统

【开源】基于JAVA语言的智慧家政系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询家政服务4.2 新增单条服务订单4.3 新增留言反馈4.4 小程序登录4.5 小程序数据展示 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的智慧家政系统&#xff0…
阅读更多...
【Docker】安装 Nginx 容器并部署前后端分离项目

【Docker】安装 Nginx 容器并部署前后端分离项目

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Docker实战》。&#x1f3af;&#x1f3af; &…
阅读更多...
GRU门控循环单元神经网络的MATLAB实现（含源代码）

GRU门控循环单元神经网络的MATLAB实现（含源代码）

在深度学习领域&#xff0c;循环神经网络&#xff08;RNN&#xff09;因其在处理序列数据方面的卓越能力而受到广泛关注。GRU&#xff08;门控循环单元&#xff09;作为RNN的一种变体&#xff0c;以其在捕捉时间序列长距离依赖关系方面的高效性而备受推崇。在本文中&#xff0c…
阅读更多...
SpringBoot 中使用 Quartz 创建定时任务

SpringBoot 中使用 Quartz 创建定时任务

文章目录 一、使用示例二、运行原理 一、使用示例 自定义 job&#xff1a; Slf4j public class MyJob extends QuartzJobBean {Overrideprotected void executeInternal(JobExecutionContext context) throws JobExecutionException {log.info("MyJob start...");l…
阅读更多...
JavaWeb后端——Maven

JavaWeb后端——Maven

maven主要服务于基于Java平台的项目构建、依赖管理和项目信息管理 maven项目对象模型简称POM&#xff0c; maven解决问题&#xff1a; 1. 添加第三方jar包&#xff0c;maven将 jar 包放在本地仓库中统一管理&#xff0c;使用时用坐标的方式引用即可 2. 解决 jar 包之间的依…
阅读更多...
Facebook与环境保护：社交媒体的可持续发展

Facebook与环境保护：社交媒体的可持续发展

在当今社会&#xff0c;科技发展日新月异&#xff0c;而社交媒体作为数字时代的代表之一&#xff0c;正面临着巨大的责任与机遇。随着全球环境问题的凸显&#xff0c;社交媒体平台如Facebook也逐渐认识到自身在环保可持续发展中的角色。本文将深入探讨Facebook在环境保护方面的…
阅读更多...
统计学-R语言-5.3

统计学-R语言-5.3

文章目录 前言分位数统计量的标准误总结 前言 本篇文章即为概率与分布的最后一篇文章。 分位数 分位数函数是累积分布函数的反函数。 p-分位数是具有这样性质的一个值&#xff1a;小于或等于它的概率为p。 根据定义&#xff0c;中位数即50%分位数。 分位数通常用于置信区间的…
阅读更多...
vite 打包优化

vite 打包优化

✨专栏介绍 在当今数字化时代&#xff0c;Web应用程序已经成为了人们生活和工作中不可或缺的一部分。而要构建出令人印象深刻且功能强大的Web应用程序&#xff0c;就需要掌握一系列前端技术。前端技术涵盖了HTML、CSS和JavaScript等核心技术&#xff0c;以及各种框架、库和工具…
阅读更多...
【机器学习实例讲解】机器学习-鸢尾花数据集多分类第02课

【机器学习实例讲解】机器学习-鸢尾花数据集多分类第02课

问题定义与理解&#xff1a; 明确机器学习任务的目标&#xff0c;是分类、回归、聚类、强化学习还是其他类型的问题。 确定业务背景和需求&#xff0c;了解所处理数据的现实意义。 数据收集&#xff1a; 根据任务目标从各种来源获取原始数据&#xff0c;可以是数据库、文件、…
阅读更多...
Spring5深入浅出篇:Spring与工厂设计模式简介

Spring5深入浅出篇:Spring与工厂设计模式简介

Spring5深入浅出篇:Spring与工厂设计模式简介 什么是Spring Spring是⼀个轻量级的JavaEE解决⽅案&#xff0c;整合众多优秀的设计模式轻量级 1. 对于运⾏环境是没有额外要求的开源 tomcat resion jetty收费 weblogic websphere 2. 代码移植性⾼不需要实现额外接⼝JavaEE的解…
阅读更多...
Bing AI：探索人工智能搜索引擎Bing Chat工具

Bing AI：探索人工智能搜索引擎Bing Chat工具

Microsoft 更新了其搜索引擎 Bing&#xff0c;采用了由 OpenAI 的 GPT-4 模型提供支持的人工智能 &#xff08;AI&#xff09; 技术。 这意味着您现在可以与 Bing 聊天。而且&#xff0c;除了常规的链接列表外&#xff0c;搜索引擎还可以汇总互联网上的数据来回答您的问题。 …
阅读更多...
架构篇04-复杂度来源：高性能

架构篇04-复杂度来源：高性能

文章目录 单机复杂度集群的复杂度小结 从本篇开始&#xff0c;我们一起深入分析架构设计复杂度的 6 个来源&#xff0c;先来聊聊复杂度的来源之一高性能。 对性能孜孜不倦的追求是整个人类技术不断发展的根本驱动力。例如计算机&#xff0c;从电子管计算机到晶体管计算机再到集…
阅读更多...
VL171 VL170配合LDR6020的type-c母座显示器方案

VL171 VL170配合LDR6020的type-c母座显示器方案

兼容基于VASEL控制引脚的10 Gbps USB3.2 Gen2和AM所有4通道视频&#xff0c;包括DP1.4 8.1 Gbps VL171配合LDR6020实现的type-c桌面显示器方案电路LDR6020是一个DRP的PD芯片&#xff0c;PD芯片与主机通讯完之后&#xff0c;通过PD芯片去控制VL171实现正反插与USB信号和DP信号的…
阅读更多...
31 3D日历组件

31 3D日历组件

效果演示 实现了一个3D文字旋转的效果&#xff0c;当鼠标悬停在容器上时&#xff0c;最后一个文字会旋转630度&#xff0c;而其他文字会逐渐旋转到水平面上方。 Code <div class"container"><div class"text" style"--j:0;"><sp…
阅读更多...
MySQL -- Linux Ubuntu 环境安装MySQL数据库

MySQL -- Linux Ubuntu 环境安装MySQL数据库

注意&#xff1a;本篇所有命令均是在linux 服务器root账号下运行。 安装MySQL 安装 apt-get install mysql-server 启动mysql服务 systemctl start mysql查看mysql服务 systemctl status mysql 如下图所示&#xff0c;mysql服务正在运行 设置root密码 在第一次安装MyS…
阅读更多...
【Redis】Redis如何做内存优化？

【Redis】Redis如何做内存优化？

​ &#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Redis ⛳️ 功不唐捐&#xff0c;玉汝于成 ​ 目录 前言 正文 使用数据结构&#xff1a; 压缩对象&#xff1a; 过期策略&#xff1a; 分片&#xff1a; 使用持久化方式&#xff1a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023