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"
|
||||
}
|
||||
44
index.html
44
index.html
|
|
@ -1,12 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Audio Visualizer</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="dist/index.js"></script>
|
||||
<body style="margin: 0; background: black">
|
||||
<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>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,12 +5,16 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"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"
|
||||
},
|
||||
"author": "Silas",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.14.0",
|
||||
"@typescript-eslint/parser": "^5.14.0",
|
||||
"esbuild": "^0.14.25",
|
||||
"eslint": "^8.10.0",
|
||||
"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