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

updated three js template

master
Cailean Finn 4 months ago
parent
0b61cc9749
commit
5dc6f4ca1e
7 changed files with 126 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      index.html
  2. 61
      main.js
  3. 14
      public/css/styles.css
  4. 25
      public/index.html
  5. 87
      public/js/main.js
  6. 7
      public/shaders/00_mt.frag
  7. 7
      public/shaders/00_mt.vert

32
index.html
View File

@ -1,32 +0,0 @@
<!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
View File

@ -1,61 +0,0 @@
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();

14
public/css/styles.css
View File

@ -0,0 +1,14 @@
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
}
#container {
width: 100%;
flex-grow: 1;
display: flex;
overflow-y: hidden;
flex-direction: column;
}

25
public/index.html
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template 3JS</title>
<link rel="stylesheet" href="./css/styles.css">
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/src/": "https://cdn.jsdelivr.net/npm/[email protected]/src/",
"three/examples/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/"
}
}
</script>
</head>
<body>
<div id="main-container">
<div id="container"></div>
</div>
<script type="module" src="./js/main.js"></script>
</body>
</html>

87
public/js/main.js
View File

@ -0,0 +1,87 @@
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Vector3 } from 'three'
import { randFloat, randInt } from 'three/src/math/MathUtils.js'
let scene, camera, renderer
let aspect, frustumSize
let mesh
let delta
let controls
var clock = new THREE.Clock()
function init(){
SetupRenderer()
scene = new THREE.Scene()
scene.background = new THREE.Color('white')
SetupCamera()
SetupControls()
SetupObjects()
animate()
}
function SetupRenderer(){
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.getElementById('container').appendChild(renderer.domElement)
}
function SetupCamera(){
aspect = window.innerWidth / window.innerHeight
frustumSize = 10
camera = new THREE.OrthographicCamera(
frustumSize * aspect / -2,
frustumSize * aspect / 2,
frustumSize / 2,
frustumSize / -2,
0.01,
5000
)
camera.position.z = 20
}
function SetupControls(){
controls = new OrbitControls(camera, renderer.domElement)
controls.enableRotate = false;
controls.enablePan = true
controls.zoomToCursor = true;
controls.mouseButtons = {
RIGHT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
LEFT: THREE.MOUSE.PAN
}
camera.position.set(0, 0, 20)
controls.update()
}
function SetupObjects() {
let geo = new THREE.BoxGeometry(1, 1, 1)
let mat = new THREE.MeshNormalMaterial()
mesh = new THREE.Mesh(geo, mat)
scene.add(mesh)
}
function animate(){
requestAnimationFrame(animate)
controls.update()
delta = clock.getDelta() / 10
mesh.rotation.x += delta
mesh.rotation.z += delta
renderer.render(scene, camera)
}
window.addEventListener('resize', () => {
aspect = window.innerWidth / window.innerHeight
camera.left = -frustumSize * aspect / 2
camera.right = frustumSize * aspect / 2
camera.top = frustumSize / 2
camera.bottom = -frustumSize / 2
camera.updateProjectionMatrix()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
})
init()

7
public/shaders/00_mt.frag
View File

@ -1,7 +0,0 @@
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
View File

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