Three.js入门

Three.js 介绍

Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。

Three.js的开发环境搭建

  • 创建目录并使用npm init -y初始化package.json
  • 使用npm install --save-dev parcel安装Web应用打包工具parcel

    这一步不是必须的，可以使用其他打包工具例如webpack等

  • 在目录中新建src/index.html和src/script.js两个文件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Three.js入门</title></head><body><script src="./script.js" type="module"></script></body>
</html>

script.js文件中会使用到import模块化语法，所以引入文件需要加上type="module"

  • 在package.json中加入"start": "parcel src/index.html"脚本
  • 使用npm install three引入Three.js
  • 在src/script.js文件中验证Three.js是否引入成功
import * as THREE from "three";
console.log(THREE);

目录结构

Three.js的一些重要概念

开发一个Three.js的场景，需要如下一些元素：

  • scene 场景

    场景像一个容器（container），可以将物体(模型，粒子，光源，相机等)加入其中。

  • objects 物体

    物体可以有很多种，比如原始的几何体，导入的模型 ，粒子，光源等。

  • camera 相机

    理论上的视角，虽然相机也被加入了场景中，但是相机是看不见的

  • renderer 渲染器

    从相机的角度渲染场景，结果将被绘制到 canvas 中

透视相机

Three.js最常使用的是透视相机，它是模拟人的观察视角：物体近大远小。

透视相机有四个构造参数：

constructor(fov?: number, aspect?: number, near?: number, far?: number);

透视相机

  • 视野(The field of view)
  1. 视野（fov）以度为单位表示，表示视觉角度的大小。
  2. 角度越大看到的范围越大，但是太大就会造成场景中物体变形。
  3. 一般45～75会比较合适

  • 宽高比(Aspect)
    纵横比需要设置为画布的宽度除以其高度，否则会造成场景中物体变形。

  • 近平面距离(Near)
    比近平面距离近的物体将不会被渲染，也就是说不能被看见。

  • 远平面距离(Far)
    比远平面距离远的物体将不会被渲染，也不能被看见。

Three.js的第一个场景

我们了解了基本的概念后，可以开始写代码了。

// 1. 创建渲染器,指定渲染的分辨率和尺寸,然后添加到body中
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.pixelRatio = window.devicePixelRatio;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.append(renderer.domElement);// 2. 创建场景
const scene = new THREE.Scene();// 3. 创建相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);// 4. 创建物体
const axis = new THREE.AxesHelper(5);
scene.add(axis);// 5. 渲染
renderer.render(scene, camera);
  1. 创建渲染器，并将渲染器设置为body的尺寸大小,然后将渲染器的Canvas添加body中；
  2. 创建场景;
  3. 创建相机，设置75度视野，相机的纵横比设置为画布的宽度除以其高度，近平面距离为0.01，远平面距离为1000；
  4. 创建了一个坐标辅助线物体，用来标识坐标位置；
  5. 用渲染器进行渲染，传递的参数是场景和相机两个参数。

结果令人遗憾，什么也看不到，屏幕上是一片黑暗。

效果图

如果需要了解原因，需要知道一个重要的概念：坐标系统。

坐标系统

Three.js使用的是右手坐标系，这源于OpenGL默认情况下，也是右手坐标系。x轴正方向向右，y轴正方向向上，z轴由屏幕从里向外。

坐标系统

所有的物体默认是摆放在坐标原点位置，也就是(0,0,0)这个位置。

由于透视相机和物体都是放在同一个位置，也就是距离是0。并且相机也默认看向的(0,0,0)这个点，所以透视相机不会渲染内容。

移动相机

为了解决这问题，可以移动相机也可以移动物体。默认是移动相机位置。

同时设置：

camera.position.set(5, 5, 10);

或者单独设置

camera.position.z = 10;
camera.position.x = 5;
camera.position.y = 5;

移动了相机，还需要设置相机看向原点的方向

camera.lookAt(0, 0, 0);

辅助线

这时候就可以看到坐标辅助线了。

Geometry和Material

我们想创建一个立方体，我们需要创建一种名为Mesh的对象。Mesh是几何（形状）和材质（外观如何）的组合。

// 添加立方体
const geometry = new THREE.BoxGeometry(4, 4, 4);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
  1. 创建长宽高都为4的立方几何体；
  2. 立方体的表明颜色为红色的材质;
  3. 将集合体和材质组合为Mesh对象；
  4. 将Mesh对象添加到场景中。

立方体

动画

开发者都知道动画本质上是不同的重绘，由于物体的位置、大小、材质和缩放等的不同而形成了视觉上的动画。

  • 通过rotate设置旋转度角
cube.rotation.y = Math.PI / 4;

旋转角度

  • 不断旋转角度
function animate() {requestAnimationFrame(animate);cube.rotation.y += 0.01;renderer.render(scene, camera);
}animate();
  1. 通过requestAnimationFrame不断的回调animate函数；
  2. animate函数中先将旋转角度增加0.01度，然后调用renderer.render(scene, camera)进行重新绘制。

动画

  • 优化

requestAnimationFrame函数的调用频率取决于浏览器的刷新率，实际的刷新率可能因浏览器、硬件性能以及当前页面的负载而有所不同。

可以使用three.js中内置的Clock来解决这个问题。

const clock = new THREE.Clock();function animate() {requestAnimationFrame(animate);const elapsedTime = clock.getElapsedTime(); // 返回已经过去的时间, 以秒为单位cube.rotation.y = elapsedTime * Math.PI; // 两秒自转一圈renderer.render(scene, camera);
}

通过使用Clock就能保证两秒自转一圈。

添加交互

到目前位置，用户是无法和场景进行交互的，为了能够和场景进行交互，可以添加一个控制器OrbitControls。

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

通过上面的代码，用户就可以用对场景内容进行旋转、放大缩小等操作。

交互

添加光源

three.js中有三种重要的光源：环境光源，方向光源和点光源。

  • 环境光（Ambient Light）：环境光是一种均匀的光照，它会均匀地照亮场景中的所有物体，不考虑光照源的位置和方向。
  • 方向光（Directional Light）：方向光是一种平行光源，它具有确定的方向和强度，类似于太阳光。
  • 点光源（Point Light）：点光源是一种位于特定位置的光源，它向所有方向发射光线，类似于灯泡。
// 1.
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });// 2.
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);// 3.
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 0, 10);
scene.add(directionalLight);
  1. 因为MeshBasicMaterial不受光源的影像，所以需要将Material改成MeshStandardMaterial；
  2. 添加一个白色透明度为0.4的环境光，这个环境光会均匀地照亮场景中的所有物体表面，并且使用PBR（Physically-Based Rendering）渲染模型和材质自身的颜色进行混合得到新的颜色；
  3. 添加一个白色的方向光，方向光从(10, 0, 10)照向原点(10, 0, 10)， 所以有两个面会收到这个方向光，表面的颜色会更偏亮。

环境光

阴影

在现实生活中，有光照的情况下会产生阴影，three.js也能很容易实现这种效果。

// 1. 渲染器能够渲染阴影效果
renderer.shadowMap.enabled = true;// 2. 该方向会投射阴影效果
directionalLight.castShadow = true;// 3. 
cube.castShadow = true;// 4. 
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
planeMesh.rotation.x = -0.5 * Math.PI;
planeMesh.position.set(0, -3, 0);
planeMesh.receiveShadow = true;
scene.add(planeMesh);// 5. 方向光的辅助线
const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight
);
scene.add(directionalLightHelper); // 辅助线
  1. 将渲染器的shadowMap.enabled设置为true, 表示渲染器能够渲染阴影效果;
  2. directionalLight.castShadow = true，表示该方向会投射阴影效果；
  3. cube.castShadow = true, 表示该立方体会产生影像效果；
  4. 新建了一个平面，该平面能够接受投射过来的阴影效果；
  5. 为了清晰展示方向光的方向和位置，添加了一个辅助线。

阴影效果

纹理

除了颜色外，对几何体材质添加纹理是非常重要和常见的操作。我们接下来给平面和立方体添加纹理实现。

  • 地板纹理
// 1. 引入图片
import floor from "./images/floor_wood.jpeg";// 2. 初始化纹理加载器
const textloader = new THREE.TextureLoader();// 3. 给地板加载纹理
const planeMaterial = new THREE.MeshStandardMaterial({map: textloader.load(floor),
});

地板

  • 立方体纹理

前面方式添加的纹理会给几何体的每个面都设置为相同的纹理，接下来我们为不同的面设置不同的纹理。

// 立方体的顶部纹理
import grass_top from "./images/grass_top.png";
// 立方体的侧边纹理
import grass_side from "./images/grass_side.png";
// 立方体的底部纹理
import grass_bottom from "./images/grass_bottom.png";const geometry = new THREE.BoxGeometry(4, 4, 4);
const material = [new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_top),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_bottom),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),new THREE.MeshBasicMaterial({map: textloader.load(grass_side),}),
];
const cube = new THREE.Mesh(geometry, material);

在构造Mesh对象的时候，传入6个MeshBasicMaterial对象的数组，数组的纹理顺序是: x正方向轴的面，x负方向轴的面，y正方向轴的面，y负方向轴的面，z正方向轴的面，z负方向轴的面.

在这里插入图片描述

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

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

相关文章

Containerd容器镜像管理

Containerd容器镜像管理

1. 轻量级容器管理工具 Containerd 2. Containerd的两种安装方式 3. Containerd容器镜像管理 4. Containerd数据持久化和网络管理 1、Containerd镜像管理 1.1 Containerd容器镜像管理命令 docker使用docker images命令管理镜像单机containerd使用ctr images命令管理镜像,con…
阅读更多...
无涯教程-Lua - 文件I/O

无涯教程-Lua - 文件I/O

I/O库用于在Lua中读取和处理文件。 Lua中有两种文件操作&#xff0c;即隐式(Implicit)和显式(Explicit)操作。 对于以下示例&#xff0c;无涯教程将使用例文件test.lua&#xff0c;如下所示。 -- sample test.lua -- sample2 test.lua 一个简单的文件打开操作使用以下语句。…
阅读更多...
【C++】STL——list的模拟实现、构造函数、迭代器类的实现、运算符重载、增删查改

【C++】STL——list的模拟实现、构造函数、迭代器类的实现、运算符重载、增删查改

文章目录 1.模拟实现list1.1构造函数1.2迭代器类的实现1.3运算符重载1.4增删查改 1.模拟实现list list使用文章 1.1构造函数 析构函数 在定义了一个类模板list时。我们让该类模板包含了一个内部结构体_list_node&#xff0c;用于表示链表的节点。该结构体包含了指向前一个节点…
阅读更多...
git之reflog分析

git之reflog分析

写在前面 本文一起看下reflog命令。 1&#xff1a;场景描述 在开发的过程中&#xff0c;因为修改错误&#xff0c;想要通过git reset命令恢复到之前的某个版本&#xff0c;但是选择提交ID错误&#xff0c;导致多恢复了一个版本&#xff0c;假定&#xff0c;该版本对应的内容…
阅读更多...
Springboot部署ELK实战

Springboot部署ELK实战

Springboot部署ELK实战 1、部署docker、docker-compose环境安装docker安装docker-compose 2、搭建elk1、构建目录&&配置文件1、docker-compose.yml 文档2、Kibana.yml3、log-config.conf 2、添加es分词器插件3、启动 3、Springboot项目引入es、logStash配置1、引入依赖…
阅读更多...
【新人指南】给新人软件开发工程师的干货建议

【新人指南】给新人软件开发工程师的干货建议

在我是新人时&#xff0c;如果有前辈能够指导方向一下&#xff0c;分享一些踩坑经历&#xff0c;或许会让我少走很多弯路&#xff0c;节省更多的学习的成本。 这篇文章根据我多年的工作经验&#xff0c;给新人总结了一些建议&#xff0c;希望对你会有所帮助。 写好注释 没有注…
阅读更多...
解决Map修改key的问题

解决Map修改key的问题

需求 现在返回json数据带有分页的数据&#xff0c;将返回data属性数据变更为content&#xff0c;数据不变&#xff0c;key发生变化 实现1&#xff0c;源数据比较复杂&#xff0c;组装数据比较麻烦 说明&#xff1a;如果使用这种方式完成需求&#xff0c;需要创建对象&#xff0…
阅读更多...
C++ 多态 虚函数表

C++ 多态 虚函数表

文章目录 简易抽象理解多态多态的具体实现虚函数的定义虚函数的重写重定义&#xff08;隐藏&#xff09;、重载 、重写&#xff08;覆盖&#xff09;区别C11 override 和 final 关键字抽象类的定义接口继承和实现继承多态的原理&#xff1a;虚函数表单继承和多继承关系的虚函数…
阅读更多...
Flask项目打包为exe（附带项目资源，静态文件）

Flask项目打包为exe（附带项目资源，静态文件）

1.在项目根目录创建my_app.spec文件&#xff0c;内容如下&#xff1a; # -*- mode: python ; coding: utf-8 -*-block_cipher Nonea Analysis([server.py], # flask入口pathex[],binaries[], datas[("E:/**/templates","/templates"),("E:/**/s…
阅读更多...
物联网工程开发实施，应该怎么做？

物联网工程开发实施，应该怎么做？

我这里刚好有嵌入式、单片机、plc的资料需要可以私我或在评论区扣个6 物联网工程的概念 物联网工程是研究物联网系统的规划、设计、实施、管理与维护的工程科学&#xff0c;要求物联网工程技术人员根 据既定的目标&#xff0c;依照国家、行业或企业规范&#xff0c;制定物联网…
阅读更多...
Visual ChatGPT：Microsoft ChatGPT 和 VFM 相结合

Visual ChatGPT：Microsoft ChatGPT 和 VFM 相结合

推荐&#xff1a;使用 NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 什么是Visual ChatGPT&#xff1f; Visual ChatGPT 是一个包含 Visual Foundation 模型 &#xff08;VFM&#xff09; 的系统&#xff0c;可帮助 ChatGPT 更好地理解、生成和编辑视觉信息。VFM 能够指…
阅读更多...
Java抽象类和接口【超详细】

Java抽象类和接口【超详细】

文章目录 一、抽象类1.1 抽象类概念1.2 抽象类语法1.3 抽象类特性1.4 抽象类的作用 二、接口2.1 接口的概念2.2 语法规则2.3 接口使用2.4 接口特性2.5 实现多个接口2.6 接口间的继承2.7 接口使用实例2.8Clonable 接口和深拷贝2.9 抽象类和接口的区别 一、抽象类 1.1 抽象类概念…
阅读更多...
MySQL索引1——索引基本概念与索引结构（B树、R树、Hash等）

MySQL索引1——索引基本概念与索引结构（B树、R树、Hash等）

目录 索引(INDEX)基本概念 索引结构分类 BTree树索引结构 Hash索引结构 Full-Text索引 R-Tree索引 索引(INDEX)基本概念 什么是索引 索引是帮助MySQL高效获取数据的有序数据结构 为数据库表中的某些列创建索引&#xff0c;就是对数据库表中某些列的值通过不同的数据结…
阅读更多...
Flask简介与基础入门

Flask简介与基础入门

一、了解框架 Flask作为Web框架&#xff0c;它的作用主要是为了开发Web应用程序。那么我们首先来了解下Web应用程序。Web应用程序 (World Wide Web)诞生最初的目的&#xff0c;是为了利用互联网交流工作文档。 1、一切从客户端发起请求开始。 所有Flask程序都必须创建一个程序…
阅读更多...
WSL 2 installation is incomplete的解决方案

WSL 2 installation is incomplete的解决方案

问题描述 解决方案 在Windows功能中开启Hyper-v 如果没有Hyper-v选项&#xff0c;新建文本粘贴以下内容后以.cmd为后缀保存后执行即可 pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt for /f %%i in (findstr /i . hyper-v.t…
阅读更多...
Julia 字典和集合

Julia 字典和集合

数组是一种集合&#xff0c;此外 Julia 也有其他类型的集合&#xff0c;比如字典和 set&#xff08;无序集合列表&#xff09;。 字典 字典是一种可变容器模型&#xff0c;且可存储任意类型对象。 字典的每个键值 key>value 对用 > 分割&#xff0c;每个键值对之间用逗…
阅读更多...
OSLog与NSLog对比

OSLog与NSLog对比

NSLog: NSLog的文档&#xff0c;第一句话就说&#xff1a;Logs an error message to the Apple System Log facility.&#xff0c;所以首先&#xff0c;NSLog就不是设计作为普通的debug log的&#xff0c;而是error log&#xff1b;其次&#xff0c;NSLog也并非是printf的简单…
阅读更多...
前端学习---vue2--选项/数据--data-computed-watch-methods-props

前端学习---vue2--选项/数据--data-computed-watch-methods-props

写在前面&#xff1a; vue提供了很多数据相关的。 文章目录 data 动态绑定介绍使用使用数据 computed 计算属性介绍基础使用计算属性缓存 vs 方法完整使用 watch 监听属性介绍使用 methodspropspropsData data 动态绑定 介绍 简单的说就是进行双向绑定的区域。 vue实例的数…
阅读更多...
Java课题笔记~ IoC 控制反转

Java课题笔记~ IoC 控制反转

二、IoC 控制反转 控制反转&#xff08;IoC&#xff0c;Inversion of Control&#xff09;&#xff0c;是一个概念&#xff0c;是一种思想。指将传统上由程序代码直接操控的对象调用权交给容器&#xff0c;通过容器来实现对象的 装配和管理。控制反转就是对对象控制权的转移&a…
阅读更多...
为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）

为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）

因历史遗留原因&#xff0c;接手的项目没有代码提醒/格式化&#xff0c;包括 eslint、pretttier&#xff0c;也没有 commit 提交校验&#xff0c;如 husky、commitlint、stylelint&#xff0c;与其期待自己或者同事的代码写得完美无缺&#xff0c;不如通过一些工具来进行规范和…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

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