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/637783.shtml

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

相关文章

ES-同词义配置

ES-同词义配置

定义 语主相近或相同品牌类目关联搜索它等于搜索它 配置方法 1. 进入ES第一个节点&#xff1a;cd node1/config/analysis-ik 添加近义词echo 凯悦,锡伯,红桃 > vim synonyms.txt 2. 将配置得制到节点2与节点3 cp synonyms.txt /opt/elasticsearch8.0.0/node2/config/a…
阅读更多...
【redis13】集群前奏：sentinel模式

【redis13】集群前奏：sentinel模式

1.哨兵sentinel引入背景 我们现在来思考一个问题&#xff1a;如何实现服务的高可用。我们首先想到至少要满足两个要求&#xff1a;1.服务端能够实现主从自动切换&#xff1b;2.对于客户端来说&#xff0c;如果发生了主从切换&#xff0c;则能够自动连接到最新的master节点。 我…
阅读更多...
S/MIME电子邮件证书申请指南

S/MIME电子邮件证书申请指南

近年来&#xff0c;邮件安全问题日益突出&#xff0c;电子邮件成为诈骗、勒索软件攻击的重灾区。恶意邮件的占比屡创新高&#xff0c;邮件泄密事件更是比比皆是。在如此严峻的网络安全形势下&#xff0c;使用S/MIME电子邮件证书进行邮件收发是当今最佳的邮件安全解决方案之一。…
阅读更多...
【PICO】【Unity】【VR】如何对打包后的PICO项目有效Debug

【PICO】【Unity】【VR】如何对打包后的PICO项目有效Debug

【背景】 PICO项目打包后再运行就看不到Console了。当然，会有各类专业的Debug工具。 有一类Debug的工具是Preview形式下展示Debug信息，但是发现Preview成功不见得打包也成功。 打包后也会有一些Debug工具，不过这里我给出自己的简单解决办法。 【解决方案】 Unity Console…
阅读更多...
Java毕业设计-基于jsp+servlet的大学生学业规划咨询服务平台管理系统-第84期

Java毕业设计-基于jsp+servlet的大学生学业规划咨询服务平台管理系统-第84期

获取源码资料&#xff0c;请移步从戎源码网&#xff1a;从戎源码网_专业的计算机毕业设计网站 项目介绍 基于jspservlet的大学生学业规划咨询服务平台管理系统&#xff1a;前端 jsp、jquery、ajax&#xff0c;后端 servlet、jdbc&#xff0c;角色分为管理员、学生&#xff1b…
阅读更多...
Linux——进程等待

Linux——进程等待

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、为什么要进程等待二、进程等待的方法1、wait方法2、waitpid方法 三、获取子进程status 一…
阅读更多...
pxe高效批量网络装机 以及安装教程

pxe高效批量网络装机 以及安装教程

系统装机的三种引导模式 1.pe 2光驱 3.网卡 打开本机桌面 可以看见背景图片 查看配置文件内容 文件时引导选项的功能 pxe原理&#xff1a; 先根据dhcp找到IP地址、和引导程序的地址&#xff0c;还提供客户机tftp地址&#xff0c;因为tftp是小文件&#xff0c;容量小&#…
阅读更多...
【占用网络】FlashOcc：基于2D卷积的占用预测模型

【占用网络】FlashOcc：基于2D卷积的占用预测模型

前言 FlashOcc是一个它只需2D卷积就能实现“占用预测模型”&#xff0c;具有快速、节约内存、易部署的特点&#xff0c;偏工程方向的工作。 它首先采用2D卷积提取图形信息&#xff0c;生成BEV特征。然后通过通道到高度变换&#xff0c;将BEV特征提升到3D空间特征。 对于常规…
阅读更多...
攻防世界——Shuffle

攻防世界——Shuffle

32bit打开 main函数F5 下班
阅读更多...
评论功能的设计与实现

评论功能的设计与实现

1. 评论功能实现的思路 为文章模块实现评论功能涉及多个方面&#xff0c;包括数据库设计、后端逻辑和前端交互。下面是实现这一功能的基本思路&#xff1a; 1. 数据库设计 首先&#xff0c;需要在数据库中设计适当的结构来存储评论信息。通常&#xff0c;你会需要至少两个数…
阅读更多...
SpringBoot+Email发送邮件

SpringBoot+Email发送邮件

引言 邮件通知是现代应用中常见的一种通信方式&#xff0c;特别是在需要及时反馈、告警或重要事件通知的场景下。Spring Boot提供了简单而强大的邮件发送功能&#xff0c;使得实现邮件通知变得轻而易举。本文将研究如何在Spring Boot中使用JavaMailSender实现邮件发送&#xf…
阅读更多...
面试经典150题(85-87)

面试经典150题(85-87)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第四十三天&#xff09;完成了3道(85-87)150&#xff1a; 85.&#xff08;77. 组合&#xff09;题目描述&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可…
阅读更多...
Unity中URP下的SimpleLit的 Lambert漫反射计算

Unity中URP下的SimpleLit的 Lambert漫反射计算

文章目录 前言一、Lambert漫反射计算11、MixRealtimeAndBakedGI 函数有三个重载2、3号 调用了 2号3、1号调用了 SubtractDirectMainLightFromLightmap函数4、我们重点来看 Lambert漫反射的实现部分5、其余部分 二、Lambert漫反射计算21、LightingLambert 前言 在之前的文章中&…
阅读更多...
Python学习之路-Python操作redis

Python学习之路-Python操作redis

Python学习之路-Python操作redis 前言 在Python中操作Redis可以直接用redis模块 安装 安装Redis的有3种方式https://github.com/andymccurdy/redis-py 第一种&#xff1a;进⼊虚拟环境py_django&#xff0c;联⽹安装包redis pip install redis第二种&#xff1a;进⼊虚拟环…
阅读更多...
【VRTK】【Unity】【PICO】PICO项目打包后闪退的根本原因

【VRTK】【Unity】【PICO】PICO项目打包后闪退的根本原因

【背景】 一开始打包运行好好的PICO项目&#xff0c;中途用Preview模式开发了一阵后&#xff0c;再次打包就闪退了。 【分析】 项目设置没有动过&#xff0c;那么可能是Preview开发过程中引入的包导致的问题。 【答案】 千万不要在PICO项目中导入Oculus包。我原本想用一些…
阅读更多...
Python小项目：还在为备份烦恼？这个tkinter项目帮你解决！

Python小项目：还在为备份烦恼？这个tkinter项目帮你解决！

文章目录 1 引言2 Tkinter概览3 设计备份软件的界面4 文件夹选择逻辑5 备份方案介绍5.1 完全备份5.2 增量备份5.3 镜像备份 完整代码&#xff1a; import tkinter as tk from tkinter import filedialog, messagebox import os import shutil import filecmpdef choose_source(…
阅读更多...
MySQL自增主键为何不连续

MySQL自增主键为何不连续

自增值的存储原理 MyISAM引擎的自增值保存在数据文件中InnoDB引擎的自增值&#xff0c;保存在内存里 MySQL 8.0版本后&#xff0c;才有了“自增值持久化”的能力&#xff0c;实现了“如果发生重启&#xff0c;表的自增值可以恢复为MySQL重启前的值”&#xff0c;具体情况是&am…
阅读更多...
Kotlin 解构声明

Kotlin 解构声明

在一些像 Python 的高级语言中&#xff0c;支持 多返回值的&#xff0c;例如 x, y get_position() 这样操作接收。 而在 Kotlin 中&#xff0c;虽然不支持 多返回值&#xff0c;但有类似的 解构&#xff08;destructure&#xff09; 对象功能&#xff0c;叫做 解构声明。 用…
阅读更多...
理解pytorch系列：contiguous是怎么实现的

理解pytorch系列：contiguous是怎么实现的

在PyTorch中&#xff0c;.contiguous()方法的作用是确保张量在内存中是连续存储的。当你对张量执行某些操作&#xff0c;如transpose()、permute()、narrow()、expand()等之后&#xff0c;得到的张量可能不再在内存中连续排列。这些操作通常返回一个张量的视图&#xff0c;它们…
阅读更多...
SpringBoot 3.1.7 集成Sentinel

SpringBoot 3.1.7 集成Sentinel

一、背景 我的项目需要引入限流&#xff0c;降级&#xff0c;熔断框架&#xff0c;由于 Spring Cloud 2022.0.4 已经不再支持 Hystrix&#xff0c;Spring Cloud 提供了替代方案&#xff0c;如 Resilience4j&#xff0c;可以使用它来替换 Hystrix。但是网上搜了一下国内Resilie…
阅读更多...
最新文章

Copyright @ 2022~2023