diff --git a/README.md b/README.md index 32e6cb7b0..dedffe126 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,8 @@ load("/vrma/VRMA_01.vrma"); ## build ```sh -$ npm i -$ npm run dev -$ npm run build +$ yarn install +$ yarn dev +$ yarn build ``` diff --git a/dist/.DS_Store b/dist/.DS_Store new file mode 100644 index 000000000..940e94290 Binary files /dev/null and b/dist/.DS_Store differ diff --git a/dist/css/style.css b/dist/css/style.css index 2f8ce95ea..785f7aa22 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -1,3 +1,8 @@ +div#canvas { + width: 100%; + height: 600px; +} + div#menu { padding: 20px; border-bottom:solid 1px #ccc; diff --git a/dist/img/0.hdr b/dist/img/0.hdr new file mode 100644 index 000000000..74bef49a8 Binary files /dev/null and b/dist/img/0.hdr differ diff --git a/dist/img/1.hdr b/dist/img/1.hdr new file mode 100644 index 000000000..bc15b9a0c Binary files /dev/null and b/dist/img/1.hdr differ diff --git a/dist/index.html b/dist/index.html index 774d439c1..99e68ca8b 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,9 +9,10 @@ -
+
diff --git a/src/index.ts b/src/index.ts index 2c7aa02c5..eb73b0ecb 100644 --- a/src/index.ts +++ b/src/index.ts @@ -9,6 +9,8 @@ import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3 } from 'thr import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone'; +import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; + window.addEventListener("DOMContentLoaded", () => { const canvas = document.getElementById("canvas"); if (canvas == null) return; @@ -99,14 +101,6 @@ window.addEventListener("DOMContentLoaded", () => { const clock = new THREE.Clock(); clock.start(); - scene.background = new THREE.Color( 0xffffff ); - const directionalLight = new THREE.DirectionalLight(0xffffff); - directionalLight.position.set(1, 1, 1); - scene.add(directionalLight); - - const ambientLight = new THREE.AmbientLight(0x333333); - scene.add(ambientLight); - const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.2; @@ -114,6 +108,13 @@ window.addEventListener("DOMContentLoaded", () => { controls.target.set( 0.0, 1.0, 0.0 ); function floor_default(){ + scene.background = new THREE.Color( 0xffffff ); + const directionalLight = new THREE.DirectionalLight(0xffffff); + directionalLight.position.set(1, 1, 1); + scene.add(directionalLight); + const ambientLight = new THREE.AmbientLight(0x333333); + scene.add(ambientLight); + const floor = new Mesh( new BoxGeometry(50, 100), new MeshLambertMaterial({ @@ -123,24 +124,38 @@ window.addEventListener("DOMContentLoaded", () => { ); floor.position.y = -1.0; floor.rotation.x = -Math.PI / 2; - floor.name = "floor"; scene.add(floor); - } - - function floor_grid(){ const grid = new GridHelper(50, 100, 0xffffff, 0xffffff); scene.add(grid); grid.position.set(Math.round(0), 0, Math.round(0)); - } - function floor_bg(){ scene.fog = new Fog(0xffffff, 3, 20); scene.fog?.color.set(0xffffff); } - floor_default(); - floor_grid(); - floor_bg(); + scene.background = new THREE.Color( 0xffffff ); + const directionalLight = new THREE.DirectionalLight(0xffffff); + directionalLight.position.set(1, 1, 1); + scene.add(directionalLight); + const ambientLight = new THREE.AmbientLight(0x333333); + scene.add(ambientLight); + + //const floor = new Mesh( + // new BoxGeometry(50, 100), + // new MeshLambertMaterial({ + // color: 0xffffff, + // depthWrite: true, + // }) + //); + //floor.position.y = -1.0; + //floor.rotation.x = -Math.PI / 2; + //scene.add(floor); + + const grid = new GridHelper(50, 100, 0xffffff, 0xffffff); + scene.add(grid); + grid.position.set(Math.round(0), 0, Math.round(0)); + scene.fog = new Fog(0xffffff, 3, 20); + scene.fog?.color.set(0xffffff); function animate() { controls.update(); @@ -204,12 +219,12 @@ window.addEventListener("DOMContentLoaded", () => { const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null; if(el_light != null) { el_light.addEventListener('click', function(){ - light_off(); + light_s(); }); } let light_enable = true; - function light_off(){ + function light_s(){ if (light_enable == true) { light_enable = false; renderer.toneMapping = THREE.ACESFilmicToneMapping; @@ -225,4 +240,27 @@ window.addEventListener("DOMContentLoaded", () => { } console.log(light_enable); } + + const el_hdr = document.querySelector('#btn-sandar') as HTMLInputElement | null; + if(el_hdr != null) { + el_hdr.addEventListener('click', function(){ + hdr_s(); + }); + } + + let hdr_r = 0; + function hdr_s() { + if (hdr_r == 0) { + hdr_r = 1; + } else { + hdr_r = 0; + } + let hdr = "/img/" + hdr_r + ".hdr"; + new RGBELoader().load(hdr, function (texture) { + texture.mapping = THREE.EquirectangularReflectionMapping; + scene.background = texture; + scene.environment = texture; + }); + } + })