Threejs系列：md2模型
本文介绍如何将md2模型，导进我们的页面中前面有介绍过使用gltf的loader，加载glb模型。那么针对古老的md2模型文件，如何操作呢？
1. 导入md2库
import { MD2Character } from 'three/examples/jsm/misc/MD2Character.js';
2. 加入一个平面贴图当作草地
const gt = new THREE.TextureLoader().load( 'textures/terrain/grasslight-big.jpg' );
const gg = new THREE.PlaneGeometry( 20, 20 );
const gm = new THREE.MeshPhongMaterial( { color: 0xffffff, map: gt } );
const ground = new THREE.Mesh( gg, gm );
ground.rotation.x = - Math.PI / 2;
ground.material.map.repeat.set( ...
Threejs系列：补间动画
本文介绍threejs中的补间动画什么是补间动画？物体从a位置移动到b位置，移动过程中的展现形式，就是补间动画。
1. 导入tween库
// threejs自带了，无需安装
import * as TWEEN from 'three/examples/jsm/libs/tween.module'
const cube1 = new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color: 'black'})
)
scene.add( cube1 );
const tween1 = new TWEEN.Tween(cube1.position)
tween1.to({ x: -10}, 3000)
tween1.easing(TWEEN.Easing.Bounce.InOut)
tween1.start()
const tween2 = new TWEEN.Tween(cube1.position)
tween2.to({ x: ...
Threejs系列：光线投射（捕获点击目标）
本文介绍threejs中的光线投射我们都知道，threejs是一个三维场景，但是在前端页面中，三维的场景，是画在二维的canvas画布中的，那么问题来了，在二维画布上的点击事件,需要到三维场景中获取点击目标，如何实现？光线投射。
实现思路： 先要归一化，针对坐标系，将通过点击事件获取的坐标值，转换成笛卡尔坐标系（右正上正）的数值，且区间范围控制在[-1, 1]。然后通过光线投射，由转换后的坐标点及相机位置点，得到一条线，这条线穿过的空间中的物体，就是我们的点击目标。
1. 归一化：坐标转换通过点击事件，获取当前画布的x、y。然后根据视图区域的宽高，归一化坐标数据到下图的坐标系中。
具体代码：
let mouse = new THREE.Vector2()
window.addEventListener('click', (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1
mouse.y = -((event.clientY / window.innerWidth) * 2 - 1)
...
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中物体(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 ...
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软件的基本使用