KITASENJU DESIGN BLOG

memo, html, javascript, unity

Entries from 2023-09-01 to 1 month

dashed line using linear-gradient

code https://codepen.io/kitasenjudesign/pen/XWoBNaY ref. medium.com

lil-gui(dat gui)でセレクトボックス

👉 lil-gui 0.18.2 //myNumber:number; gui.add( this, 'myNumber', { Label1: 0, Label2: 1, Label3: 2 } );

Customize fog on threejs

How to customize fog in threejs. use "onBeforeCompile" !!!!! https://stackoverflow.com/questions/52425575/is-it-possible-to-let-fog-interact-with-the-materials-opacity three.js/src/renderers/shaders/ShaderChunk/fog_fragment.glsl.js at dev…

InstancedMesh in Threejs

Please make a dummy object for updating matrices of InstancedMesh Please code "mesh.instanceMatrix.needsUpdate = true;" import { Mesh } from "three"; import * as THREE from 'three'; import { InstancedBall } from './InstancedBall'; export c…

svgをbase64にしてbackgroundにしてくれる

a tool of svg to base64 to css-background blog.s0014.com

fx(params)で使えるtype

fxhash stringが64文字まで。 変数の制限がないなら、分割して情報を使う? ## fx(params) types The following fx(params) types are available. All types share the same attributes but have different options available to e.g. constrain your parame…

threejs fullsize resize

let ww:number = document.body.clientWidth; let hh:number = window.innerHeight; this.camera.aspect = ww / hh;//window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(ww, hh);

Typescript + p5js

import p5 from "p5"; export class p5Main{ public _width :number = 512; public _height :number = 512; private _p5 :p5; private _dom :HTMLElement; private _bg :number=0; private _callback :()=>void; constructor(){ } init(callback:()=>void){ …

p5でsvg

https://editor.p5js.org/julians_booleans/sketches/NaUYSCDfo

CSS of this blog

/* <system section="theme" selected="life"> */ @import "/css/theme/life/life.css"; /* </system> */ /* <system section="background" selected="pattern-06"> */ body{ background-image: url('/images/theme/backgrounds/2014/pattern-06.png'); background-repeat: repeat; background-attachment: fixed; backgrou…</system>

playing AR Quick Look automatically

I checked inside of mode-viewer.js. The AR Quick Look code was inside it. <model-viewer> <html> <head> <meta charset="utf-8"> <title>test</title> <script> window.onload=()=>{ const modelUrl = new URL("g5.usdz", self.location.toString()); /* if (this.arScale === 'fixed') { if (modelUr…</meta></head></html></model-viewer>

gltf-transform使い方

コマンドラインツール gltf-transform on command line GitHub - donmccurdy/glTF-Transform: glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js. gltf to glb gltf-transform copy a.gltf output.glb I don't know this is correct, but It …

shaderChunk

Check when you want to make shader by myself. github.com

"FOOTER"