Skip to content

Commit

Permalink
Update examples using modules
Browse files Browse the repository at this point in the history
  • Loading branch information
@markuslerner
markuslerner committed Apr 15, 2022
1 parent f43415e commit cee63af
Show file tree
Hide file tree
Showing 6 changed files with 493 additions and 452 deletions.
299 changes: 294 additions & 5 deletions examples/all.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,299 @@ <h1>
>
</div>

<script src="https://unpkg.com/[email protected]/build/stats.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/build/dat.gui.min.js"></script>
<script src="../src/BlurredLine.js"></script>
<script src="js/main-index.js"></script>
<script src="https://unpkg.com/[email protected]/build/stats.min.js"></script>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script
async
src="https://unpkg.com/[email protected]/dist/es-module-shims.js"
></script>

<script type="importmap">
{
"imports": {
"gui": "https://unpkg.com/[email protected]/build/dat.gui.module.js",
"three": "https://unpkg.com/[email protected]/build/three.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three';
import { GUI } from 'gui';

import { BlurredLine, BlurredLineMaterial } from '../src/index.js';

let container, stats;
let camera, clock, scene, renderer;
let curve,
curves,
endPoint,
// handlesGeometry,
lines = [],
lineMaterial,
params,
wireframeMaterial;

const Params = function () {
this.curve = 'bezier';
this.amount = 1;
this.resolution = 50;
this.angleBisection = false;
this.closed = false;
this.color = '#000000';
this.lineWidth = 1;
this.blurWidth = 10;
this.blur = true;
this.opacity = 1.0;
this.wireframe = false;
this.autoRotate = false;
};

container = document.getElementById('container');

// camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
// camera.position.z = 2;

camera = new THREE.OrthographicCamera(
window.innerWidth / -2,
window.innerWidth / 2,
window.innerHeight / 2,
window.innerHeight / -2,
1,
1000
);
camera.position.set(0, 0, 500);

scene = new THREE.Scene();
// scene.background = new THREE.Color( 0x101010 );

endPoint = new THREE.Vector3(0, 0, 0);

curves = {};

curves.line = new THREE.LineCurve3(
new THREE.Vector3(-500, 0, -500),
endPoint
);

curves.path = new THREE.Path();
curves.path.lineTo(0, 0);
curves.path.quadraticCurveTo(100, 100, 0, 200);
curves.path.lineTo(0, 500);

curves.bezier = new THREE.CubicBezierCurve3(
new THREE.Vector3(-500, 0, -500),
new THREE.Vector3(0, 0, 500),
new THREE.Vector3(0, 300, 500),
endPoint
);

curves.ellipse = new THREE.EllipseCurve(
0,
0, // ax, aY
200,
200, // xRadius, yRadius
0,
2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);

curves.spline = new THREE.SplineCurve([
new THREE.Vector2(-100, 0),
new THREE.Vector2(-50, 50),
new THREE.Vector2(0, 0),
new THREE.Vector2(50, -50),
new THREE.Vector2(100, 0),
]);

// outline:
wireframeMaterial = new THREE.MeshBasicMaterial({
color: 0xff0000,
side: THREE.DoubleSide,
wireframe: true,
// depthTest: false,
blending: THREE.NormalBlending,
});

// handlesGeometry = new THREE.BufferGeometry();
// if (curve instanceof THREE.CubicBezierCurve3) {
// handlesGeometry.vertices.push(curve.v0, curve.v1, curve.v2, curve.v3);
// }
// const handlesMaterial = new THREE.LineBasicMaterial({
// color: 0xff0000,
// side: THREE.DoubleSide,
// linewidth: 3.0,
// });
// const handles = new THREE.Line(handlesGeometry, handlesMaterial);
// scene.add(handles);

params = new Params();
const gui = new GUI();

window.addEventListener('load', function () {
function update() {
clearLines();
createLines();
}

gui
.add(params, 'curve', ['bezier', 'line', 'path', 'ellipse', 'spline'])
.onChange(function () {
lines.forEach(function (l) {
l.curve = curves[params.curve];
closedController.setValue(
(params.closed = params.curve === 'ellipse')
);
l.updateGeometry();
});
});
gui.add(params, 'amount', 1, 1000).onChange(update);
gui.add(params, 'resolution', 1, 100).onChange(update);
gui.add(params, 'angleBisection').onChange(function () {
lines.forEach(function (l) {
l.angleBisection = params.angleBisection;
l.updateGeometry();
});
});
const closedController = gui
.add(params, 'closed')
.onChange(function () {
lines.forEach(function (l) {
l.closed = params.closed;
l.updateGeometry();
});
});
gui.addColor(params, 'color').onChange(function () {
lineMaterial.color = new THREE.Color(params.color);
});
gui.add(params, 'lineWidth', 0.1, 250).onChange(function () {
lines.forEach(function (l) {
l.lineWidth = params.lineWidth;
l.updateGeometry();
});
});
gui.add(params, 'blurWidth', 0, 250).onChange(function () {
lines.forEach(function (l) {
l.blurWidth = params.blurWidth;
l.updateGeometry();
});
});
gui.add(params, 'blur').onChange(update);
gui.add(params, 'opacity', 0.0, 1.0).onChange(function () {
lineMaterial.opacity = params.opacity;
});
gui.add(params, 'wireframe').onChange(function () {
lines.forEach(function (l) {
l.material = params.wireframe ? wireframeMaterial : lineMaterial;
});
});
gui.add(params, 'autoRotate');
});

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

stats = new Stats();
container.appendChild(stats.dom);

clock = new THREE.Clock();

window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);

createLines();

function onWindowResize() {
camera.left = window.innerWidth / -2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / -2;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
requestAnimationFrame(animate);

render();

stats.update();
}

animate();

function render() {
const delta = clock.getDelta();
lines.forEach(function (l) {
if (params.autoRotate) {
l.rotation.y += 0.125 * delta;
} else {
l.rotation.y = 0;
}
});

renderer.render(scene, camera);
}

function onDocumentMouseMove(event) {
event.preventDefault();
const mouseX = event.clientX - window.innerWidth / 2;
const mouseY = -event.clientY + window.innerHeight / 2;

endPoint.x = mouseX;
endPoint.y = mouseY;
endPoint.z = 0;

// handlesGeometry.verticesNeedUpdate = true;

lines.forEach(function (l) {
l.updateGeometry();
});
}

function createLine(i) {
const line = new BlurredLine(
curves[params.curve],
params.wireframe ? wireframeMaterial : lineMaterial,
parseInt(params.resolution)
);
line.lineWidth = params.lineWidth;
line.blurWidth = params.blurWidth;
line.blur = params.blur;
line.angleBisection = params.angleBisection;
line.upVector = new THREE.Vector3(0.0, 0.0, 1.0);
line.closed = params.closed;
line.updateGeometry();

scene.add(line);
line.position.x += i * 10;
lines.push(line);
}

function createLines() {
lineMaterial = new BlurredLineMaterial({
color: new THREE.Color(params.color),
opacity: params.opacity,
});

for (let i = 0; i < params.amount; i++) {
createLine(i);
}
}

function clearLines() {
lines.forEach(function (l) {
scene.remove(l);
});
lines = [];
}
</script>
</body>
</html>
Loading

0 comments on commit cee63af

Please sign in to comment.