three_bas_basic_animation_material_with_custom_vertex_shader.ts

1import * as THREE from 'three';
2import * as BAS from 'three-bas';
3
4// 1. Create a geometry (can be a prefab geometry for instancing)
5const geometry = new THREE.BoxGeometry(1, 1, 1);
6
7// 2. Create the BAS Material by extending a built-in THREE material
8const material = new BAS.BasicAnimationMaterial({
9  // Pass standard THREE.Material parameters
10  side: THREE.DoubleSide,
11  uniforms: {
12    uTime: { value: 0 }
13  },
14  // Define custom shader chunks
15  vertexParameters: `
16    uniform float uTime;
17    attribute vec3 aOffset;
18  `,
19  vertexPosition: `
20    transformed += aOffset;
21    transformed.y += sin(uTime + transformed.x);
22  `
23});
24
25// 3. Create the mesh
26const mesh = new THREE.Mesh(geometry, material);
27
28// 4. In the render loop, update uniforms
29function update(time: number) {
30  material.uniforms.uTime.value = time;
31}