Codepan学习笔记

创建2021-04-03更新2022-02-20阅读时间13m

收集喜欢的案例，学习动力来源！！！
学习里面的思路，交互方式

学习链接

Threejs交互动画

链接

初始动画 - 跑步
点击人物 - 倒地！

使用资源

  • three.min.js
  • GLTFLoader.js
  • OrbitControls.js

搭建环境
renderer、scene、camera
light

resize // 窗口自适应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 核心代码 - 动画部分
var loader = new THREE.GLTFLoader();
var mixer;
var model;
loader.load(
  "https://raw.githubusercontent.com/baronwatts/models/master/robber.glb", function(gltf) {
		
     gltf.scene.traverse( function( node ) { // 遍历 - 每个部分都能接收阴影
        if ( node instanceof THREE.Mesh ) { 
					//Whether the object gets rendered into shadow map. Default is false.
          node.castShadow = true; 
          node.material.side = THREE.DoubleSide;
        }
      });
     
    model = gltf.scene;
    model.scale.set(.35,.35,.35); // 设置大小，添加进场景
    scene.add(model);
		
		// 共有两个动画 - 0 - die， 1 - running
    console.log(gltf.animations); //shows all animations imported into the dopesheet in blender
		
    mixer = new THREE.AnimationMixer(model);
    mixer.clipAction(gltf.animations[1]).play();
		
    document.body.addEventListener("click", kill); // 整个窗口添加点击动画。
		
    function kill() {
      mixer.clipAction(gltf.animations[1]).stop(); // 跑步动画停止
      mixer.clipAction(gltf.animations[0]).play(); // 死亡动画开始
      setTimeout(function() {
        mixer.clipAction(gltf.animations[0]).stop(); // 1.5秒后，跑步动画开始！
        mixer.clipAction(gltf.animations[1]).play();
      }, 1500);
    }
});

var clock = new THREE.Clock();

function render() {
  requestAnimationFrame(render);
  var delta = clock.getDelta();
  if (mixer != null) mixer.update(delta);
  if (model) model.rotation.y += 0.025; // 360度方向跑步

  renderer.render(scene, camera);
}

Threejs雪花动画

链接

雪花飘动，波浪抖动！

引入资源

主要动态都在render里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const render = (timeStamp) => {
	orbitControls.update();
	makeRoughGround(planeMesh); // 波浪 - planeMesh - 修改
	
	const posArr = particles.geometry.vertices; // particles里存放雪花位置 - 修改
	const velArr = particles.geometry.velocities; // 雪花速度/方向
	posArr.forEach((vertex, i) => { // 每次更新
			const velocity = velArr[i];
			const x = i * 3; // 
			const y = i * 3 + 1;
			const z = i * 3 + 2;
			
			const velX = Math.sin(timeStamp * 0.001 * velocity.x) * 0.1;
			const velZ = Math.cos(timeStamp * 0.0015 * velocity.z) * 0.1;
			
			vertex.x += velX;
			vertex.y += velocity.y;
			vertex.z += velZ;
			if (vertex.y < -minRange ) {
					vertex.y = minRange;
			}
	})
	particles.geometry.verticesNeedUpdate = true; // 位置更新
	renderer.render(scene, camera); // 渲染更新
	requestAnimationFrame(render); // 循环
}

创建波浪 - 3个noise，累加，设置为z方向？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const makeRoughGround = (mesh) => {
  const time = Date.now();
  mesh.geometry.vertices.forEach(function(vertex, i) {
      const noise1 = noise.noise2D( //const noise = new SimplexNoise();//插件。
          vertex.x * 0.01 + time * 0.0003,
          vertex.y * 0.01 + time * 0.0003,
          vertex.z * 0.01 + time * 0.0003,
      ) * 5;
      const noise2 = noise.noise2D(
          vertex.x * 0.02 + time * 0.00012,
          vertex.y * 0.02 + time * 0.00015,
          vertex.z * 0.02 + time * 0.00015,
      ) * 4;
      const noise3 = noise.noise2D(
          vertex.x * 0.009 + time * 0.00015,
          vertex.y * 0.012 + time * 0.00009,
          vertex.z * 0.015 + time * 0.00015,
      ) * 4;
      const distance = (noise1 + noise2 + noise3);
      vertex.z = distance; // 设置
  })
  mesh.geometry.verticesNeedUpdate = true;
  mesh.geometry.normalsNeedUpdate = true;
  mesh.geometry.computeVertexNormals();
  mesh.geometry.computeFaceNormals();
}

波浪初始化
PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

// 段数的用法，看出来了！！
width — Width along the X axis. Default is 1.
height — Height along the Y axis. Default is 1.
widthSegments — Optional. Default is 1.
heightSegments — Optional. Default is 1.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Plane
 --------------------------------------*/
 const planeGeometry = new THREE.PlaneGeometry(500, 500, 100, 100);
 const planeMaterial = new THREE.MeshLambertMaterial({
     color: 0xffffff,
     side: THREE.DoubleSide
 });
 planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
 planeMesh.receiveShadow = true;
 planeMesh.rotation.x = -0.5 * Math.PI;
 planeMesh.position.x = 0;
 planeMesh.position.y = -100;
 planeMesh.position.z = 0;
 scene.add(planeMesh);

雪花

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* Snow Particles
-------------------------------------------------------------*/
const pointGeometry = new THREE.Geometry();
for (let i = 0; i < particleNum; i++) {
    const x = Math.floor(Math.random() * maxRange - minRange);
    const y = Math.floor(Math.random() * maxRange - minRange);
    const z = Math.floor(Math.random() * maxRange - minRange);
    const particle = new THREE.Vector3(x, y, z);
    pointGeometry.vertices.push(particle); // 设置位置 - Geometry //render中修改
    // const color = new THREE.Color(0xffffff);
    // pointGeometry.colors.push(color);
}

const pointMaterial = new THREE.PointsMaterial({
    size: 8,
    color: 0xffffff,
    vertexColors: false,
    map: getTexture(),
    // blending: THREE.AdditiveBlending,
    transparent: true,
    // opacity: 0.8,
    fog: true,
    depthWrite: false
})

const velocities = [];
for (let i = 0; i < particleNum; i++) {
    const x = Math.floor(Math.random() * 6 - 3) * 0.1;
    const y = Math.floor(Math.random() * 10 + 3) * - 0.05;
    const z = Math.floor(Math.random() * 6 - 3) * 0.1;
    const particle = new THREE.Vector3(x, y, z);
    velocities.push(particle); // 方向 / 速度！ // render中修改

particles = new THREE.Points(pointGeometry, pointMaterial); // 实际！几何 + 材质
particles.geometry.velocities = velocities; // 添加这个属性！
scene.add(particles) // 添加场景

css-无限滚动

链接
01

html结构
div.container // 中间定位 + 边框投影

  • div.wrap // 整体旋转-45°
    • ul.list - li - img
    • ul.list rev-list
    • ul.list

css结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// 通过计算属性可以做到无缝滚动
// start的位置 - 个数 * 宽度 - 个数 * 间距。
$item-space: 15px;
$item-width: 80px;
$item-num: 6;
$start-position: -100px;
$end-position: -100px - $item-num*$item-width - $item-num*$item-space;

.container {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	
	margin: auto; // 水平垂直居中
	
  width: 280px;
  height: 360px;
	
  border-radius: 6px;
	box-shadow: 0 0 40px rgba(0,0,0,0.2);

  overflow: hidden;
  
  .wrap {
    position: relative; // 定位。
    top: -28px;
    transform: rotate(-45deg); // 旋转
  }
}

.list { // ul - 动画位置
  list-style-type: none;
  margin: 0;
  padding-top: 15px;
  padding-left: 0;
  animation: 15s move infinite linear; // 移动动画 - Start - End
  white-space: nowrap;
  font-size: 0;
  
  .one-item {
    width: $item-width;
    height: 120px;
		
    display: inline-block;
    overflow: hidden; // 处理图片
    padding-right: $item-space; // 左内边距
  }
}

.rev-list {
  animation: 15s reverseMove infinite linear; // 反向移动动画 - End - Start
}

img { // 
  width: 100%;
  height: 100%;
}


// 通过计算出来的偏移值才能做到无缝 - 动画。
@keyframes move {
  0% {
    transform: translateX($start-position);
  }
  100% {
    transform: translateX($end-position);
  }
}

@keyframes reverseMove {
  0% {
    transform: translateX($end-position);
  }
  100% {
    transform: translateX($start-position);
  }
}

待续

复杂的就单写一个！
查资料。。

扫雷
五子棋
俄罗斯方块
弹弹球
//面向对象

Tower Blocks
Three.js Click to Move
Memory Game
Platform game engine
Event Calendar Widget
Pure CSS (Sass) Carnival Game
game
Bullseye Game
Menja
Tilting Maze game
Pong game with JavaScript
Color Blast!
Pickle Rick Maze Game
Gomoku Game (5 in a row)
Snake Game - CSS Renderer
CSS Rock-Paper-Scissors
Color Collision
Game of Life (React + Redux)
A Pure CSS Game - You Must Build a Lighthouse.

Preloading Space Animation
Arrows Defense Game (Challenge)
Daily Pen #021: Match Color Game
Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS)
2048
Fire Particles
Tetris w/ high score tracking

OutRun ( no canvas)

JS Planet defense game
Stick Hero with Canvas

Resume
Pure CSS Tic Tac Toe w/ SVG 🕹 #CodePenChallenge
Get to zero
Tetris
The Danger Crew (JavaScript RPG) Demo
CodepenLife: The Codepen Simulator Game

Minesweeper
Sliding Puzzle Game - Animated CSS Grid
Overwatch Loader
Air Hockey Game