偶尔一个css效果-three.js night sky代码解读

先看下原始效果，原作者的地址找不到了，用了我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属性后，必须调用这个函数，不然不生效。

好了，这个效果的实现原理就讲完了，我也是才学，写出来和大家分享一下，也做一下记录。后面还会分享一些有趣的效果，写的不对不好的地方，欢迎大家指正。

偶尔一个css效果-three.js night sky代码解读

HTML

CSS

JS

你可能感兴趣的:(偶尔一个css效果-three.js night sky代码解读)