Threejs系列：雾
Thresj支持雾气的效果，本文简单介绍下
首先创建一个物体，巨长的长方体
const geometry = new THREE.BoxGeometry( 1, 1,100 );
const texttureLoader = new THREE.TextureLoader()
const material = new THREE.MeshBasicMaterial( {
color: 'green'
} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
添加线性雾// 雾
scene.fog = new THREE.Fog(0x999999, 0, 50)
scene.background = new THREE.Color(0x999999);
添加指数雾scene.fog = new THREE.FogExp2(0x999999, 0.1)
线性顾名思义，就是线性递减。从图片对比中明显看出，指数雾比线性雾气浓烈些许。
Threejs系列：贴图
本文重点介绍threejs迷惑大法的基石：贴图在前面的文章中，我们实际上已经用到了贴图。比如这种：
这种：
当然了，还有这种高端的：
我们呢平时看到的那些炫酷的效果，其本质，就是各种贴图的叠加。玩过早期的游戏例如cs的同学，应该深有体会。那么借助本文，我们尝试缕一缕threejs的，各种贴图
物体贴图创建一个球体，贴出了一个地球仪
const geometry = new THREE.SphereGeometry( 4 );
const texttureLoader = new THREE.TextureLoader()
const pi = texttureLoader.load('./earth.jpg')
const material = new THREE.MeshBasicMaterial( {
map: pi,
} );
const cube = new THREE.Mesh( geometry, material );
cube.position.x = 1
cube.position.y = 1
cube.position.z = 1
s ...
Threejs系列：物体
本文介绍Threejs中物体(geometory)相关内容threejs中常见几何体包括：平面体、立方体、圆、锥体、柱体、圆环、四面、八面、十二面缓冲、挤压缓冲体、形状缓冲几何体、圆环扭结、管道体等等
1. 空间的中的物体由一个个三维的点构成
直接给点
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
-1.0, -1.0, 1.0, // v0
1.0, -1.0, 1.0, // v1
1.0, 1.0, 1.0, // v2
1.0, 1.0, 1.0, // v3
-1.0, 1.0, 1.0, // v4
-1.0, -1.0, 1.0 // v5
] );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
索引给点const geometry = new THREE.Buf ...
Threejs系列：材质
本文介绍材质相关内容我们说threejs中，一个个的物体都是网格（cube），由物体（geometory）和材质（material）构成。物体决定其长啥样，而材质，决定了物体表面显示啥样。
创建一个简单的立方体
const geometry = new THREE.BoxGeometry( 4, 4, 4 );
const material = new THREE.MeshBasicMaterial( {color: 0x000000} );
const cube = new THREE.Mesh( geometry, material );
cube.position.x = 1
cube.position.y = 1
cube.position.z = 1
scene.add( cube );
一个标准的立方体。其表面材质就是代码中的material。需要注意的是，我们的Mesh关于材质的参数，可以是一个材质，也可以是一组。
const material1 = new THREE.MeshBasicMaterial( {color: 'bla ...
算法：二叉树
本文简单梳理二叉树相关话题一： 二叉树的遍历
前序遍历: 根左右
/*
* function TreeNode(x) {
* this.val = x;
* this.left = null;
* this.right = null;
* }
*/
/**
* 代码中的类名、方法名、参数名已经指定，请勿修改，直接返回方法规定的值即可
*
*
* @param root TreeNode类
* @return int整型一维数组
*/
function preorderTraversal( root ) {
function preOrder(root){
if(root == null) return;
res.push(root.val);
preOrder(root.left);
preOrder(root.right);
}
let res = [];
preOrder(root);
return res;
// write ...
前端缓存相关
谈到前端性能优化，缓存策略是必聊得。今天咱们就来扒一扒主要的两部分：强缓存和协商缓存。 以前我的理解就是：当我们需要向服务器请求资源时，浏览器首先会检查，是否命中强缓存。如果命中，则直接从缓存中拿资源，注意，此情况不需要像后端发送请求。如果没有命中，就会像后端真实发送请求，然后由后端判断，是否命中协商缓存。若命中，返回304，告诉前端资源未更新，可以用本地的，若没有命中，则找到对应资源返回，状态码通常200。上面的表述不能说不对，但是显然缺少细节。现在既然要来扒一扒，咱么就深入一下。
1. 强缓存：强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段，在这里我们可以忽略。我们重点来讨论的Cache-Control这个字段。Cache-Control是HTTP/1.1标准下的。 一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。 为什么指定缓存过期时间需要两个字段呢？ 因为有 ...
Threejs系列：着色器
本文研究下threejs中，着色器的相关内容及使用方法Shader（着色器）的功能如其名称： 上色用的。分为两种： 顶点着色器和片段着色器
顶点着色器： 用来确定输入的点数据在屏幕上的具体位置,即：定位
片段着色器： 确定点的颜色，并上色.即：着色
编写着色器规范编写着色器需要用到glsl语言，即：opengl shader language.一种类似于c的东东。
首先分别创建顶点着色器和片段着色器文件，在main.js中引入
import vertexShader from './shader/vertexShader.glsl'
import fragmentShader from './shader/fragmentShader.glsl'
...
...
// 创建着色器材质
const geo = new THREE.PlaneGeometry(1, 1)
const shaderMaterial = new THREE.RawShaderMaterial({
vertexShader: vertexShader,
fragmentShader: ...
Blender备忘录： 第一回
本文主要介绍一些Blender软件的基本使用
Threejs系列：灯光
本文介绍threejs中的灯光相关设置threejs中的光照配置的标配： 环境光 + 光源
环境光： 无处不在的光
// 环境光
const envLight = new THREE.AmbientLight('white', 1)
scene.add(envLight)
注意：不添加环境光，物体设置的颜色无法显示。
点光源
// 灯光配置
const pointLight = new THREE.PointLight(0xffffff,1, 1000)
pointLight.position.set(2, 3, 2)
pointLight.castShadow = true
scene.add(pointLight)
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize, 'white' );
scene.add( pointLightHelper );
注意， 此处我们还加了一个helper帮助显示光源位置
创建物体和地面
// 物体
...
Threejs系列：相机
本文主要研究一下threejs中的相机threejs中的相机：
ArrayCamera：包含着一组子摄像机，常用于多人同屏的渲染，更好地提升VR场景的渲染性能
StereoCamera：双透视摄像机（立体相机），常用于创建 3D 立体影像，比如 3D 电影之类或 VR
CubeCamera：有6个渲染，分别是立方体的6个面，常用于渲染环境、反光等
OrthographicCamera：正交相机，在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。
PerspectiveCamera：透视相机，这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
透视相机语法：PerspectiveCamera( fov, aspect, near, far )fov：摄像机视锥体垂直视野角度aspect：摄像机视锥体长宽比，一般设置为Canvas画布宽高比width / heightnear：摄像机视锥体近端面far：摄像机视锥体远端面，far-near构成了视锥体高度方向
...