𓅹 kitasenju design blog 𓅸

humans are imperfect

typescript

p5クラス化しthreejsに使う

スコープがよくわからないがとりあえず動いています import * as THREE from 'three'; import p5 from "p5"; export class p5Main { public _canvasTex:THREE.CanvasTexture; public canvasElement:HTMLCanvasElement; public isInit:boolean=false; public …

VSCodeでTypeScript(or JavaScript)の色がおかしくなった

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

OrbitControls

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

canvas(WebGL)をpngで保存

preserveDrawingBuffer : trueが必要 let dom = document.getElementById("webgl"); this.renderer = new THREE.WebGLRenderer({ canvas: dom,//document.querySelector('#webgl'), antialias: true, preserveDrawingBuffer : true }); download(){ let dom …

ImageManager

threejs で 画像ロードマネージャー import * as THREE from 'three'; import { ImageLoader } from 'three'; interface ImgData { name : string; url : string; tex : THREE.Texture; } export class ImageManager { public static LOGO1:string="LOGO1"; …

typescript singleton シングルトン

public static getInstance(): DataManager { if (!DataManager.instance) { DataManager.instance = new DataManager(); //DataManager.instance.init(); } return DataManager.instance; }

簡易circle packing

import * as THREE from 'three'; import { Matrix4, Mesh, Texture, TextureLoader, Vector3 } from 'three'; import waveRender_vert from "../glsl/waveRender.vert"; import waveRender_frag from "../glsl/waveRender.frag"; import { CircleObj } from…

RenderToTexture

オフスクリーンレンダリング github.com typescript 昔は material.map = this.renderTarget; で行けたきがするがいつからから material.map = this.renderTarget.texture; になった模様 import * as THREE from 'three'; import { Camera, Matrix4, Object3…

強制キャスト

エラーが消えない時に使った。 let hoge:string = fuga as any;

typescript threejs 雛形

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import Stats from 'three/examples/jsm/libs/stats.module' import { GUI } from 'lil-gui' import { TorusGeometry, MeshPhongMaterial, Dir…

Webページをpause

// ウィンドウをフォーカスしたら指定した関数を実行 window.addEventListener('focus', ()=>{ console.log('onFocus'); }, false); // ウィンドウからフォーカスが外れたら指定した関数を実行 window.addEventListener('blur', ()=>{ console.log("onBlur")…

blink using gasp

brink with gasp. i dont know this way is correct. this.count=0; gsap.to(this,{ duration:0.3, onUpdate:()=>{ this.count++; if(this.count%2==0) this.hoge.style.opacity="0"; else this.hoge.style.opacity="100%"; }, onComplete:()=>{ this.hoge.s…

domをセンターに

setCenter(dom:HTMLElement,zIndex:number){ dom.style.position = "absolute"; dom.style.zIndex= ""+zIndex; let tgW = dom.clientWidth; let tgH = dom.clientHeight; dom.style.left = (window.innerWidth/2-tgW/2)+"px"; dom.style.top = (window.inner…

typescript 継承

import * as THREE from 'three'; import { MeshBasicMaterial } from 'three'; import gsap from 'gsap'; export class Hoge extends THREE.Mesh{ mat: THREE.MeshBasicMaterial; count: number = 0; constructor(m:THREE.Mesh){ let mat = new MeshBasicMa…

gasp使い方

callbackとか忘れる this.count=0; gsap.to(this,{ count: 99, duration: 5, ease: "power3.inOut", onComplete:()=>{window.alert("unko")} }) gsap.delayedCall(5,()=>{ this.hoge(); })

Loaderで外部ファイルを複数ロードする

import * as THREE from 'three'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' interface ObjData { url : string; mesh : THREE.Mesh; } export class ObjLoaders { public list:ObjData[]; private callback:()=>void; private …

lil-guiでaddColor使う

datguiの代わりlig-guiで色 bgColor:{color:number} = {color:0xff0000}; this.renderer.setClearColor(new THREE.Color(this.bgColor.color)); this.gui.addColor(this.bgColor,"color").onChange((value:number)=>{ this.renderer.setClearColor(new THREE…

typescriptでdictionary

TypeScriptの型: 辞書型を定義する (Dictionary)|まくろぐ

OBJLoaderなどの使い方

//import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js' //import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js' const loader = new OBJLoader(); loader.load('./data/q.obj', (obj)=>{ let mesh = obj.childre…

typescriptでinterface

export interface Point3 { x:number, y:number, z:number }

〠FOOTER〠