cailean/three-js-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
Cailean Finn
2024-04-08 21:47:44 +01:00
commit 0b61cc9749
8 changed files with 1335 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
node_modules

3
README.md Normal file
View File

@@ -0,0 +1,3 @@
## ThreeJS Templated ##
run using ```npm install``` & ```npx vite```

32
index.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="importmap">
{
"imports": {
"three": "./node_modules/three/build/three.module.js",
"three/": "./node_modules/three/",
"glsl-pipeline/": "./node_modules/glsl-pipeline/"
}
}
</script>
<script type="module" src="./main.js"></script>
<style>
html, body {
margin: 0;
height: 100%;
}
#c {
width: 100%;
height: 100%;
display: block;
}
</style>
</head>
<body>
<canvas id="c"></canvas>
</body>

61
main.js Normal file
View File

@@ -0,0 +1,61 @@
import * as THREE from 'three';
import { GlslPipeline } from 'glsl-pipeline';
function main() {
const canvas = document.querySelector( '#c' );
const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
// glsl
const shader_f = /* glsl */`
uniform vec2 u_resolution;
uniform vec2 u_res;
void main() {
// vec2 st = vec2(0.0, 0.0);
// st.x = u_resolution.x;
vec2 st = gl_FragCoord.xy/u_res;
gl_FragColor = vec4(st.x, st.y, 0.0, 1.0);
}
`;
const gl_sandbox = new GlslPipeline(renderer, {
// define uniforms
u_color: { value: new THREE.Vector3(1.0, 1.0, 1.0) },
u_speed: { value: 0.5 },
u_res: {value: new THREE.Vector2(window.innerWidth/4, window.innerHeight/4)},
})
gl_sandbox.load(shader_f);
// Create your scene and use the main material shader
const cam = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
const mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 10), gl_sandbox.material);
const scene = new THREE.Scene();
scene.add(mesh);
const draw = () => {
gl_sandbox.renderMain();
requestAnimationFrame(draw);
};
const resize = () => {
console.log("OK");
gl_sandbox.setSize(window.innerWidth, window.innerHeight);
};
console.log(window.innerWidth);
window.addEventListener("resize", resize);
resize();
draw();
}
main();

1215
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
package.json Normal file
View File

@@ -0,0 +1,9 @@
{
"dependencies": {
"glsl-pipeline": "^2.0.6",
"three": "^0.159.0"
},
"devDependencies": {
"vite": "^5.0.4"
}
}

7
public/shaders/00_mt.frag Normal file
View File

@@ -0,0 +1,7 @@
uniform float time;
uniform vec2 resolution;
void main() {
vec3 color = vec3(1.0, 1.0, 1.0);
gl_FragColor(color, 1.0);
}

7
public/shaders/00_mt.vert Normal file
View File

@@ -0,0 +1,7 @@
uniform vec3 u_color;
uniform float u_speed;
void main() {
gl_Position = vec4( position, 1.0 );
}