7 changed files with 126 additions and 107 deletions
@ -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> |
|
||||
@ -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(); |
|
||||
@ -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; |
||||
|
} |
||||
@ -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> |
||||
@ -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() |
||||
|
|
||||
@ -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); |
|
||||
} |
|
||||
@ -1,7 +0,0 @@ |
|||||
uniform vec3 u_color; |
|
||||
uniform float u_speed; |
|
||||
|
|
||||
|
|
||||
void main() { |
|
||||
gl_Position = vec4( position, 1.0 ); |
|
||||
} |
|
||||
Loading…
Reference in new issue