先看下原始效果，原作者的地址找不到了，用了我fork的
https://codepen.io/shdwu/pen/dyGmmLE
还是很炫酷的，现在我们要了解效果实现的原理
HTML
canvas#canvas
这部分是用pug写的，相对于html的优点就是字少....
CSS
body {
margin: 0;
overflow: hidden;
}
#canvas {
background: radial-gradient(circle farthest-corner at center top, #071021, #19324a);
}
body的样式就不说了，应该都看得懂。
着重看下background样式的写法：
本人英文不好：搜了一下这个样式的英文意思，radial是螺旋，放射的，径向的意思 gradient 应该是渐变，合起来就是 径向渐变，这里贴出来 方便和我一样英文稀碎的朋友
radial-gradient是一个css函数，接收三个参数，第一个参数是对渐变形状和位置的定义，后面两个是渐变的起点和终点的颜色
JS
这部分是就是核心了
- 首先是依赖了three.js
那么three.js是个啥? 简单的说是一个js的3d库，封装了webgl的一些方法，提供了更方便的API。
我也没用过，具体的用法，我们接着学，老哥我也是新手，：）
- step1
window.addEventListener("load", init)
加了一个事件监听，事件发生时调用init
load这个事件多讲一句，这个是在window的所有资源，包含图片和其他媒体资源都加载完成后，触发，window.onload这个是一个方法，load触发后onload函数会执行
- step2
function init() {
let rot = 0; // 角度
// レンダラーを作成
const renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("canvas"),
alpha: true
});
// シーンを作成
const scene = new THREE.Scene();
// フォグを作成
scene.fog = new THREE.Fog(0xaaaaaa, 50, 2000);
// カメラを作成
const camera = new THREE.PerspectiveCamera(70, 1000);
// 形状データを作成
const geometry = new THREE.Geometry();
for (let i = 0; i < 10000; i++) {
const star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread(2000);
star.y = THREE.Math.randFloatSpread(2000);
star.z = THREE.Math.randFloatSpread(2000);
geometry.vertices.push(star)
}
// マテリアルを作成
const material = new THREE.PointsMaterial({
color: 0xffffff
});
const starField = new THREE.Points(geometry, material);
scene.add(starField);
// 毎フレーム時に実行されるループイベント
function render() {
rot += 0.1;
// ラジアンに変換する
const radian = (rot * Math.PI) / 180;
// 角度に応じてカメラの位置を設定
camera.position.x = 1000 * Math.sin(radian);
camera.position.z = 1000 * Math.cos(radian);
// 原点方向を見つめる
camera.lookAt(new THREE.Vector3(0, 0, 0));
// レンダリング
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
// リサイズイベント発生時に実行
window.addEventListener("resize", onResize);
function onResize() {
// サイズを取得
const width = window.innerWidth;
const height = window.innerHeight;
// レンダラーのサイズを調整する
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
// カメラのアスペクト比を正す
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
// 初期化のために実行
onResize();
}
后面所有的都是init方法的内容，那么让我们看看这个日本小哥写了些啥
i. 定义了一个渲染器，传入了canvas, alpha。这里可以很明显的看出来使用了WebGL作为three.js的运行模式，canvas属性是一个dom对象，作为renderer的输出。alpha表示背景是否透明，默认是false，这里设为true。那这是什么用意呐。其实小哥使用css实现了径向渐变的背景，如果这里不用透明的背景，径向渐变就看不到了。
我理解是three.js输出的图像是在canvas之上的另一个图层中。
ii. 定义一个scene，scene类似于一个容器，放入了所有需要renderer渲染的内容，我把他理解为一个画布。
iii. fog是雾的意思，这个应该是three.js为了方便开发人员，封装的一些效果。第一个参数是雾的颜色。大家可以试着改改这个参数，改了之后星星的颜色会变化。后面两个参数是限制了fog效果的范围。我们先往下看，后面细讲。
iv. 定义一个相机camera，那么相机是啥呐，其实相机就是你观察scene的方式，你可以把它想成是你的眼睛，scene中的物体是事实存在的，但是你不观察它，就没有图像，你闭上眼睛就是天黑，大家理解理解。perspective是透视的意思，PerspectiveCamera就是透视相机的意思，这个我说不太清楚。找到了一篇文章 大家看下前面两段大概就懂了。这里的两个参数，第一个是视锥的高度，就是你能看见的最远距离，第二个参数是你视窗的width/height，比如显示器就是1920/1080=16:9，这里相当于在场景里面放了一个虚拟的显示器，你只能透过这个显示器观察场景。这里设的比较大，1000，实际上会在后面进行重置，我是说一直改着没效果，头铁了。
v. 后面定义了10000个矢量，坐标在2000以内随机，并用这些矢量定义了一个几何体。用这个几何体，和素材定义了一个点阵的图像。在这我们就可以看看之前第iii步中fog的意义，scene.fog是指在相机距离物体50以内的物体的本色，不被雾影响，在50-2000这个范围内的物体会线性的变为雾的颜色，而大于2000的物体只能看见雾的颜色。而设置为2000就是和矢量的坐标有关，大家可以试着改改，效果会有变化。
vi. 设置相机在场景的位置，radian最终的计算的是距离x轴正向的角度（PS: 大家回忆一下高中数学吧），lookAt设置了视锥的方向。然后调用requestAnimationFrame方法，这个是一个html5中实现动画的API，就是不断的请求render修改相机的位置。
vii. 这部分就是resize事件的绑定，重新修改了renderer的大小和分辨率，还有就是camera的长宽比，updateProjectionMatrix是因为修改了camera属性后，必须调用这个函数，不然不生效。
好了，这个效果的实现原理就讲完了，我也是才学，写出来和大家分享一下，也做一下记录。后面还会分享一些有趣的效果，写的不对不好的地方，欢迎大家指正。
网友评论