import gltf model, modulate light intensity, add linting
This commit is contained in:
parent
101f275d29
commit
081c73ca75
GPG Key ID:
4199EFB7DAA34349
|
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
static
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"root": true,
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"plugins": ["@typescript-eslint"],
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"semi": [2, "always"],
|
||||||
|
"@typescript-eslint/no-explicit-any": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
module.exports = {
|
||||||
|
singleQuote: true,
|
||||||
|
trailingComma: 'all',
|
||||||
|
tabWidth: 2,
|
||||||
|
useTabs: true
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
}
|
||||||
42
index.html
42
index.html
|
|
@ -1,12 +1,44 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||||
<title>Audio Visualizer</title>
|
<title>Audio Visualizer</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="margin: 0; background: black">
|
||||||
<script src="dist/index.js"></script>
|
<div id="container">
|
||||||
|
<div
|
||||||
|
id="loader"
|
||||||
|
style="
|
||||||
|
color: #efefef;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
"
|
||||||
|
>
|
||||||
|
Loading model: 0%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0px;
|
||||||
|
color: #efefef;
|
||||||
|
font-size: 10px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
max-width: 800px;
|
||||||
|
width: 100%;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="padding: 8px">
|
||||||
|
"Low Poly Human Hands (All Quads)" (https://skfb.ly/WuXz) by Jeremy E.
|
||||||
|
Grayson is licensed under Creative Commons Attribution
|
||||||
|
(http://creativecommons.org/licenses/by/4.0/).
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="dist/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,12 +5,16 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "esbuild src/index.ts --outfile=dist/index.js --bundle --loader:.ts=ts --serve=localhost:8000 --servedir=.",
|
"dev": "esbuild src/index.ts --outfile=dist/index.js --bundle --loader:.ts=ts --serve=localhost:8000 --servedir=.",
|
||||||
|
"lint": "eslint . --ext .ts",
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
},
|
},
|
||||||
"author": "Silas",
|
"author": "Silas",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.14.0",
|
||||||
|
"@typescript-eslint/parser": "^5.14.0",
|
||||||
"esbuild": "^0.14.25",
|
"esbuild": "^0.14.25",
|
||||||
|
"eslint": "^8.10.0",
|
||||||
"three": "^0.138.3"
|
"three": "^0.138.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
69
src/index.ts
69
src/index.ts
|
|
@ -1 +1,68 @@
|
||||||
console.log("test");
|
import { Scene, PerspectiveCamera, WebGLRenderer, PointLight } from "three";
|
||||||
|
import { Load } from "./model";
|
||||||
|
|
||||||
|
let renderer, scene, camera, light;
|
||||||
|
init().then(() => animate());
|
||||||
|
|
||||||
|
async function init() {
|
||||||
|
const container = document.getElementById("container");
|
||||||
|
|
||||||
|
scene = new Scene();
|
||||||
|
camera = new PerspectiveCamera(
|
||||||
|
75,
|
||||||
|
window.innerWidth / window.innerHeight,
|
||||||
|
1,
|
||||||
|
10000
|
||||||
|
);
|
||||||
|
camera.position.z = 5;
|
||||||
|
|
||||||
|
light = new PointLight(0x119911, 0);
|
||||||
|
light.counter = 0;
|
||||||
|
light.position.set(0, 0.2, 0.2);
|
||||||
|
scene.add(light);
|
||||||
|
|
||||||
|
renderer = new WebGLRenderer();
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
container.appendChild(renderer.domElement);
|
||||||
|
window.addEventListener("resize", onWindowResize);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const gltf = await Load();
|
||||||
|
document.getElementById("loader").innerHTML = "";
|
||||||
|
|
||||||
|
// remove second hand with text above it
|
||||||
|
const objToRemove = gltf.scene.getObjectByName("Object_3");
|
||||||
|
objToRemove.parent.remove(objToRemove);
|
||||||
|
|
||||||
|
// turn remaining hand into wireframe
|
||||||
|
const hand = gltf.scene.getObjectByName("Object_4");
|
||||||
|
hand.material.wireframe = true;
|
||||||
|
|
||||||
|
// center hand in scene
|
||||||
|
hand.position.x = hand.position.x + 1.5;
|
||||||
|
|
||||||
|
scene.add(gltf.scene);
|
||||||
|
} catch (err) {
|
||||||
|
console.warn(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
render();
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
// modulate light intensity between 0.5 and 1.5
|
||||||
|
light.counter += 0.01;
|
||||||
|
light.intensity = Math.sin(light.counter) / 2 + 1;
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWindowResize() {
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { AnimationClip, Scene, Camera } from "three";
|
||||||
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||||
|
|
||||||
|
const loader = new GLTFLoader();
|
||||||
|
|
||||||
|
export interface GLTF {
|
||||||
|
animations: AnimationClip[];
|
||||||
|
scene: Scene;
|
||||||
|
scenes: Scene[];
|
||||||
|
cameras: Camera[];
|
||||||
|
asset: object;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Load(): Promise<GLTF> {
|
||||||
|
const loadingDiv = document.getElementById("loader");
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
loader.load(
|
||||||
|
"/static/scene.gltf",
|
||||||
|
(object: GLTF) => resolve(object),
|
||||||
|
(progress) =>
|
||||||
|
(loadingDiv.innerHTML = `Loading model: ${
|
||||||
|
(progress.loaded / progress.total) * 100
|
||||||
|
}%`),
|
||||||
|
(error: ErrorEvent) => {
|
||||||
|
console.log(error.target);
|
||||||
|
reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
Binary file not shown.
|
|
@ -0,0 +1,230 @@
|
||||||
|
{
|
||||||
|
"accessors": [
|
||||||
|
{
|
||||||
|
"bufferView": 1,
|
||||||
|
"componentType": 5126,
|
||||||
|
"count": 3943,
|
||||||
|
"max": [
|
||||||
|
5.5608649253845215,
|
||||||
|
1.1105560064315796,
|
||||||
|
4.247222900390625
|
||||||
|
],
|
||||||
|
"min": [
|
||||||
|
0.3061549663543701,
|
||||||
|
0.0,
|
||||||
|
0.0
|
||||||
|
],
|
||||||
|
"type": "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView": 1,
|
||||||
|
"byteOffset": 47316,
|
||||||
|
"componentType": 5126,
|
||||||
|
"count": 3943,
|
||||||
|
"max": [
|
||||||
|
0.9995856881141663,
|
||||||
|
0.9999607801437378,
|
||||||
|
0.9843857884407043
|
||||||
|
],
|
||||||
|
"min": [
|
||||||
|
-0.9925550818443298,
|
||||||
|
-1.0,
|
||||||
|
-0.8909242153167725
|
||||||
|
],
|
||||||
|
"type": "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView": 0,
|
||||||
|
"componentType": 5125,
|
||||||
|
"count": 7347,
|
||||||
|
"type": "SCALAR"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView": 1,
|
||||||
|
"byteOffset": 94632,
|
||||||
|
"componentType": 5126,
|
||||||
|
"count": 11781,
|
||||||
|
"max": [
|
||||||
|
2.6234819889068604,
|
||||||
|
1.0917659997940063,
|
||||||
|
3.871922016143799
|
||||||
|
],
|
||||||
|
"min": [
|
||||||
|
0.0,
|
||||||
|
0.00719200074672699,
|
||||||
|
0.0003199577331542969
|
||||||
|
],
|
||||||
|
"type": "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView": 1,
|
||||||
|
"byteOffset": 236004,
|
||||||
|
"componentType": 5126,
|
||||||
|
"count": 11781,
|
||||||
|
"max": [
|
||||||
|
0.9999923706054688,
|
||||||
|
1.0,
|
||||||
|
0.999294638633728
|
||||||
|
],
|
||||||
|
"min": [
|
||||||
|
-0.999995231628418,
|
||||||
|
-1.0,
|
||||||
|
-0.8630495667457581
|
||||||
|
],
|
||||||
|
"type": "VEC3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"bufferView": 0,
|
||||||
|
"byteOffset": 29388,
|
||||||
|
"componentType": 5125,
|
||||||
|
"count": 70560,
|
||||||
|
"type": "SCALAR"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"asset": {
|
||||||
|
"extras": {
|
||||||
|
"author": "Jeremy E. Grayson (https://sketchfab.com/JeremyGrayson)",
|
||||||
|
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||||
|
"source": "https://sketchfab.com/3d-models/low-poly-human-hands-all-quads-027173f5759f473b9dfeee724ea0f7f6",
|
||||||
|
"title": "Low Poly Human Hands (All Quads)"
|
||||||
|
},
|
||||||
|
"generator": "Sketchfab-12.63.0",
|
||||||
|
"version": "2.0"
|
||||||
|
},
|
||||||
|
"bufferViews": [
|
||||||
|
{
|
||||||
|
"buffer": 0,
|
||||||
|
"byteLength": 311628,
|
||||||
|
"name": "floatBufferViews",
|
||||||
|
"target": 34963
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"buffer": 0,
|
||||||
|
"byteLength": 377376,
|
||||||
|
"byteOffset": 311628,
|
||||||
|
"byteStride": 12,
|
||||||
|
"name": "floatBufferViews",
|
||||||
|
"target": 34962
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"buffers": [
|
||||||
|
{
|
||||||
|
"byteLength": 689004,
|
||||||
|
"uri": "scene.bin"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"materials": [
|
||||||
|
{
|
||||||
|
"doubleSided": true,
|
||||||
|
"name": "Material",
|
||||||
|
"pbrMetallicRoughness": {
|
||||||
|
"metallicFactor": 0.0,
|
||||||
|
"roughnessFactor": 0.6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"meshes": [
|
||||||
|
{
|
||||||
|
"name": "Object_0",
|
||||||
|
"primitives": [
|
||||||
|
{
|
||||||
|
"attributes": {
|
||||||
|
"NORMAL": 1,
|
||||||
|
"POSITION": 0
|
||||||
|
},
|
||||||
|
"indices": 2,
|
||||||
|
"material": 0,
|
||||||
|
"mode": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Object_1",
|
||||||
|
"primitives": [
|
||||||
|
{
|
||||||
|
"attributes": {
|
||||||
|
"NORMAL": 4,
|
||||||
|
"POSITION": 3
|
||||||
|
},
|
||||||
|
"indices": 5,
|
||||||
|
"material": 0,
|
||||||
|
"mode": 4
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"children": [
|
||||||
|
1
|
||||||
|
],
|
||||||
|
"matrix": [
|
||||||
|
1.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
2.220446049250313e-16,
|
||||||
|
-1.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
1.0,
|
||||||
|
2.220446049250313e-16,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
1.0
|
||||||
|
],
|
||||||
|
"name": "Sketchfab_model"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"children": [
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"matrix": [
|
||||||
|
1.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
1.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
0.0,
|
||||||
|
1.0,
|
||||||
|
0.0,
|
||||||
|
-2.7768239974975586,
|
||||||
|
0.04503500089049339,
|
||||||
|
-1.602916955947876,
|
||||||
|
1.0
|
||||||
|
],
|
||||||
|
"name": "LowPolyHands.obj.cleaner.gles"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"children": [
|
||||||
|
3,
|
||||||
|
4
|
||||||
|
],
|
||||||
|
"name": "Object_2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mesh": 0,
|
||||||
|
"name": "Object_3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mesh": 1,
|
||||||
|
"name": "Object_4"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"scene": 0,
|
||||||
|
"scenes": [
|
||||||
|
{
|
||||||
|
"name": "Sketchfab_Scene",
|
||||||
|
"nodes": [
|
||||||
|
0
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue