ai/vrm
ai/vrm
1
0
Fork 0
Code

fix

Browse Source
This commit is contained in:
syui 2024-03-24 03:49:05 +09:00
parent b6ebcf4bc4
commit 27bbe3047c
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
2 changed files with 43 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@ -26,7 +26,9 @@
</span> </span>
<span class="menu-right" id="nav-mobile"> <span class="menu-right" id="nav-mobile">
<button id='btn-user'><i class="fa-solid fa-user"></i></button> <button id='btn-user'><i class="fa-solid fa-user"></i></button>
<button id='btn-sandar'><i class="fa-solid fa-earth-americas"></i></button> <button id='btn-grid'><i class="fa-solid fa-border-none"></i></button>
<button id='btn-sandar'><i class="fa-solid fa-location-dot"></i></button>
<button id='btn-tera'><i class="fa-solid fa-earth-americas"></i></button>
</span> </span>
<span class="menu-nav"> <span class="menu-nav">
<button id='nav'><i class="fa-solid fa-bars"></i></button> <button id='nav'><i class="fa-solid fa-bars"></i></button>

46
src/index.ts
View File

@ -6,10 +6,6 @@ import { createVRMAnimationClip, VRMAnimationLoaderPlugin } from "@pixiv/three-v
import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3, Vector2, Color, DirectionalLight, Fog, HemisphereLight, HalfFloatType } from 'three'; import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3, Vector2, Color, DirectionalLight, Fog, HemisphereLight, HalfFloatType } from 'three';
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"; import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
//import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
//import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
//import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
// https://github.com/pmndrs/postprocessing
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing"; import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
@ -104,7 +100,6 @@ window.addEventListener("DOMContentLoaded", () => {
} }
const loader = new GLTFLoader(manager); const loader = new GLTFLoader(manager);
loader.register((parser) => { loader.register((parser) => {
return new VRMLoaderPlugin(parser); return new VRMLoaderPlugin(parser);
}); });
@ -115,6 +110,14 @@ window.addEventListener("DOMContentLoaded", () => {
load("/vrma/model/ai.vrm"); load("/vrma/model/ai.vrm");
load("/vrma/anime/fly_c.vrma"); load("/vrma/anime/fly_c.vrma");
let item = null;
loader.load( '/vrma/item/tera.glb', function ( gltf ) {
item = gltf.scene;
}, undefined, function ( error ) {
console.error( error );
});
const clock = new THREE.Clock(); const clock = new THREE.Clock();
clock.start(); clock.start();
@ -394,7 +397,7 @@ window.addEventListener("DOMContentLoaded", () => {
currentVrm.update(delta); currentVrm.update(delta);
} }
requestAnimationFrame(animate); requestAnimationFrame(animate);
scene.rotation.y += 0.005; scene.rotation.y += 0.0005;
renderer.render(scene, camera); renderer.render(scene, camera);
} }
@ -434,4 +437,35 @@ window.addEventListener("DOMContentLoaded", () => {
}); });
} }
let grid_enable = true;
const el_grid = document.querySelector('#btn-grid') as HTMLInputElement | null;
if(el_grid != null) {
el_grid.addEventListener('click', function(){
if (grid_enable == true) {
scene.remove(grid);
grid_enable = false;
} else {
scene.add(grid);
grid_enable = true;
}
});
}
let tera_enable = true;
const el_tera = document.querySelector('#btn-tera') as HTMLInputElement | null;
if(el_tera != null) {
el_tera.addEventListener('click', function(){
if (tera_enable == true) {
item.rotation.set(0, 0, 5);
item.position.set(0, -15, 0);
item.scale.set(8, 8, 8);
scene.add(item);
tera_enable = false;
} else {
scene.remove(item);
tera_enable = true;
}
});
}
}) })