├── .gitignore ├── docs ├── favicon.ico ├── assets │ ├── index.90a36877.css │ ├── wood │ │ └── Wood048_1K_Color.jpg │ ├── tiles │ │ └── Tiles107_1K_Color.jpg │ └── index.cc30bc79.js └── index.html ├── public ├── favicon.ico └── assets │ ├── wood │ └── Wood048_1K_Color.jpg │ └── tiles │ └── Tiles107_1K_Color.jpg ├── src ├── main.js └── App.vue ├── vite.config.ts ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | dist 3 | node_modules 4 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /docs/assets/index.90a36877.css: -------------------------------------------------------------------------------- 1 | body,html,#app{margin:0;height:100%}canvas{display:block} 2 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /docs/assets/wood/Wood048_1K_Color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/docs/assets/wood/Wood048_1K_Color.jpg -------------------------------------------------------------------------------- /docs/assets/tiles/Tiles107_1K_Color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/docs/assets/tiles/Tiles107_1K_Color.jpg -------------------------------------------------------------------------------- /public/assets/wood/Wood048_1K_Color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/public/assets/wood/Wood048_1K_Color.jpg -------------------------------------------------------------------------------- /public/assets/tiles/Tiles107_1K_Color.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troisjs/water/HEAD/public/assets/tiles/Tiles107_1K_Color.jpg -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [vue()], 7 | base: '/water/', 8 | build: { 9 | outDir: './docs' 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "troisjs-app", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "dev": "vite", 6 | "build": "vite build", 7 | "serve": "vite preview" 8 | }, 9 | "dependencies": { 10 | "@troisjs/components": "^0.0.4", 11 | "three": "^0.134.0", 12 | "troisjs": "^0.3.3", 13 | "tweakpane": "^3.0.5", 14 | "vue": "^3.2.20" 15 | }, 16 | "devDependencies": { 17 | "@vitejs/plugin-vue": "^1.9.3", 18 | "@vue/compiler-sfc": "^3.2.20", 19 | "vite": "^2.6.10" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/assets/index.cc30bc79.js: -------------------------------------------------------------------------------- 1 | import{B as _,a as x,P as I,G as T,L as w,b as v,R as C,S as k,T as b,C as H,c,d as M,e as q,V as d,t as E,r as a,f as L,w as p,o as j,g as s,h as D}from"./vendor.0aaa853b.js";const G=function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver(e=>{for(const i of e)if(i.type==="childList")for(const o of i.addedNodes)o.tagName==="LINK"&&o.rel==="modulepreload"&&r(o)}).observe(document,{childList:!0,subtree:!0});function l(e){const i={};return e.integrity&&(i.integrity=e.integrity),e.referrerpolicy&&(i.referrerPolicy=e.referrerpolicy),e.crossorigin==="use-credentials"?i.credentials="include":e.crossorigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(e){if(e.ep)return;e.ep=!0;const i=l(e);fetch(e.href,i)}};G();var R=(n,t)=>{for(const[l,r]of t)n[l]=r;return n};const S={components:{BasicMaterial:_,Box:x,Camera:I,Group:T,LiquidPlane:w,PlaneC:v,Renderer:C,Scene:k,Texture:b},setup(){const n=new H;n.setPath("https://threejs.org/examples/textures/cube/Park2/");const t=n.load(["posx.jpg","negx.jpg","posy.jpg","negy.jpg","posz.jpg","negz.jpg"]);return{WIDTH:20,HEIGHT:20,RepeatWrapping:c,cubeTexture:t}},data(){return{isPlaying:!0,materialProps:{color:16777215,metalness:.2,roughness:0,thickness:4,transmission:1,displacementScale:20,envMap:this.cubeTexture,envMapIntensity:1},textureProps:{repeat:{x:2,y:2},wrapS:c,wrapT:c}}},mounted(){this.pointer=this.$refs.renderer.three.pointer,this.liquidEffect=this.$refs.liquid.liquidEffect,this.raycaster=new M,this.pointerPlane=new q(new d(0,1,0),0),this.pointerV3=new d,document.body.addEventListener("keyup",this.onKeyup),this.pane=new E.exports.Pane,this.pane.addInput(this.materialProps,"metalness",{step:.05,min:0,max:1}),this.pane.addInput(this.materialProps,"roughness",{step:.05,min:0,max:1}),this.pane.addInput(this.materialProps,"thickness",{step:.05,min:0,max:10}),this.pane.addInput(this.materialProps,"transmission",{step:.05,min:0,max:1}),this.pane.addInput(this.materialProps,"displacementScale",{step:.5,min:.5,max:50}),this.pane.addInput(this.materialProps,"envMapIntensity",{step:.05,min:0,max:1}),this.pane.addInput(this.materialProps,"color",{view:"color"}),this.pane.addButton({title:"Pause/Play"}).on("click",()=>{this.togglePlay()})},unmounted(){this.pane.dispose()},methods:{togglePlay(){this.isPlaying=!this.isPlaying,this.$refs.liquid.togglePlay()},onKeyup(n){if(n.keyCode===32)this.togglePlay();else if(n.keyCode===82&&this.isPlaying)for(let t=0;t<20;t++)this.liquidEffect.addDrop(Math.random()*2-1,Math.random()*2-1,.01,.025)},onClick(){if(this.isPlaying){const n=2*this.pointerV3.x/this.WIDTH,t=2*-this.pointerV3.z/this.HEIGHT;this.liquidEffect.addDrop(n,t,.025,.05)}},onPointerMove(){if(this.isPlaying){this.raycaster.setFromCamera(this.pointer.positionN,this.$refs.renderer.three.camera),this.raycaster.ray.intersectPlane(this.pointerPlane,this.pointerV3);const n=2*this.pointerV3.x/this.WIDTH,t=2*-this.pointerV3.z/this.HEIGHT;this.liquidEffect.addDrop(n,t,.025,.002)}}}};function V(n,t,l,r,e,i){const o=a("Camera"),u=a("LiquidPlane"),h=a("Texture"),m=a("BasicMaterial"),f=a("PlaneC"),g=a("Group"),y=a("Scene"),P=a("Renderer");return j(),L(P,{ref:"renderer",antialias:"",pointer:{onMove:i.onPointerMove},resize:"","orbit-ctrl":{enableDamping:!0},onClick:i.onClick},{default:p(()=>[s(o,{position:{x:0,y:20,z:0}}),s(y,{ref:"scene",background:r.cubeTexture},{default:p(()=>[s(g,{rotation:{x:-Math.PI/2}},{default:p(()=>[s(u,{ref:"liquid",rotation:{x:0},width:r.WIDTH,height:r.HEIGHT,"material-props":e.materialProps},null,8,["width","height","material-props"]),s(f,{position:{x:0,y:0,z:-2},width:r.WIDTH,height:r.HEIGHT},{default:p(()=>[s(m,null,{default:p(()=>[s(h,{src:"/water/assets/tiles/Tiles107_1K_Color.jpg",props:{repeat:{x:1.5,y:1.5},wrapS:r.RepeatWrapping,wrapT:r.RepeatWrapping}},null,8,["props"])]),_:1})]),_:1},8,["width","height"])]),_:1},8,["rotation"])]),_:1},8,["background"])]),_:1},8,["pointer","onClick"])}var W=R(S,[["render",V]]);D(W).mount("#app"); 2 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | 213 | 214 | 223 | --------------------------------------------------------------------------------