import * as THREE from 'three'; import { PlaneGeometry, TextureLoader } from 'three'; import shaderVert from "../glsl/shader1.vert"; import shaderFrag from "../glsl/shader1.frag"; export class MyPlane extends THREE.Mesh { constructor(){ le…

webqr.com

以下のようなクラスを継承して使った import p5 from 'p5'; import * as THREE from 'three'; export class p5MainBase { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public _width:number = 512; public _height:num…

yoksel.github.io

www.nicovideo.jp 単位 メートル→ピクセル 秒→１フレーム 波動方程式 (1/s2) * (d2u / dt2) = Δu 1/s2 = 伝搬 uは波の高さ d2/dt2は２回微分を表す（二階微分なので変化量の変化量） つまり時間に対する変化の変化 Δはラプラス演算子（ラプラシアン） d2u/dt…

import * as THREE from 'three'; import { DataTexture, Vector2 } from 'three'; export class ParamTexture{ public dataTex:DataTexture; public size:THREE.Vector2; constructor() { let ruleTexWidth = 32; this.size = new Vector2(ruleTexWidth,rul…

https://www.modularscale.com http://simplescale.online 基本サイズ、本文等を決めて、n倍するということで良いのだと思う 基本サイズ12pt 2.0倍なら12,24,36,48 基本サイズ12pt 1.5倍なら 12,18,27 参考 web typography book.webtypography.net Vertical …

Cellular Automata rules lexicon - Life Life rules are defined in the "S/B" form, where: S - defines counts of alive neighbors necessary for a cell to survive, survive セル=1だったとき生き残る条件 B - defines counts of alive neighbors neces…

VSCodeでTypeScript(or JavaScript)の色がおかしくなった JavaScript and TypeScript Nightly というアドオンのせいだった（disabledにすると治る)。 何かアップデートされて変わってしまったのかもしれない。 とりあえずdisabledにした。何のために入れてた…

boids examples | p5.js 1.分離（Separation） 近くの仲間に対して離れる方向のベクトルを計算する それをノーマライズし、距離が離れるほど重みを変える（弱くする） そのベクトルの平均を算出 →これはコリジョンとして機能します 2.整列（Alignment） 近く…

<feBlend> - SVG&colon; Scalable Vector Graphics | MDN</feblend>

hirakublog.com

ObjectLoaderとOBJLoaderがある。 .objを読み込みたいときはOBJ //import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' const loader = new OBJLoader(); loader.load( url, (obj)=>{ obj.children[0] as THREE.Mesh; }

Spector.jsを使うとみれる。他にも方法はあるのかも。 chrome.google.com phongの中身 three r145で。 THREE.ShaderLib.phong - vert/frag · GitHub 参考 中身を参考にしつつ、気になる箇所は検索から探す three.js/src/renderers/shaders/ShaderChunk at de…

let ww:number = window.innerWidth; let hh:number = window.innerHeight; let dom = this.renderer.domElement; dom.style.position="absolute"; let stgW:number = 0; if(ww>hh){ stgW=hh; dom.style.top="0px"; dom.style.left = (ww/2-hh/2)+"px"; }els…

勾配の強弱を考えず、勾配の方向のみを可視化する float dx = tex(0,0) - tex(1,0);//x方向の勾配ベクトル float dy = tex(0,0) - tex(0,1);//y方向の勾配ベクトル float rad = atan(dy,dx);//勾配の方向（ラジアン） float red = 0.5 + 0.5*cos(rad); float…

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' this.control = new OrbitControls(this.camera, domElement); this.control?.update();