2024年了，是该学学Three.js了

前言

 📫 大家好，我是南木元元，热衷分享有趣实用的文章，希望大家多多支持，一起进步！

 🍅 个人主页：南木元元

目录

Three.js介绍

Three.js应用场景

搭建开发环境

初始化项目

创建文件

配置命令

启动服务

Three.js的一些重要概念

第一个3D场景

渲染器

3D场景的实现

1.创建三维场景

2.创建透视相机

3.创建渲染器

4.添加物体

5.定位相机

结语 

Three.js介绍

讲到Three.js，就需要先说一下OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，对于前端开发者来说学习成本非常高。

Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，让开发者能更快速的进行3D场景效果的开发。

简单来说，Three.js就是能够实现3D效果的JS库。

官网：Three.js – JavaScript 3D Library

WebGL、OpenGL、Three.js三者的关系：

  • WebGL：OpenGL + JavaScript
  • Three.js：一个基于WebGL封装的库

Three.js应用场景

three.js应用广泛，在小游戏、产品展示、物联网、智慧城市、机械、建筑、GIS等各个领域基本上都有three.js的身影。 

微信小游戏

智慧城市

智慧小区

数字孪生

全景看房

机械领域

GIS

搭建开发环境

本文使用vite来搭建three.js的开发环境，当然你也可以使用webpack等其他打包工具。

初始化项目

创建vite-three目录并执行npm init -y，初始化 package.json。

npm init -y

安装vite：

npm i vite -D

安装three.js：

npm i three

此时的项目目录如下：

创建文件

创建src目录，src下新建main.js文件，根目录创建index.html，作为vite的入口文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite-three</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- 使用模块化方式引入文件 -->
    <script src="./src/main.js" type="module"></script>
</body>
</html>

上述引入js时加上了type="module"，代表使用模块化的方式引入，因为main.js中会使用到import模块化语法。main.js文件如下：

import * as THREE from "three";
console.log(THREE);

配置命令

在package.json中配置如下命令：

"scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview"
}

启动服务

终端输入npm run dev，启动开发服务：

npm run dev

在浏览器控制台看到如下信息，就代表Three.js已经成功引入。

Three.js的一些重要概念

在Three.js中，我们需要先理解一些比较重要的概念：

  • 场景：场景就是一个三维的世界，在这个世界中可以放置各种各样的物体。
  • 相机：三维空间的观察者，通过相机来查看场景。
  • 物体：被观察的对象，不同的物体形状、大小、材质、纹理不同。
  • 光源：物体表面的明暗效果会受光照影响，为了更好的模拟三维效果，需要一些光照和阴影。

这里需要重点说下相机。

相机分为两种：透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。

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

// 透视相机参数
const fov = 45; 
const aspect = window.innerWidth / window.innerHeight;
const near = 1; 
const far = 1000; 
// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

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

  1. fov（视野）：相机的视野有多宽，以度为单位。
  2. aspect（纵横比）：场景的宽度与高度的比率。
  3. near（近剪裁平面）：任何比这更靠近相机的东西都是不可见的。
  4. far（远剪裁平面）：任何比这更远离相机的东西都是不可见的。

这四个参数构成一个有边界的空间区域，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示。

第一个3D场景

创建一个场景，需要3个对象：场景（scene）、相机（camera）、渲染器（renderer），这样就能通过摄像机渲染出场景。

渲染器

场景和相机我们都已经介绍过了，那什么是渲染器呢？

渲染器（Renderer）：从相机的角度去渲染场景，负责将场景绘制到<canvas>元素中。

three.js的整个工作机制如下图所示： 

将可见对象如网格（mesh）添加到场景（scene）中，然后将需要渲染的数据传递给渲染器（renderer），渲染器负责将场景在 <canvas> 画布上绘制出来。了解了这些，接下来我们就来绘制three.js的第一个3D场景。

3D场景的实现

1.创建三维场景

首先，创建场景，作为我们能看到的一切的载体。

const scene = new THREE.Scene();

2.创建透视相机

创建透视相机，设置相机参数。

// 透视相机参数
const fov = 45; 
const aspect = window.innerWidth / window.innerHeight;
const near = 1; 
const far = 1000; 
// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

3.创建渲染器

创建渲染器，并执行render渲染操作。

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 渲染
renderer.render(scene, camera);

4.添加物体

在three.js中，使用Mesh网格表示一个物体，网格包含几何体（Geometry）和材质（Material）。

创建一个立方体，添加到场景中。 

// 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

上述代码，创建了长宽高均为100个单位的立方体，使用法向量材质MeshNormalMaterial，然后基于几何形状和材质创建立方体，最后添加到场景中。

5.定位相机

完成上述步骤后，你却会发现此时的屏幕上是一片黑暗，什么也看不到。

这是因为我们创建的相机和物体最初都位于场景的中心(0, 0, 0)，并且相机也默认看向(0, 0, 0)这个点，所以透视相机不会渲染内容。我们只需移动一下相机位置就可以了。

// 定位相机
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(0, 0, 0); //设置相机方向

效果：

完整代码：

import * as THREE from "three";

// 创建场景
const scene = new THREE.Scene();
// 创建透视相机
const fov = 45;
const aspect = window.innerWidth / window.innerHeight;
const near = 1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
// 定位相机
camera.position.set(200, 300, 200); 
camera.lookAt(0, 0, 0); 

// 创建立方体(几何+材质)
const cubeGeometry = new THREE.BoxGeometry(100, 100, 100);
const cubeMaterial = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 添加到场景
scene.add(cube);

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 渲染
renderer.render(scene, camera);

结语 

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~    

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

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

相关文章

1.2作业

1.2作业

温湿度数据通过中断处理显示到数码管中 main.c #include "spi.h"#include"si7006.h"int main(){int i0,j0,m0,n0;int num[10] {0xFC,0x60,0xDA,0xF2,0x66,0xB6,0x3E,0xE0,0xFE,0xF6};SPI_init();unsigned short hum;short tem;//进行si7006的初始化si700…
阅读更多...
如何让自己的写的程序在阿里云一直运行

如何让自己的写的程序在阿里云一直运行

购买了阿里云服务器后&#xff0c;每次要用自己写在阿里云的服务器程序都要连接到云端 然后./运行该程序&#xff0c;而且每次一断开终端&#xff0c;该服务器就会自动停止&#xff0c;这样使用相当麻烦。那怎样才能让我们的服务器一直在云端后台运行&#xff0c;即便退出终端…
阅读更多...
Linux第19步_安装“Ubutun交叉编译工具链”

Linux第19步_安装“Ubutun交叉编译工具链”

由于Ubuntu系统使用的GCC编译器&#xff0c;编译结果是X86文件&#xff0c;只能在X86上运行&#xff0c;不能在ARM上直接运行。因此&#xff0c;还要安装一个“Ubutun交叉编译工具链”&#xff0c;才可以在ARM上运行。 arm-none-linux-gnueabi-gcc是 Codesourcery 公司&#x…
阅读更多...
【力扣每日一题】力扣2478从链表中移除节点

【力扣每日一题】力扣2478从链表中移除节点

题目来源 2478.从链表中移除节点 题目描述 给你一个链表的头节点 head 。 移除每个右侧有一个更大数值的节点。 返回修改后链表的头节点 head 。 示例 示例1&#xff1a; 输入&#xff1a;head [5,2,13,3,8] 输出&#xff1a;[13,8] 解释&#xff1a;需要移除的节点是 5 …
阅读更多...
Java并发集合详解

Java并发集合详解

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;在这篇博客中&#xff0c;咱们将一起深入探索Java中的并发集合。多线程编程是一个不可或缺的部分&#xff0c;它能让程序运行得更快&#xff0c;处理更多的任务。但同时&#xff0c;多线程也带来了一些挑战&…
阅读更多...
unity编辑器Scene界面输出位置及路径

unity编辑器Scene界面输出位置及路径

工程Asset下新建Editor文件夹&#xff1b; Editor文件夹下新建脚本LogPosition using System.Collections; using System.Collections.Generic; using UnityEditor; using UnityEngine; public class LogPosition : EditorWindow {//最终输出的数据.static string logtext;//增…
阅读更多...
大学生搜题软件，未来可期吗？

大学生搜题软件，未来可期吗？

作为一家专注于软件开发的公司《智创有术》&#xff0c;我们致力于为客户提供创新、高效和可靠的解决方案。通过多年的经验和专业知识&#xff0c;我们已经在行业内建立了良好的声誉&#xff0c;并赢得了客户的信任和支持。 支持各种源码&#xff0c;网站搭建&#xff0c;APP&a…
阅读更多...
32.virtual reality system concepts illustrated using OSVR

32.virtual reality system concepts illustrated using OSVR

32.1 Common Space This section describes the spaces needed to support viewing and interacting with the virtual world. 本节介绍支持查看虚拟世界并与之交互所需的空间。 The spaces required for supporting viewing and interacting with a virtual world can vary …
阅读更多...
记一次服务器被入侵的排查过程

记一次服务器被入侵的排查过程

起因 阿里云安全中心报告了告警信息&#xff0c;同时手机短信、邮件、电话也接收到了来自阿里云的风险通知&#xff0c;感觉这方面阿里云还是不错。 排查及解决过程 这条wget指令究竟是怎么被运行的 我无法定位到攻击人员是通过什么样的方式让我的java程序执行了wget这条指…
阅读更多...
转后端一年半双非本科Java无实习进大厂，给双非朋友经验分享

转后端一年半双非本科Java无实习进大厂，给双非朋友经验分享

背景介绍 B站有详细视频&#xff0c;同名搜索即可。 今天文章想分享的是我踩过的坑以及那些做的是值得大家参考。 有需要就加V&#xff1a; zhazhagao_ 进了快手(如果你觉得不是大厂那就不是!)&#xff1a; 真双非本科: 安徽某双非无实习: 因为编程语言问题,去过之后发现不喜欢…
阅读更多...
Java中请求生成唯一追溯TraceId

Java中请求生成唯一追溯TraceId

Java中请求生成唯一追溯TraceId 一&#xff1a;背景 因为是微服务架构,平常日志太多,看日志不太好查,所以想要从一整个链路当中获取一个唯一标识,比较好定位问题&#xff0c; 原理就是从gateway网关将标识传递到下游,下游服务拿到这个标识,响应结束后将traceId反向写入响应体…
阅读更多...
C# Onnx Chinese CLIP 通过一句话从图库中搜出来符合要求的图片

C# Onnx Chinese CLIP 通过一句话从图库中搜出来符合要求的图片

目录 效果 生成图片特征 查找踢足球的人 测试图片 模型信息 image_model.onnx text_model.onnx 项目 代码 Form1.cs Clip.cs 下载 C# Onnx Chinese CLIP 通过一句话从图库中搜出来符合要求的图片 效果 生成图片特征 查找踢足球的人 测试图片 模型信息 image_mod…
阅读更多...
RFM会员价值度模型

RFM会员价值度模型

模型基本原理 会员价值度用来评估用户的价值情况&#xff0c;是区分会员价值的重要模型和参考依据&#xff0c;也是衡量不同营销效果的关键指标。 价值度模型一般基于交易行为产生&#xff0c;衡量的是有实体转化价值的行为。常用的价值度模型是RFM RFM模型是根据会员 最近…
阅读更多...
如何在 Windows 上从电脑硬盘恢复照片

如何在 Windows 上从电脑硬盘恢复照片

如今&#xff0c;随着相机设备的普及&#xff0c;您可以轻松地一次拍摄一堆照片&#xff0c;将它们传输到硬盘上&#xff0c;然后再拍摄更多照片。但是&#xff0c;如果您的所有照片意外丢失在驱动器中怎么办&#xff1f;你能恢复它们吗&#xff1f; 在本指南中&#xff0c;我…
阅读更多...
配置文件的创建和部署

配置文件的创建和部署

配置描述文件&#xff08;Configuration Profiles&#xff09;的格式为xml&#xff0c;其提供了一个非常容易的方式去给电脑、移动设备或用户定义一些设置或限制&#xff0c;你可以使用Jamf Pro去创建这样的配置文件。 &#xff08;配置文件的负载&#xff09; 有关配置文件的配…
阅读更多...
Spring——Spring AOP1(代理模式Proxy)

Spring——Spring AOP1(代理模式Proxy)

代理&#xff08;Proxy&#xff09;模式 1.创建工程 2.代理&#xff08;Proxy&#xff09;模式介绍 作用&#xff1a;通过代理可以控制访问某个对象的方法&#xff0c;在调用这个方法前做前置处理&#xff0c;调用这个方法后做后置处理。&#xff08;即&#xff1a; AOP的微观…
阅读更多...
Postman 并发测试入门指南：如何模拟用户并发请求？

Postman 并发测试入门指南：如何模拟用户并发请求？

背景介绍 最近&#xff0c;我们发起了一个在线图书管理系统的项目。我负责的一个关键模块包括三个主要后台接口&#xff1a; 实现对books数据的检索。实施对likes数据的获取。通过collections端点访问数据。 应对高流量的挑战 在设计并部署接口时&#xff0c;我们不可避免地…
阅读更多...
Anaconda安装教程及注意事项

Anaconda安装教程及注意事项

一、Anaconda简介 Anaconda是一个大数据处理、科学计算领域的Python发行版。它包含了众多流行的开源软件和库&#xff0c;如NumPy、SciPy、Matplotlib、Pandas等&#xff0c;并同时提供了一个方便的打包、分发和管理这些工具的工具集合&#xff0c;如conda和pip等。Anaconda还提…
阅读更多...
Service Weaver：Google开源基于分布式应用程序开发的框架，重新定义微服务边界

Service Weaver：Google开源基于分布式应用程序开发的框架，重新定义微服务边界

大家好&#xff0c;我是萧楚河&#xff0c;公众号&#xff1a;golang面试经典讲解&#xff0c;感谢关注&#xff0c;一起学习一起成长。一、前言 今年6月&#xff0c;一群谷歌员工&#xff08;由谷歌软件工程师Michael Whittaker领导&#xff09;发表了一篇名为“Towards Mode…
阅读更多...
transforms图像增强（一）

transforms图像增强（一）

一、数据增强 数据增强&#xff08;Data Augmentation&#xff09;是一种常用的数据预处理技术&#xff0c;通过对训练集进行各种变换和扩增操作&#xff0c;可以增加训练数据的多样性和丰富性&#xff0c;从而提高模型的泛化能力。 数据增强的目的是通过对训练集中的图像进行…
阅读更多...
最新文章

Copyright @ 2022~2023