阅读本文你将了解到

three.js的使用
学习Three.js最佳方法 The Best Way to Learn Three.js
开发每日构建版谷歌浏览器Google Chrome Canary
事件处理react-three-fiber
模型处理react-postprocessing
建模软件Blender
WebGL与WebGPU关系
使用apple LiDAR扫描建模
逆渲染 2D → 3D

Three.js的使用

Three.js官网

截屏2022-07-11 16.42.08.png

🌏 官网地址：threejs.org

学习Three.js最佳方法

截屏2022-07-19 18.06.10.png

🌏 官网地址：The Best Way to Learn Three.js

项目打包PARCEL

截屏2022-07-11 16.42.33.png 🌏 官网地址：parceljs.org

安装

yarn add --dev parcel

安装 gsap / dat.gui / three

yarn add gsap dat.gui three

Three.js项目创建

创建场景

import * as THREE from 'three';
// 创建场景
const scence = new THREE.Scene();

创建相机(透视相机 )

// 2.创建相机(透视相机 )
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight, // 屏幕宽度/屏幕高度
    0.1, // 近端
    10000 // 远端
);

相机添加到场景中

// 相机添加到场景中
scence.add(camera);

创建几何体

const cubeGemetry = new THREE.BoxGeometry(2, 2, 2);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff55 }); // 基础的网格材质

// THREE.Mesh(几何体,材质)创建物体
const cube = new THREE.Mesh(cubeGemetry, cubeMaterial);

将几何体添加到场景中

// 将几何体添加到场景中
scence.add(cube);

控制器 OrbitControls

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼, 更真实效果, 必须在动画动画循环调用 update()
controls.enableDamping = true;

初始化渲染器

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

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

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

function render() {
    renderer.render(scence, camera);
    requestAnimationFrame(render); // 每一帧执行一次
}

render();

完整Demo实现

1. 使用three.js渲染第一个场景

2.使用控制器查看3d物体 OrbitControls

3.添加坐标轴辅助器 THREE.AxesHelper

4.设置物体移动

5.移动缩放与旋转

6.应用requestAnimationFrame

7.通过Clock跟踪时间处理动画应用

8.`Gsap动画库`基本使用与原理

9.Gsap控制动画属性与方法

10.根据尺寸变化实现自适应画面

11.调用js接口控制画面布局全屏和退出全屏(双击全屏/退出全屏)

12.应用图形用户界面变更变量

13.掌握几何体顶点_UV_法向属性

14.BufferGeometry设置顶点创建矩形

15.生成酷炫三角形科技物体

16.常见网络几何体

🌏 hreejs.org/docs/index.html?q=geometry#api/en/geometries/ConeGeometry

17.初识材质与纹理

18.详情纹理偏移_旋转_重复

19.设置纹理显示算法与mipmap

20.透明材质与透明纹理

21.环境遮挡贴图与强度

22.详情PBR物流渲染

23.标注网络材质与光照物理效果

「番外篇」六面纹理贴图

WebGL与WebGPU关系

www.bilibili.com/video/BV12i…

Google Chrome Canary(开发每日构建版)

下载

截屏2022-07-11 16.34.12.png

🌏 下载地址： www.google.com/intl/zh-CN/…

开启webgpu

网址输入🌏 chrome://flags/ 搜索webgpu可开启

逆渲染 2D → 3D

🌏 zhuanlan.zhihu.com/p/237567928

建模软件Blender

截屏2022-07-11 16.40.30.png

下载

🌏 下载地址：www.blender.org/download/

OBJ格式

老牌通用3d模型文件，不包含贴图，材质，动画等信息。

GLTF格式（图形语言传输格式）

由OpenGL官方维护团队推出的现代3d模型通用格式，可以包含几何体、材质、动画及场景、摄影机等信息，并且文件量还小。有3D模型界的JPEG之称。

使用apple LiDAR扫描建模

apple store 下载 3d Cannner App
导出 .gltf 格式文件
Three GLTFLoader 加载文件

事件处理 react-three-fiber

🌏 github: react-three-fiber
🗳 使用：react-three-fiber文档
🏷 掘金：juejin.cn/post/707000…

模型处理 react-postprocessing

🌏 github： react-postprocessing
🗳 使用： react-postprocessing文档

项目地址：

欢迎一起来玩啊

渲染你的第一个web 3D场景 (Three.js)