ai/vrm
ai/vrm
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-03-19 17:06:00 +09:00
parent 8041214d8b
commit b618941767
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
7 changed files with 68 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -23,8 +23,8 @@ load("/vrma/VRMA_01.vrma");
## build ## build
```sh ```sh
$ npm i $ yarn install
$ npm run dev $ yarn dev
$ npm run build $ yarn build
``` ```

BIN
dist/.DS_Store vendored Normal file
View File

Binary file not shown.

5
dist/css/style.css vendored
View File

@ -1,3 +1,8 @@
div#canvas {
width: 100%;
height: 600px;
}
div#menu { div#menu {
padding: 20px; padding: 20px;
border-bottom:solid 1px #ccc; border-bottom:solid 1px #ccc;

BIN
dist/img/0.hdr vendored Normal file
View File

Binary file not shown.

BIN
dist/img/1.hdr vendored Normal file
View File

Binary file not shown.

5
dist/index.html vendored
View File

@ -9,9 +9,10 @@
</head> </head>
<body> <body>
<div id="menu"> <div id="menu">
<button id='btn-ai'><a href="https://v.syui.ai"><span class="icon-ai"/></a></button> <button id='btn-ai'><a href="/"><span class="icon-ai"/></a></button>
<button id='btn-moon'><span class="icon-moon"/></button> <button id='btn-moon'><span class="icon-moon"/></button>
<button id='btn-sandar'><span class="icon-sandar"/></button>
</div> </div>
<div id="canvas" style="width:100%;height:640px;"></div> <div id="canvas"></div>
</body> </body>
</html> </html>

76
src/index.ts
View File

@ -9,6 +9,8 @@ import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3 } from 'thr
import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone'; import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone';
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
if (canvas == null) return; if (canvas == null) return;
@ -99,14 +101,6 @@ window.addEventListener("DOMContentLoaded", () => {
const clock = new THREE.Clock(); const clock = new THREE.Clock();
clock.start(); 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); const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; controls.enableDamping = true;
controls.dampingFactor = 0.2; controls.dampingFactor = 0.2;
@ -114,6 +108,13 @@ window.addEventListener("DOMContentLoaded", () => {
controls.target.set( 0.0, 1.0, 0.0 ); controls.target.set( 0.0, 1.0, 0.0 );
function floor_default(){ 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( const floor = new Mesh(
new BoxGeometry(50, 100), new BoxGeometry(50, 100),
new MeshLambertMaterial({ new MeshLambertMaterial({
@ -123,24 +124,38 @@ window.addEventListener("DOMContentLoaded", () => {
); );
floor.position.y = -1.0; floor.position.y = -1.0;
floor.rotation.x = -Math.PI / 2; floor.rotation.x = -Math.PI / 2;
floor.name = "floor";
scene.add(floor); scene.add(floor);
}
function floor_grid(){
const grid = new GridHelper(50, 100, 0xffffff, 0xffffff); const grid = new GridHelper(50, 100, 0xffffff, 0xffffff);
scene.add(grid); scene.add(grid);
grid.position.set(Math.round(0), 0, Math.round(0)); grid.position.set(Math.round(0), 0, Math.round(0));
}
function floor_bg(){
scene.fog = new Fog(0xffffff, 3, 20); scene.fog = new Fog(0xffffff, 3, 20);
scene.fog?.color.set(0xffffff); scene.fog?.color.set(0xffffff);
} }
floor_default(); scene.background = new THREE.Color( 0xffffff );
floor_grid(); const directionalLight = new THREE.DirectionalLight(0xffffff);
floor_bg(); 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() { function animate() {
controls.update(); controls.update();
@ -204,12 +219,12 @@ window.addEventListener("DOMContentLoaded", () => {
const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null; const el_light = document.querySelector('#btn-moon') as HTMLInputElement | null;
if(el_light != null) { if(el_light != null) {
el_light.addEventListener('click', function(){ el_light.addEventListener('click', function(){
light_off(); light_s();
}); });
} }
let light_enable = true; let light_enable = true;
function light_off(){ function light_s(){
if (light_enable == true) { if (light_enable == true) {
light_enable = false; light_enable = false;
renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMapping = THREE.ACESFilmicToneMapping;
@ -225,4 +240,27 @@ window.addEventListener("DOMContentLoaded", () => {
} }
console.log(light_enable); 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;
});
}
}) })