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.mfbz.cn/a/335650.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

信息登记小程序怎么做_重塑用户互动，开启全新营销篇章

信息登记小程序怎么做_重塑用户互动，开启全新营销篇章

信息登记小程序&#xff1a;重塑用户互动&#xff0c;开启全新营销篇章 在数字化浪潮中&#xff0c;小程序以其便捷、高效的特点&#xff0c;逐渐成为企业与用户之间沟通的桥梁。其中&#xff0c;信息登记小程序更是凭借其独特的定位&#xff0c;在众多小程序中脱颖而出。本文…
阅读更多...
荣誉艾尔迪亚人的题解

荣誉艾尔迪亚人的题解

目录 原题描述&#xff1a; 题目背景 题目描述 输入格式 输出格式 样例 Input 1 Output 1 Input 2 Output 2 数据范围&#xff1a; 样例解释 主要思路&#xff1a; 代码code&#xff1a; 原题描述&#xff1a; 时间限制: 1000ms 空间限制: 65536kb 题目背景 ​…
阅读更多...
ros2 基础教程-使用ROS 2进行相机标定

ros2 基础教程-使用ROS 2进行相机标定

ROS 2进行相机标定&#xff08;Camera Calibration&#xff09; 相机&#xff08;摄像头&#xff09;是一种非常精密的光学仪器&#xff0c;对外界环境的感知非常敏感。由于摄像头内部和外部的一些原因&#xff0c;摄像头采集的图像常常会发生一定的畸变。如果直接将采集到的图…
阅读更多...
【分布式技术】ELK大型日志收集分析系统

【分布式技术】ELK大型日志收集分析系统

目录 步骤一&#xff1a;完成JAVA环境部署 步骤二&#xff1a;部署ES节点&#xff08;三台主机&#xff09; 步骤三&#xff1a;内核参数修改 步骤四&#xff1a;web端查看验证 步骤五&#xff1a;yum安装nginx 步骤六&#xff1a;完成logstash部署 步骤七&#xff1a;部…
阅读更多...
matlab抽取与插值

matlab抽取与插值

什么是抽取&#xff1f; 我们假设一个数字信号 x ( n ) , n 1 , 2 , . . . , N x(n),n1,2,...,N x(n),n1,2,...,N共有 N N N个点&#xff0c;抽取就是每个几个点抽1个点&#xff0c;比如2倍抽取&#xff0c;那么抽取后的信号为 y ( n ) , y ( 1 ) x ( 1 ) , y ( 2 ) x ( 3 …
阅读更多...
stm32 FOC 电机介绍

stm32 FOC 电机介绍

今年开始学习foc控制无刷电机&#xff0c;这几天把所学整理一下&#xff0c;记录一下知识内容。 前言: 为什么要学习FOC? 1.电机控制是自动化控制领域重要一环。 2.目前直流无刷电机应用越来越广泛&#xff0c;如无人机、机械臂、云台、仿生机器人等等。 需要什么基础&…
阅读更多...
项目管理十大知识领域之风险管理

项目管理十大知识领域之风险管理

1. 项目风险管理的定义与概述 项目风险管理是指为了实现项目目标&#xff0c;有计划地识别、评估和应对项目中的各种风险的过程。项目风险管理的核心在于提前辨识到可能对项目目标产生不利影响的不确定因素&#xff0c;并采取适当的措施降低或消除这些风险&#xff0c;以保障项…
阅读更多...
three.js从入门到精通系列教程005 - three.js使用鼠标拖拽缩放浏览全景图

three.js从入门到精通系列教程005 - three.js使用鼠标拖拽缩放浏览全景图

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>three.js从入门到精通系列教程005 - three.js使用鼠标拖拽缩放浏览全景图</title><script src"ThreeJS/three.js"></script><script src&qu…
阅读更多...
基于SpringBoot Vue博物馆管理系统

基于SpringBoot Vue博物馆管理系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…
阅读更多...
深入数仓离线数据同步：问题分析与优化措施

深入数仓离线数据同步：问题分析与优化措施

一、前言 在数据仓库领域&#xff0c;离线数仓和实时数仓是常见的两种架构类型。离线数仓一般通过定时任务在特定时间点&#xff08;通常是凌晨&#xff09;将业务数据同步到数据仓库中。这种方式适用于对数据实时性要求不高&#xff0c;更侧重于历史数据分析和报告生成的场景…
阅读更多...
Spring第六天(注解开发第三方Bean)

Spring第六天(注解开发第三方Bean)

注解开发管理第三方Bean 显然&#xff0c;我们无法在第三方Bean中写入诸如service这样的注解&#xff0c;所以&#xff0c;Spring为我们提供了Bean这一注解来让我们通过注解管理第三方Bean 第二种导入方式由于可读性太低&#xff0c;故只介绍第一种导入方式&#xff0c;这里我…
阅读更多...
【JavaEE】线程安全的集合类

【JavaEE】线程安全的集合类

作者主页&#xff1a;paper jie_博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文于《JavaEE》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精力)打造&…
阅读更多...
【ARM Cortex-M 系列 1.1 -- Cortex-M33 与 M4 差异 详细介绍】

【ARM Cortex-M 系列 1.1 -- Cortex-M33 与 M4 差异 详细介绍】

请阅读【嵌入式开发学习必备专栏 之 Cortex-Mx 专栏】 文章目录 背景Cortex-M33 与 M4 差异Cortex-M33Cortex-M4关系和差异举例说明 背景 在移植 RT-Thread 到 瑞萨RA4M2&#xff08;Cortex-M33&#xff09;上时&#xff0c;遇到了hardfault 问题&#xff0c;最后使用了Cortex…
阅读更多...
路由器结构

路由器结构

路由器是连接互联网的设备&#xff0c;本文主要描述路由器的结构组成。 如上所示&#xff0c;OSI&#xff08;Open System Interconnect&#xff09;开放系统互联参考模型是互联网架构的标准协议栈&#xff0c;由ISO标准组织制定。自底向上&#xff0c;互联网架构分为7层&#…
阅读更多...
行政快递管理软件使用教程

行政快递管理软件使用教程

勤勤恳恳的行政人员&#xff0c;还在努力地修改企业快递管理制度&#xff0c;而聪明的行政人员&#xff0c;已经开始物色合适的快递管理软件了。随着企业管理的现代化发展&#xff0c;我们会发现很多管理模块都有相应的管理制度。人力资源管理、客户关系管理、财务管理等等&…
阅读更多...
Unity animator动画倒放的方法

Unity animator动画倒放的方法

在Unity中&#xff0c; 我们有时候不仅需要animator正放的效果&#xff0c;也需要倒放的效果。但我们在实际制作动画的时候可以只制作一个正放的动画&#xff0c;然后通过代码控制倒放。 实现方法其实很简单&#xff0c;只需要把animator动画的speed设置为-1即为倒放&#xff…
阅读更多...
MySQL中SELECT字句的顺序以及具体使用

MySQL中SELECT字句的顺序以及具体使用

目录 1.SELECT字句及其顺序 2.使用方法举例 3.HAVING和WHERE 1.SELECT字句及其顺序 *下表来自于图灵程序设计丛书&#xff0c;数据库系列——《SQL必知必会》 2.使用方法举例 *题目来源于牛客网 题目描述 现在运营想要查看不同大学的用户平均发帖情况&#xff0c;并期望结…
阅读更多...
纯命令行在Ubuntu中安装qemu的ubuntu虚拟机，成功备忘

纯命令行在Ubuntu中安装qemu的ubuntu虚拟机，成功备忘

信息总体还算完整&#xff0c;有个别软件更新了名字&#xff0c;所以在这备忘一下 1. 验证kvm是否支持 ________________________________________________________________ $ grep vmx /proc/cpuinfo __________________________________________________________________…
阅读更多...
【大数据】了解 YARN 架构的基础知识

【大数据】了解 YARN 架构的基础知识

了解 YARN 架构的基础知识 1.为什么是 YARN2.YARN 简介3.YARN 的组成部分3.1 Resource Manager 资源管理器3.1.1 Scheduler 调度程序3.1.2 Application Manager 应用程序管理器 3.2 Node Manager 节点管理器3.3 Application Master 应用程序主控3.4 Container 容器 4.在 YARN 中…
阅读更多...
数据库课程设计-图书管理系统数据库设计

数据库课程设计-图书管理系统数据库设计

目录 一、实验目的 二、实验内容 三、实验要求 四、实验设计 4.1需求分析 4.1.1系统目标 4.1.2功能需求 4.1.3性能需求 4.14界面需求 4.2概念模型设计 4.2.1 实体及联系 4.2.2 E-R图 4.3 逻辑设计 4.3.1 E-R模型向关系模型的转换 4.3.2 数据库逻辑结构 4.3.3数据库模型函数依赖…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站