Skip to content

Commit

Permalink
updated web code
Browse files Browse the repository at this point in the history
  • Loading branch information
@xianfei
xianfei committed Jul 3, 2024
1 parent d662e4b commit c464b90
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 45 deletions.
26 changes: 10 additions & 16 deletions webserv/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,22 @@
name="viewport"
content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
/>
<!-- Three.js -->
<script src="/node_modules/three/build/three.js"></script>
<!-- GLTF Loader for Three.js -->
<script src="/node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
<script src="../node_modules/three/examples/js/loaders/FBXLoader.js"></script>
<script src="../node_modules/three/examples/js/libs/fflate.min.js"></script>
<!-- Orbit Controls for Three.js -->
<script src="/node_modules/three/examples/js/controls/OrbitControls.js"></script>
<!-- VRM Loader for Three.js -->
<script src="/node_modules/@pixiv/three-vrm/lib/three-vrm.js"></script>
<!-- Mediapipe -->
<script src="/node_modules/@mediapipe/holistic/holistic.js"></script>
<!-- Mediapipe Drawing Tools -->
<script src="/node_modules/@mediapipe/drawing_utils/drawing_utils.js"></script>
<!-- Mediapipe Camera Tools -->
<script src="/node_modules/@mediapipe/camera_utils/camera_utils.js"></script>

<script src='/node_modules/socket.io/client-dist/socket.io.js'></script>

<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="/node_modules/kalidokit/dist/kalidokit.umd.js"></script>
<script type="importmap">
{
"imports": {
"three": "../node_modules/three/build/three.module.js",
"three/addons/": "../node_modules/three/examples/jsm/",
"@pixiv/three-vrm": "../node_modules/@pixiv/three-vrm/lib/three-vrm.module.js"
}
}
</script>
<script src="./script.js" type="module"></script>
</body>
</html>
103 changes: 74 additions & 29 deletions webserv/public/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ const socket = io();

import { ARButton } from "/node_modules/three/examples/jsm/webxr/ARButton.js";
import { VRButton } from "/node_modules/three/examples/jsm/webxr/VRButton.js";
import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { FBXLoader } from "three/addons/loaders/FBXLoader.js";
import Stats from "three/addons/libs/stats.module.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { VRMLoaderPlugin, VRMUtils } from "@pixiv/three-vrm";


/* THREEJS WORLD SETUP */
Expand Down Expand Up @@ -57,23 +63,14 @@ const orbitCamera = new THREE.PerspectiveCamera(
orbitCamera.position.set(0.0, 0.2, 1.8);

// controls
const orbitControls = new THREE.OrbitControls(orbitCamera, renderer.domElement);
const orbitControls = new OrbitControls(orbitCamera, renderer.domElement);
orbitControls.screenSpacePanning = true;
orbitControls.target.set(0.0, 0.2, 0.0);
orbitControls.update();

// scene
const scene = new THREE.Scene();

// light
const light = new THREE.AmbientLight(0xffffff, 0.8);
light.position.set(10.0, 10.0, -10.0).normalize();
scene.add(light);
var light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 3, -2);
light2.castShadow = true;
scene.add(light2);

// model info
const modelInfoRes = await fetch("/modelInfo");
var modelObj = await modelInfoRes.json();
Expand All @@ -85,6 +82,21 @@ const clock = new THREE.Clock();

var fileType = modelObj.type

// light
var light0 = new THREE.DirectionalLight(0xffffff, Math.PI);
light0.position.set(1.0, 1.0, 1.0).normalize();
scene.add(light0);

if (fileType !== "vrm") {
const light = new THREE.AmbientLight(0xffffff, 0.8);
light.position.set(10.0, 10.0, -10.0).normalize();
scene.add(light);
var light2 = new THREE.DirectionalLight(0xffffff, 1);
light2.position.set(0, 3, -2);
light2.castShadow = true;
scene.add(light2);
}

var skeletonHelper;

/* VRM CHARACTER SETUP */
Expand All @@ -95,9 +107,12 @@ var initRotation = {};
// Import model from URL, add your own model here
var loader = null;
if (fileType == "fbx") {
loader = new THREE.FBXLoader();
loader = new FBXLoader();
} else {
loader = new THREE.GLTFLoader();
loader = new GLTFLoader();
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
}
// Import Character
loader.crossOrigin = "anonymous";
Expand All @@ -115,14 +130,15 @@ loader.load(

if (fileType == "vrm") {
// calling these functions greatly improves the performance
THREE.VRMUtils.removeUnnecessaryVertices(gltf.scene);
THREE.VRMUtils.removeUnnecessaryJoints(gltf.scene);

THREE.VRM.from(gltf).then((vrm) => {
scene.add(vrm.scene);
currentVrm = vrm;
currentVrm.scene.rotation.y = Math.PI; // Rotate model 180deg to face camera
});
VRMUtils.removeUnnecessaryVertices(gltf.scene);
VRMUtils.removeUnnecessaryJoints(gltf.scene);
const vrm = gltf.userData.vrm;
scene.add(vrm.scene);
if (vrm.meta.metaVersion === "0") {
vrm.scene.rotation.y = Math.PI; // Rotate model 180deg to face camera
}
currentVrm = vrm;
window.currentVrm = currentVrm;
} else {
skeletonHelper = new THREE.SkeletonHelper(model);
skeletonHelper.visible = false;
Expand Down Expand Up @@ -179,6 +195,12 @@ loader.load(
(error) => console.error(error)
);

function capitalizeFirstLetterToLowerCase(str) {
if (str.length === 0) {
return str;
}
return str.charAt(0).toLowerCase() + str.slice(1);
}

// Animate Rotation Helper function
const rigRotation = (
Expand All @@ -188,16 +210,20 @@ const rigRotation = (
lerpAmount = 0.3
) => {
if (currentVrm) {
const Part = currentVrm.humanoid.getBoneNode(
THREE.VRMSchema.HumanoidBoneName[name]
const Part = currentVrm.humanoid.getNormalizedBoneNode(
capitalizeFirstLetterToLowerCase(name)
);
if (!Part) {
return;
}
let euler = new THREE.Euler(
rotation.x * dampener,
(currentVrm.meta.metaVersion === "1" ? -1 : 1) *
rotation.x *
dampener,
rotation.y * dampener,
rotation.z * dampener,
(currentVrm.meta.metaVersion === "1" ? -1 : 1) *
rotation.z *
dampener,
rotation.rotationOrder || "XYZ"
);
let quaternion = new THREE.Quaternion().setFromEuler(euler);
Expand Down Expand Up @@ -245,8 +271,8 @@ const rigPosition = (
lerpAmount = 0.3
) => {
if (currentVrm) {
const Part = currentVrm.humanoid.getBoneNode(
THREE.VRMSchema.HumanoidBoneName[name]
const Part = currentVrm.humanoid.getNormalizedBoneNode(
capitalizeFirstLetterToLowerCase(name)
);
if (!Part) {
return;
Expand Down Expand Up @@ -287,8 +313,27 @@ const rigFace = (riggedFace) => {
}

// Blendshapes and Preset Name Schema
const Blendshape = currentVrm.blendShapeProxy;
const PresetName = THREE.VRMSchema.BlendShapePresetName;
const Blendshape = currentVrm.expressionManager;
const PresetName = {
A: "aa",
Angry: "angry",
Blink: "blink",
BlinkL: "blinkLeft",
BlinkR: "blinkRight",
E: "ee",
Fun: "happy",
I: "ih",
Joy: "relaxed",
Lookdown: "lookDown",
Lookleft: "lookLeft",
Lookright: "lookRight",
Lookup: "lookUp",
Neutral: "neutral",
O: "oh",
Sorrow: "sad",
U: "ou",
Unknown: "unknown",
};

// Simple example without winking. Interpolate based on old blendshape, then stabilize blink with `Kalidokit` helper function.
// for VRM, 1 is closed, 0 is open.
Expand Down Expand Up @@ -363,7 +408,7 @@ const rigFace = (riggedFace) => {
"XYZ"
);
oldLookTarget.copy(lookTarget);
currentVrm.lookAt.applyer.lookAt(lookTarget);
currentVrm.lookAt.applier.applyYawPitch(lookTarget.y, lookTarget.x);
};

/* VRM Character Animator */
Expand Down

0 comments on commit c464b90

Please sign in to comment.