1
0
This commit is contained in:
syui 2024-03-19 02:11:30 +09:00
parent d7d3542277
commit 859c45a4bf
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
3 changed files with 68 additions and 7 deletions

1
.gitignore vendored
View File

@ -1,2 +1,3 @@
node_modules node_modules
package-lock.json package-lock.json
example

View File

@ -16,6 +16,7 @@
"dependencies": { "dependencies": {
"@pixiv/three-vrm": "^2.1.1", "@pixiv/three-vrm": "^2.1.1",
"@pixiv/three-vrm-animation": "^2.1.1", "@pixiv/three-vrm-animation": "^2.1.1",
"@pixiv/three-vrm-springbone": "^2.1.1",
"three": "^0.162.0" "three": "^0.162.0"
} }
} }

View File

@ -7,6 +7,8 @@ import { createVRMAnimationClip, VRMAnimationLoaderPlugin } from "@pixiv/three-v
import { Color, DirectionalLight, Fog, HemisphereLight } from 'three'; import { Color, DirectionalLight, Fog, HemisphereLight } from 'three';
import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3 } from 'three'; import { GridHelper, Mesh, MeshLambertMaterial, BoxGeometry, Vector3 } from 'three';
import { VRMSpringBoneManager, VRMSpringBoneJoint, VRMSpringBoneJointHelper } from '@pixiv/three-vrm-springbone';
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
if (canvas == null) return; if (canvas == null) return;
@ -17,19 +19,23 @@ window.addEventListener("DOMContentLoaded", () => {
30, canvas.clientWidth/canvas.clientHeight, 0.1, 20); 30, canvas.clientWidth/canvas.clientHeight, 0.1, 20);
camera.position.set(0.0, 0.9, -4.0) camera.position.set(0.0, 0.9, -4.0)
camera.rotation.set(0.0, Math.PI, 0.0) camera.rotation.set(0.0, Math.PI, 0.0)
camera.lookAt(new THREE.Vector3(0, 0, 0)); camera.lookAt(new THREE.Vector3(0, 0, 0));
// https://threejs.org/docs/#api/en/constants/Renderer
const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); const renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(canvas.clientWidth, canvas.clientHeight); renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0x7fbfff, 1.0); renderer.setClearColor(0x7fbfff, 1.0);
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.outputColorSpace = THREE.SRGBColorSpace;
//renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMapping = THREE.ReinhardToneMapping;
//renderer.toneMappingExposure = 1; renderer.toneMapping = THREE.NeutralToneMapping;
canvas.appendChild(renderer.domElement); canvas.appendChild(renderer.domElement);
renderer.toneMappingExposure = 1.5;
const light = new THREE.DirectionalLight(0xffffff, Math.PI); //renderer.toneMapping = THREE.ACESFilmicToneMapping;
const light = new THREE.DirectionalLight(0xffffff, Math.PI);
light.position.set(1.0, 1.0, 1.0); light.position.set(1.0, 1.0, 1.0);
scene.add(light); scene.add(light);
@ -54,13 +60,13 @@ window.addEventListener("DOMContentLoaded", () => {
function tryInitVRM(gltf: any) { function tryInitVRM(gltf: any) {
const vrm = gltf.userData.vrm; const vrm = gltf.userData.vrm;
if ( vrm == null ) { if ( vrm == null ) {
return; return;
} }
currentVrm = vrm; currentVrm = vrm;
scene.add(vrm.scene); scene.add(vrm.scene);
initAnimationClip(); initAnimationClip();
} }
function tryInitVRMA(gltf: any) { function tryInitVRMA(gltf: any) {
const vrmAnimations = gltf.userData.vrmAnimations; const vrmAnimations = gltf.userData.vrmAnimations;
@ -94,6 +100,7 @@ window.addEventListener("DOMContentLoaded", () => {
clock.start(); clock.start();
const update = () => { const update = () => {
controls.update(); controls.update();
requestAnimationFrame(update); requestAnimationFrame(update);
const deltaTime = clock.getDelta(); const deltaTime = clock.getDelta();
@ -131,7 +138,9 @@ 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(){ function floor_grid(){
@ -150,6 +159,49 @@ window.addEventListener("DOMContentLoaded", () => {
update(); update();
function animate() {
requestAnimationFrame(animate);
scene.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
function random_happy() {
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/expressions.ja.md
currentVrm.expressionManager.setValue('relaxed', 0.5);
}
function random_head() {
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/lookAt.ja.md
currentVrm.lookAt.target = camera;
currentVrm.VRMLookAtBoneApplier = camera;
currentVrm.VRMLookAtExpressionApplier = camera;
// https://github.com/vrm-c/vrm-specification/blob/master/specification/VRMC_vrm-1.0/humanoid.ja.md
const head = currentVrm.humanoid.getRawBoneNode("head");
head.target = camera;
}
function random_blink(){
setInterval(() => {
currentVrm.expressionManager.setValue('relaxed', 0);
currentVrm.expressionManager.setValue('blink', 0);
random_head();
const r = Math.floor(Math.random() * 3);
if (r == 1) {
setTimeout(() => { currentVrm.expressionManager.setValue('blink', 1); }, 5000);
setTimeout(() => {
currentVrm.expressionManager.setValue('blink', 0);
}, 5500);
};
setTimeout(() => {
currentVrm.expressionManager.setValue('relaxed', 0.5);
currentVrm.expressionManager.setValue('blink', 1);
}, 6000);
}, 6500);
}
random_blink();
setInterval(() => { setInterval(() => {
const r = Math.floor(Math.random() * 4 + 1); const r = Math.floor(Math.random() * 4 + 1);
load("/vrma/" + r + ".vrma"); load("/vrma/" + r + ".vrma");
@ -158,4 +210,11 @@ window.addEventListener("DOMContentLoaded", () => {
}, 10000); }, 10000);
}, 15000); }, 15000);
function light_off(){
renderer.toneMapping = THREE.ACESFilmicToneMapping;
light.intensity = -0.5;
scene.background = new THREE.Color(0x000000);
scene.fog = new Fog(0x000000, 3, 20);
}
//light_off();
}) })