背景
近期学习了 WebGL
和 Three.js
的一些基础知识,于是想结合最近流行的酸性设计风格,装饰一下个人主页,同时总结一些学到的知识。本文内容主要介绍,通过使用 React + three.js
技术栈,加载 3D模型
、添加 3D文字
、增加动画、点击交互等,配合样式设计,实现充满设计感的 🤢
酸性风格页面。
基础知识
Three.js
Three.js
是一款基于原生 WebGL
封装运行在浏览器中的 3D引擎
,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。是一款使用非常广泛的三维引擎。可以在 three.js官方中文文档 进一步深入学习。
酸性设计
酸性设计
一词翻译自 Acid Graphics
,起源于 上世纪90年代
的酸浩室音乐、电子舞曲以及嬉皮士文化。在设计领域,这种酸性美学承载一种 自由的主张
,怪诞的图形,大胆鲜明的配色,特殊的材料质感,搭配多种字体,组成了独特的酸性设计风格。
总之,鲜艳高饱和度
的色彩组合;黑灰色打底高饱和 荧光色
点缀画面的 五彩斑斓的黑
;充满未来感、炫酷、充满科技感的液态金属
、玻璃
、铝箔塑料
等材质;随机
的元素、图形的布局;不断 重复
、裁切、组合 几何图形
等都是酸性设计风格。酸性风格在音乐专辑封面、视觉海报、书籍电影封面、网页设计中也逐渐开始流行。
实现效果
在线预览:https://tricell.fun
实现
3D模型
场景初始化
🌏
创建场景
scene = new THREE.Scene();
📷
初始化相机
透视相机 PerspectiveCamera
的 4个
参数分别是指:视场、长宽比、近面、远面。
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
// 设置相机位置
camera.position.set(600, 20, -200);
// 相机聚焦到屏幕中央
camera.lookAt(new THREE.Vector3(0, 0, 0));
💡
初始化光源
添加 半球光源 HemisphereLight
:创建室外效果更加自然的光源
light = new THREE.HemisphereLight(0xffffff, 0x444444);
light.position.set(0, 20, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 20, 10);
light.castShadow = true;
scene.add(light);
添加 环境光 AmbientLight
:
var ambiColor = '#0C0C0C';
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight);
添加辅助工具(可选)
📦
添加辅助网格
GridHelper
可用于添加网格辅助线,也可用于装饰,通过 GridHelper(size, divisions, colorCenterLine, colorGrid)
实现。
size
:网格宽度,默认值为10
。divisions
:等分数,默认值为10
。colorCenterLine
:中心线颜色,默认值为0x444444
。colorGrid
: 网格线颜色,默认值为0x888888
。
var grid = new THREE.GridHelper(1000, 100, 0x000000, 0x000000);
grid.material.opacity = 0.1;
grid.material.transparent = true;
grid.position.set(0, -240, 0);
scene.add(grid);
📦
添加相机控件
通过相机控件 OrbitControls
可以对三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景,而是相机的参数。开发时 OrbitControls.js
需要单独引入。
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();
📦
添加性能查看插件
stats
是一个 Three.js
开发的辅助库,主要用于检测动画运行时的帧数。stats.js
也需要单独引入。
stats = new Stats();
container.appendChild(stats.dom);
加载模型
本文示例用到的 扔铁饼的人