import * as THREE from 'three'; export class ExCamera{ public oCamera:THREE.OrthographicCamera; public pCamera:THREE.PerspectiveCamera; public target:THREE.Vector3 = new THREE.Vector3(0,0,0); public amp:number = 1500; public radX:number = …

https://zenn.dev/ajitama_tkd/articles/fbc7bc6066bfbe

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…

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…

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);

コマンドラインツール 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 …

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

dat.guiの後継lil-guiにて。 lil-gui.georgealways.com 以下のようにcolorFormatsオブジェクトを作り、その中にさらに名前付きの変数を入れる。 colorFormats = {r:1,g:1,b:1} みたいなのはダメ！もう一個入れ子にしないと。 //https://lil-gui.georgealways…

// 勾配計算関数 vec2 gradient(sampler2D pTex, vec2 texCoord, vec2 resolution, float scale) { vec2 pixelSize = scale / resolution; vec2 leftOffset = vec2(-pixelSize.x, 0.0); vec2 rightOffset = vec2(pixelSize.x, 0.0); vec2 upOffset = vec2(0.…

import * as THREE from 'three'; import { Scene, OrthographicCamera, WebGLRenderer, Vector3, MeshBasicMaterial, Texture } from 'three'; export class FilpFlopSceneBase{ scene :Scene; camera :OrthographicCamera; renderTarget1 :THREE.WebGLRend…

宣言 // BufferGeometryを使って四角形を作成 const geometry = new THREE.BufferGeometry(); // 頂点データを定義 const vertices = new Float32Array([ -1.0, -1.0, 0.0, // 左下 1.0, -1.0, 0.0, // 右下 1.0, 1.0, 0.0, // 右上 -1.0, 1.0, 0.0 // 左上 …

import * as THREE from 'three'; import { MeshBasicMaterial, BoxGeometry, Object3D, Shape, Vector3 } from 'three'; import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader'; export class MySVGLoader extends Object3D{ loader :SVGLoade…

import * as THREE from 'three'; export class Lines extends THREE.Object3D{ numParticles:number=4000; strokes:THREE.Line; counter:number=0; countMax:number=0; positions :number[]; scales :number[]; geo :THREE.BufferGeometry; private mode :s…

import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' import Stats from 'three/examples/jsm/libs/stats.module' import { TorusGeometry, MeshPhongMaterial, DirectionalLight, MeshBasicMateri…

以下のようなクラスを継承して使った 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…

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…

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…

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

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

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"; …

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

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…

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 …

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…

//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…

three.js docs 色 color = 照明の影響を受ける色 emissive = 他の照明の影響を受けない色 emissiveIntensity = その強度 specular specular = ハイライトの色、鏡面反射 shininess = ハイライトのシャイニー度で大きいほどシャープになる デフォ３０ reflect…

const fovRad = (this.camera.fov / 2) * (Math.PI / 180); let distance = (window.innerHeight / 2) / Math.tan(fovRad); this.camera.position.set(0,0,distance); let scale:number = window.innerHeight/100;//meshのおおきさがwindow.innerHeightと同…

Stats Panel - Three.js Tutorials 【React Three Fiber】Three.jsでShaderを使う準備をする - Qiita THREE.MeshPhongMaterialを改造する - Qiita three.js/ShaderLib.js at master · mrdoob/three.js · GitHub Three.jsとTypeScriptの開発環境を整えよう 最…