The Life-And-Death Landscape Woven By Sound And Image Japanese Views On Life And Death Through Anime And Literature
The Life-And-Death Landscape Woven By Sound And Image: Japanese Views On Life And Death Through Anime And LiteratureIn the cultural context of Japan, life and death have never been absolute boundaries of either-or, but rather intertwined, mutually reflective symbiotic existences. The soundtracks composed by Yasuharu Takanashi for Shiki and Hell Girl, with their melodies interweaving pathos and ethereality, establish the emotional foundation for the life-and-death narratives of these two anime se ...
canvas和svg渲染及其他
本文介绍下canvas和svg相关内容渲染层面在目前前端2d层面，图形化开发有两种方案：canvas和svg。借助它们都能帮我们绘制各种图形，但是两者底层原理完全不同。canvas本质就是批量绘制像素点，从dom结构看，他就是一个完整的dom节点，不管你在上面绘制了多少path，最终就是一个dom节点canvas。但是用svg则完全不同，svg绘制的path本身，就是一个个的dom节点。所以如果是海量数据，很显然，使用canvas批量绘制像素点的效率，远高于创建海量的dom节点。但是svg也有优点，因为是一个个的dom，所以支持原生事件（click/hover）、CSS 样式控制，交互开发成本低，且矢量图形缩放无失真。
性能考量-canvas有时候有些极端场景不可避免，比如Canvas 渲染 10 万条折线时出现卡顿，该如何优化？
视图渲染。这种手段的叫法有很多，什么脏矩阵、局部渲染等，但都是一个逻辑：只渲染视图范围内的数据。
数据抽稀。说白了就是减少数据点。比如2d图形开发，本质就是一个个的点组成的。那么一条线段可以用10000个点描述，也可以只用两个点描述（起始点）。这里有一些算 ...
Threejs的一些优化手段
本文主要介绍在threejs中的一些，优化手段场景中的物体数量巨大，该如何优化？核心优化：减少 Draw Call（绘制调用）
合并几何体（无独立交互需求import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';
const geometries = [];
for (let i = 0; i < 1000; i++) {
const geo = new THREE.BoxGeometry(1, 1, 1);
geo.translate(Math.random() * 50, 0, Math.random() * 50);
geometries.push(geo);
}
// 合并为1个几何体，仅1次Draw Call
const mergedGeo = BufferGeometryUtils.mergeBufferGeometries(geometries);
const mergedMesh = new THREE.Mes ...
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 ...