mirror of
https://github.com/pissang/claygl.git
synced 2026-01-18 16:22:29 +00:00
4fd2569e7b
* wip: use camera.projection instead of different camera instances Avoid switch camera projection needs to recreate the instance * update examples * release 2.0.0-alpha.35
40 lines
970 B
TypeScript
40 lines
970 B
TypeScript
import { createUnlitShader, Material, Mesh, Renderer, Scene, Geometry, Camera } from 'claygl';
|
|
|
|
const TRIANGLE_POSITIONS = [
|
|
[-0.5, -0.5, 0],
|
|
[0.5, -0.5, 0],
|
|
[0, 0.5, 0]
|
|
];
|
|
const TRIANGLE_POSITIONS2 = [
|
|
[-1, -1, 0],
|
|
[1, -1, 0],
|
|
[0, 1, 0]
|
|
];
|
|
|
|
const renderer = new Renderer({
|
|
canvas: document.getElementById('main') as HTMLCanvasElement,
|
|
width: 400,
|
|
height: 400
|
|
});
|
|
const scene = new Scene();
|
|
const camera = new Camera('orthographic');
|
|
const geometry = new Geometry({
|
|
dynamic: true
|
|
});
|
|
// Add triangle vertices to position attribute.
|
|
geometry.attributes.position.fromArray(TRIANGLE_POSITIONS);
|
|
|
|
const mesh = new Mesh(geometry, new Material(createUnlitShader()));
|
|
mesh.material.set('color', [0, 0, 1]);
|
|
scene.add(mesh);
|
|
|
|
renderer.render(scene, camera);
|
|
|
|
let i = 0;
|
|
setInterval(function () {
|
|
i++;
|
|
geometry.attributes.position.fromArray(i % 2 ? TRIANGLE_POSITIONS2 : TRIANGLE_POSITIONS);
|
|
geometry.dirty();
|
|
renderer.render(scene, camera);
|
|
}, 500);
|