Three.js 入门（一）— 开发环境搭建

最新推荐文章于 2024-06-01 09:43:25 发布
最新推荐文章于 2024-06-01 09:43:25 发布
阅读量1k 收藏 9
点赞数 30
分类专栏： Three.js 开发之路 文章标签： threejs javascript typescript webgl parcel
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40120946/article/details/138188812
版权

开发环境搭建

WebGL介绍

WebGL

WebGL ：WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 元素中使用。

详细了解可参考官方文档。

Canvas

Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL。

渲染管线

Webgl的渲染依赖底层GPU的渲染能力。所以WEBGL 渲染流程和 GPU 内部的渲染管线是相符的。
在这里插入图片描述

Threejs 介绍

Three.js是基于webGL的封装的一个易于使用且轻量级的3D库，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大，用户不需要详细地学习 WebGL，就能轻松创作出三维图形，是前端开发者研发3D绘图的主要工具。

WebGL和Three.js的关系：
在这里插入图片描述

本地搭建threejs官方网站

从Github上下载three.js
在这里插入图片描述
推荐直接下载ZIP包，文件有点大。

下载解压后，使用VSCode打开：
在这里插入图片描述
使用npm（yarn）运行安装依赖：npm install
在这里插入图片描述
运行之后：
在这里插入图片描述
这里介绍几个重要的部分：

  1. docs ：three.js的官方文档，支持中文，介绍了入门开发，环境安装配置等等；
  2. editor：threejs可视化编辑器，只有一些简单功能；
  3. examples：介绍了官方给的案例，有源码可供学习；
  4. manual：官方使用手册，介绍了相关开发功能和源码；
  5. playground：材质编辑器，类似UE材质编辑蓝图和Unity中的ShaderGraph；

使用Parcel搭建three.js开发环境

为了方便模块化进行three.js项目的学习和开发，又不用学习太多的配置，增加学习成本，所以就使用Parcel这个web应用打包工具。
Parcel官网

安装

在开始之前，您需要安装 Node 和 Yarn 或 npm，并为您的项目创建一个目录。然后，使用 Yarn 将 Parcel 安装到您的应用程序中：
Yarn：yarn add --dev parcel
npm：npm install --save-dev parcel

安装three：npm install --save three

项目设置

创建src文件夹，并且创建index.html、styles.css、main.js文件
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Threejs Parcel App</title>
    <link rel="stylesheet" href="./assets/css/styles.css" />
  </head>
  <body>
    <script src="./main.js" type="module"></script>
  </body>
</html>

styles.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: skyblue;
}

main.js

console.log('Hello world!');

package.json

{
  "name": "threejs-parcel-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.12.0"
  },
  "dependencies": {
    "three": "^0.163.0"
  }
}

执行npm run dev 运行后：
在这里插入图片描述

在这里插入图片描述

渲染第一个场景和物体

场景

Three.js 的核心可以说是它的场景图（scene graph）。场景图在 3D 引擎是一个图中节点的层次结构，其中每个节点代表了一个局部空间（local space）。
在这里插入图片描述

const scene = new THREE.Scene();

相机

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,//视野角度（FOV）
  window.innerWidth / window.innerHeight,//长宽比（aspect ratio）
  0.1,//近截面（near）
  1000//远截面（far）
);
// 设置相机位置
camera.position.set(0, 0, 10);

在这里插入图片描述

渲染器

通过WebGL 将画面渲染到canvas上显示出来。

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

加入立方体

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
//给它一个材质，来让它有颜色
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

完整脚本

main.js

import * as THREE from "three";

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

如果这里报警告 ：在这里插入图片描述
需要npm i --save-dev @types/three 安装依赖。

运行效果：

在这里插入图片描述

其他

个人比较喜欢用ts，这里把项目改成ts配置附上

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Threejs Parcel App</title>
    <link rel="stylesheet" href="./assets/css/styles.css" />
  </head>
  <body>
    <script src="./main.ts" type="module"></script>
  </body>
</html>

styles.css

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: skyblue;
}

main.ts

import * as THREE from "three";

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

package.json

{
  "name": "threejs-parcel-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "types": "dist/types.d.ts",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/three": "^0.163.0",
    "parcel": "^2.12.0"
  },
  "dependencies": {
    "three": "^0.163.0"
  }
}
iukam
关注
  • 30
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
初识 three.js
肖的博客
11-15 446
认识 three.js 官方文档 安装 yarn add three 引入 import * as THREE from 'three' 使用 threeAnimation() { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.in...
ThreeJS:项目搭建
席木木的博客
05-02 698
ThreeJS:项目搭建，如何结合ThreeJS构建Vite、Vue、React项目。
探索Three-tools：强化你的Three.js开发体验
gitblog_00081的博客
06-01 461
探索Three-tools：强化你的Three.js开发体验 项目地址:https://gitcode.com/oslabs-beta/BACE 在WebGL的世界里，Three.js是构建惊人的3D交互体验的基石，而今天我们将探索一个旨在提升Three.js开发者生产力的神器——Three-tools by BACE。这款基于three-devtools进化而来的开源工具，不仅继承了其前身的精华...
ThreeJS环境搭建
qq_41014870的博客
02-20 919
ThreeJs是一款基于WebGL封装的在浏览器中运行的 3D 库，你可以用它来创造你所需要的一系列3D场景，如最近比较火的数字孪生、元宇宙可视化等等，如果你想深入学习Three.js，那么就跟着我的文章一起学习就好了。
初识 ThreeJS （ThreeJS 相关环境搭建）
两个月亮
01-23 4167
ThreeJS 是基于WebGL 封装的一个易于使用且轻量级的 3D 库，ThreeJS 对 WebGL 提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，同时也极大地提高了性能。，如果你希望可以快速的使用 ThreeJS 官网提供的这些功能（你还可以获取例子中的源码用于学习），可以将 ThreeJS 网站的项目文件下载到本地并对其进行搭建。当然你也可以通过终端的提示，通过访问链接。在完成上述操作后，使用如下命令安装该项目可能缺少的依赖项（第三方模块或插件），这些依赖项被记录在项目中的。
threejs教程
qq_34631220的博客
12-04 1160
threejs教程
Three.JS教程1 环境搭建、场景与相机
编程圈子-谢厂节的博客
01-17 1263
Three.js 是一款基于JavaScript的开源3D图形库，它简化了在Web上创建复杂的3D场景和动画的过程。Three.js 由Ricardo Cabello（也称为mr.doob）于2010年创建，最初是为了填补WebGL技术在那个时候的不足而设计的。随着WebGL的普及和浏览器性能的提升，Three.js逐渐成为Web上3D图形编程的事实标准之一。官网地址： https://threejs.org/
（一）ThreeJS本地环境搭建
轮回的秋
11-14 2101
threeJS API、编辑器、示例代码部署在外网节点，访问不稳定。
vite搭建three.js的开发环境
01-06
本篇文章将详细介绍如何使用Vite搭建一个Three.js的开发环境。 首先，我们需要确保我们的系统已经安装了Node.js，因为Vite是基于Node.js运行的。如果尚未安装，可以访问https://nodejs.org/ 下载并安装适合你操作...
three.js 入门三：THREE.BoxGeometry 解析
03-14
在Three.js这个强大的JavaScript 3D库中，THREE.BoxGeometry是用于创建立方体几何形状的基础类。它允许开发者构建具有六个平面的三维立方体，每个面由两个三角形组成。在WebGL和3D渲染中，BoxGeometry是构建场景中的...
THREE.JS开发指南源码
07-20
《THREE.JS开发指南源码》是针对学习Three.js这一流行JavaScript库的开发者们的一份宝贵资源。Three.js是一个强大的3D库，它允许在Web浏览器中创建和展示复杂的三维图形，无需用户安装任何额外的软件。这个压缩包...
three.js 入门案例详解
10-18
three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和展示3D图形。它简化了WebGL的复杂性，让开发者能够轻松地构建交互式的3D应用。本篇文章将通过一个简单的入门案例，帮助初学者理解three.js 的基本...
Three.js快速入门教程
10-21
此外，还有一些优秀的教程和书籍，如《Three.js入门指南》、《Three.js开发指南》和《Learning Three.js》等，可以作为学习资源。 要注意的是，Three.js的更新频繁，不同版本间的API可能存在差异。因此，在查阅资料...
three.js-简单上手
公众号 @ 桃小瑞
12-04 2421
three.js 简单上手，入门webgl 领域
Threejs入门-安装教程
m0_47305843的博客
12-24 3562
本篇文章是对于第一次接触threejs并且对官方安装文档看不懂以及操作不熟的同学，本文提供有需要的帮助！
搭建基于webgl的显示方案（一）——环境搭建
小石子的博客
07-28 1060
搭建html和js运行环境
在Vue中搭建Three.js环境(超详细、保姆级)，创建场景、相机、渲染器《一》
邵群超的博客
03-04 4596
Three.js 是一款基于 WebGL的 JavaScript 3D 库，它封装了 WebGL API，为开发者提供了简单易用的 API 来在 Web 浏览器中展示 3D 图形。Three.js 提供了多种组件、方法和工具，用于创建和处理 3D 图形，使得开发者可以在 Web 浏览器中快速创建 3D 场景和动画，而不需要深入了解 WebGL 的底层实现。简单来说：它就是一个绘制 3D 的 javaScript 轻量级框架；
three.js入门教程--零基础也能学会
baekpcyyy的博客
11-28 2207
three.js入门教程--零基础也能学会
如何安装和使用three.js
热门推荐
热爱技术，享受生活
09-17 1万+
Three.js 是一款基于 JavaScript 的开源 3D 图形库，用于创建和显示各种三维场景、对象和特效。它提供了丰富的功能和 API，使开发者能够轻松地在浏览器中渲染复杂的 3D 图形。Three.js 提供了一套简化的接口和工具，包括相机、几何体、材质、光源等，以及各种渲染技术，如阴影、透明度、纹理映射等。通过使用 Three.js，开发者可以通过编写少量的代码来创建交互式的、高性能的 3D 场景，无需深入了解底层的 WebGL 技术。
three.js环境配置
最新发布
06-17
three.js是一个基于WebGL的JavaScript库，用于创建逼真的3D图形和动画。在开始使用three.js之前，你需要进行一些环境配置。以下是一些关键步骤： 1. 引入three.js库：在HTML文件中，你需要链接到three.js的CDN，或者将其复制到项目中的js文件夹并引用。例如： ```html <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script> ``` 2. 加载场景、相机和渲染器：创建一个`Three.js`对象、`PerspectiveCamera`和`WebGLRenderer`，这是基本结构： ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); ``` 3. 渲染器设置：将渲染器挂载到页面上，并设置它的大小： ```javascript renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 4. 窗口resize监听：添加窗口大小改变时调整视口的事件处理： ```javascript window.addEventListener('resize', onWindowResize); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } ``` 5. 渲染循环：创建一个`requestAnimationFrame`函数来持续渲染动画： ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值