Skip to content

Instantly share code, notes, and snippets.

View lucasdidthis's full-sized avatar

Lucas lucasdidthis

3 followers · 3 following
View GitHub Profile
@lucasdidthis
lucasdidthis / marker.css
Created October 25, 2022 19:54
simulate textmarker with pure css
mark {
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 225, 0, 0.1),
rgba(255, 225, 0, 0.7) 4%,
rgba(255, 225, 0, 0.3)
@lucasdidthis
lucasdidthis / sw-boilerplate.js
Created August 24, 2022 07:28 — forked from cferdinandi/sw-boilerplate.js
https://css-tricks.com
// Core assets
let coreAssets = [];
// On install, cache core assets
self.addEventListener('install', function (event) {
// Cache core assets
event.waitUntil(caches.open('app').then(function (cache) {
for (let asset of coreAssets) {
cache.add(new Request(asset));
@lucasdidthis
lucasdidthis / three_js_damping.js
Created February 23, 2021 15:55
function to damp movement
const parameters = {
radius: 1.0,
moveSpeed: 0.01,
damping: 0.1,
tilt: 10,
}
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2()
@lucasdidthis
lucasdidthis / three_js_hovering.js
Created February 22, 2021 13:47
Hovering-Animation for 3D Element
element.rotation.z = -0.2 - (1 + Math.sin(elapsedTime / 1.5)) / 20;
element.rotation.x = Math.cos(elapsedTime / 4) / 8;
element.rotation.y = Math.sin(elapsedTime / 4) / 8;
element.position.y = (1 + Math.sin(elapsedTime / 1.5)) / 10;
@lucasdidthis
lucasdidthis / three-cameraHelper.js
Created December 13, 2019 10:17
JS-function to show the camera
cameraHelper = new THREE.CameraHelper( camera );
scene.add( cameraHelper );
@lucasdidthis
lucasdidthis / three-axisHelper.js
Created December 13, 2019 09:13
JS-function to show the 3D-axis
axis = new THREE.AxesHelper( 1000 );
scene.add( axis );
@lucasdidthis
lucasdidthis / three-pointLightHelper.js
Created December 13, 2019 09:13
JS-function to show a point light
lightHelper = new THREE.PointLightHelper( light1, 1 );
scene.add( lightHelper );
@lucasdidthis
lucasdidthis / three-hemisphereLightHelper.js
Created December 13, 2019 09:12
JS-function to show a hemisphere light
hemispherelighthelper = new THREE.HemisphereLightHelper( hemiLight, 1 );
scene.add( hemispherelighthelper );
@lucasdidthis
lucasdidthis / three-gridHelper.js
Created December 13, 2019 09:11
JS-function to show the basic grid
grid = new THREE.GridHelper( 1000, 1000 );
scene.add( grid );
@lucasdidthis
lucasdidthis / three-wireframeHelper.js
Created December 13, 2019 09:10
JS-function to show the wireframe of an object
wireframe = new THREE.WireframeGeometry( geometry );
line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.6;
line.material.transparent = true;
scene.add( line );