first test
commit
96a08012c9
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": "eslint:recommended",
|
||||||
|
"overrides": [
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": "latest",
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
node_modules
|
||||||
|
package-lock.json
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import * as THREE from "three"
|
||||||
|
import {OrbitControls} from "https://unpkg.com/three@0.150.1/examples/jsm/controls/OrbitControls.js"
|
||||||
|
const container = document.querySelector('#container')
|
||||||
|
|
||||||
|
// Scene setup
|
||||||
|
const scene = new THREE.Scene()
|
||||||
|
scene.background = new THREE.Color(0x88ccff)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Light setup
|
||||||
|
const ambientLight = new THREE.AmbientLight(0xb3c3e6);
|
||||||
|
scene.add(ambientLight);
|
||||||
|
|
||||||
|
// Renderer setup
|
||||||
|
const renderer = new THREE.WebGLRenderer({antialias: true})
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
|
||||||
|
// Camera setup
|
||||||
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||||
|
const controls = new OrbitControls( camera, renderer.domElement );
|
||||||
|
camera.position.z = 5;
|
||||||
|
|
||||||
|
// Objects setup
|
||||||
|
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
||||||
|
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 } );
|
||||||
|
const cube = new THREE.Mesh( geometry, material );
|
||||||
|
scene.add(cube);
|
||||||
|
|
||||||
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
|
// Animation loop setup
|
||||||
|
function animate() {
|
||||||
|
renderer.render(scene, camera)
|
||||||
|
controls.update()
|
||||||
|
requestAnimationFrame(animate)
|
||||||
|
cube.rotation.x +=0.01;
|
||||||
|
cube.rotation.y += 0.01;
|
||||||
|
}
|
||||||
|
|
||||||
|
animate()
|
||||||
|
|
||||||
|
// Window resize callback
|
||||||
|
window.addEventListener("resize", ()=>{
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
})
|
||||||
|
|
||||||
|
export default {
|
||||||
|
scene: scene,
|
||||||
|
}
|
||||||
@ -0,0 +1,372 @@
|
|||||||
|
import * as THREE from "https://cdn.skypack.dev/three@0.129.0";
|
||||||
|
|
||||||
|
import Stats from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/libs/stats.module.js";
|
||||||
|
|
||||||
|
import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";
|
||||||
|
import { DRACOLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/DRACOLoader.js";
|
||||||
|
|
||||||
|
import { Octree } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/math/Octree.js";
|
||||||
|
import { Capsule } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/math/Capsule.js";
|
||||||
|
import { DeviceOrientationControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/DeviceOrientationControls.js";
|
||||||
|
|
||||||
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
|
||||||
|
navigator.userAgent
|
||||||
|
);
|
||||||
|
|
||||||
|
let mixer;
|
||||||
|
let controls;
|
||||||
|
const clock = new THREE.Clock();
|
||||||
|
|
||||||
|
const extScene = new THREE.Scene();
|
||||||
|
const intScene = new THREE.Scene();
|
||||||
|
let scene = extScene;
|
||||||
|
|
||||||
|
let intSceneisLoaded = false;
|
||||||
|
|
||||||
|
extScene.background = new THREE.Color(0x88ccff);
|
||||||
|
intScene.background = new THREE.Color(0xffcc88);
|
||||||
|
|
||||||
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||||
|
camera.rotation.order = "YXZ";
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
controls = new DeviceOrientationControls(camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
// LIGHTS
|
||||||
|
|
||||||
|
const ambientlight = new THREE.AmbientLight(0xb3c3e6);
|
||||||
|
|
||||||
|
extScene.add(ambientlight);
|
||||||
|
intScene.add(ambientlight.clone());
|
||||||
|
|
||||||
|
const fillLight1 = new THREE.DirectionalLight(0xffffee, 0.2);
|
||||||
|
fillLight1.position.set(-1, 2, 2);
|
||||||
|
|
||||||
|
extScene.add(fillLight1);
|
||||||
|
intScene.add(fillLight1.clone());
|
||||||
|
|
||||||
|
const fillLight2 = new THREE.DirectionalLight(0xffffee, 0.2);
|
||||||
|
fillLight2.position.set(0, 3, 0);
|
||||||
|
|
||||||
|
extScene.add(fillLight2);
|
||||||
|
intScene.add(fillLight2.clone());
|
||||||
|
|
||||||
|
const directionalLight = new THREE.DirectionalLight(0xffffaa, 0.5);
|
||||||
|
directionalLight.position.set(0, 5, 5);
|
||||||
|
directionalLight.castShadow = true;
|
||||||
|
directionalLight.shadow.camera.near = 0.01;
|
||||||
|
directionalLight.shadow.camera.far = 500;
|
||||||
|
directionalLight.shadow.camera.right = 30;
|
||||||
|
directionalLight.shadow.camera.left = -30;
|
||||||
|
directionalLight.shadow.camera.top = 30;
|
||||||
|
directionalLight.shadow.camera.bottom = -30;
|
||||||
|
directionalLight.shadow.mapSize.width = 1024;
|
||||||
|
directionalLight.shadow.mapSize.height = 1024;
|
||||||
|
directionalLight.shadow.radius = 4;
|
||||||
|
directionalLight.shadow.bias = -0.00006;
|
||||||
|
|
||||||
|
extScene.add(directionalLight);
|
||||||
|
intScene.add(directionalLight.clone());
|
||||||
|
|
||||||
|
// RENDERER
|
||||||
|
|
||||||
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
renderer.shadowMap.enabled = true;
|
||||||
|
renderer.shadowMap.type = THREE.VSMShadowMap;
|
||||||
|
|
||||||
|
const container = document.getElementById("container");
|
||||||
|
|
||||||
|
container.appendChild(renderer.domElement);
|
||||||
|
|
||||||
|
const stats = new Stats();
|
||||||
|
stats.domElement.classList.add("stats");
|
||||||
|
|
||||||
|
container.appendChild(stats.domElement);
|
||||||
|
|
||||||
|
const GRAVITY = 30;
|
||||||
|
|
||||||
|
let worldOctree = null;
|
||||||
|
let intWorldOctree = new Octree();
|
||||||
|
let extWorldOctree = new Octree();
|
||||||
|
|
||||||
|
const playerCollider = new Capsule(
|
||||||
|
new THREE.Vector3(0, 0.35, 0),
|
||||||
|
new THREE.Vector3(0, 1.5, 0),
|
||||||
|
0.35
|
||||||
|
);
|
||||||
|
|
||||||
|
const playerVelocity = new THREE.Vector3();
|
||||||
|
const playerDirection = new THREE.Vector3();
|
||||||
|
|
||||||
|
let playerOnFloor = false;
|
||||||
|
|
||||||
|
// mobile controls
|
||||||
|
|
||||||
|
const buttonStates = {};
|
||||||
|
|
||||||
|
// document.getElementById("forward").addEventListener("touchstart", (event) => {
|
||||||
|
// buttonStates.forward = true;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// document.getElementById("forward").addEventListener("touchend", (event) => {
|
||||||
|
// buttonStates.forward = false;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// document.getElementById("back").addEventListener("touchstart", (event) => {
|
||||||
|
// buttonStates["back"] = true;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// document.getElementById("back").addEventListener("touchend", (event) => {
|
||||||
|
// buttonStates["back"] = false;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// keyboard controls
|
||||||
|
|
||||||
|
const keyStates = {};
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
keyStates[event.code] = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keyup", (event) => {
|
||||||
|
keyStates[event.code] = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isMobile) {
|
||||||
|
document.addEventListener("mousedown", () => {
|
||||||
|
document.body.requestPointerLock();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.body.addEventListener("mousemove", (event) => {
|
||||||
|
if (document.pointerLockElement === document.body) {
|
||||||
|
camera.rotation.y -= event.movementX / 500;
|
||||||
|
camera.rotation.x -= event.movementY / 500;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.addEventListener("resize", onWindowResize);
|
||||||
|
|
||||||
|
function onWindowResize() {
|
||||||
|
camera.aspect = window.innerWidth / window.innerHeight;
|
||||||
|
camera.updateProjectionMatrix();
|
||||||
|
|
||||||
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
|
}
|
||||||
|
|
||||||
|
function playerCollitions() {
|
||||||
|
let result = worldOctree.capsuleIntersect(playerCollider);
|
||||||
|
|
||||||
|
playerOnFloor = false;
|
||||||
|
|
||||||
|
if (result) {
|
||||||
|
playerOnFloor = result.normal.y > 0;
|
||||||
|
|
||||||
|
if (!playerOnFloor) {
|
||||||
|
playerVelocity.addScaledVector(result.normal, -result.normal.dot(playerVelocity));
|
||||||
|
}
|
||||||
|
|
||||||
|
playerCollider.translate(result.normal.multiplyScalar(result.depth));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePlayer(deltaTime) {
|
||||||
|
if (playerOnFloor) {
|
||||||
|
const damping = Math.exp(-3 * deltaTime) - 1;
|
||||||
|
playerVelocity.addScaledVector(playerVelocity, damping);
|
||||||
|
} else {
|
||||||
|
playerVelocity.y -= GRAVITY * deltaTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
const deltaPosition = playerVelocity.clone().multiplyScalar(deltaTime);
|
||||||
|
playerCollider.translate(deltaPosition);
|
||||||
|
|
||||||
|
playerCollitions();
|
||||||
|
camera.position.copy(playerCollider.end);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getForwardVector() {
|
||||||
|
camera.getWorldDirection(playerDirection);
|
||||||
|
playerDirection.y = 0;
|
||||||
|
playerDirection.normalize();
|
||||||
|
|
||||||
|
return playerDirection;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSideVector() {
|
||||||
|
camera.getWorldDirection(playerDirection);
|
||||||
|
playerDirection.y = 0;
|
||||||
|
playerDirection.normalize();
|
||||||
|
playerDirection.cross(camera.up);
|
||||||
|
|
||||||
|
return playerDirection;
|
||||||
|
}
|
||||||
|
|
||||||
|
function keyControls(deltaTime) {
|
||||||
|
const speed = 25;
|
||||||
|
|
||||||
|
if (playerOnFloor) {
|
||||||
|
if (keyStates["KeyW"]) {
|
||||||
|
playerVelocity.add(getForwardVector().multiplyScalar(speed * deltaTime));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keyStates["KeyS"]) {
|
||||||
|
playerVelocity.add(getForwardVector().multiplyScalar(-speed * deltaTime));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keyStates["KeyA"]) {
|
||||||
|
playerVelocity.add(getSideVector().multiplyScalar(-speed * deltaTime));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keyStates["KeyD"]) {
|
||||||
|
playerVelocity.add(getSideVector().multiplyScalar(speed * deltaTime));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (keyStates["Space"]) {
|
||||||
|
playerVelocity.y = 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mobileControls(deltaTime) {
|
||||||
|
const speed = 5;
|
||||||
|
|
||||||
|
if (playerOnFloor) {
|
||||||
|
if (buttonStates["forward"]) {
|
||||||
|
playerVelocity.add(getForwardVector().multiplyScalar(speed * deltaTime));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (buttonStates["back"]) {
|
||||||
|
playerVelocity.add(getForwardVector().multiplyScalar(-speed * deltaTime));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const dracoLoader = new DRACOLoader();
|
||||||
|
dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.4.1/");
|
||||||
|
|
||||||
|
const loader = new GLTFLoader().setPath("./assets/");
|
||||||
|
loader.setDRACOLoader(dracoLoader);
|
||||||
|
|
||||||
|
// SCENE 1
|
||||||
|
|
||||||
|
loader.load("model.glb", (gltf) => {
|
||||||
|
const model = gltf.scene;
|
||||||
|
extScene.add(model);
|
||||||
|
|
||||||
|
extWorldOctree.fromGraphNode(model);
|
||||||
|
worldOctree = extWorldOctree;
|
||||||
|
|
||||||
|
model.traverse((child) => {
|
||||||
|
if (child.isMesh) {
|
||||||
|
child.castShadow = true;
|
||||||
|
child.receiveShadow = true;
|
||||||
|
|
||||||
|
if (child.material.map) {
|
||||||
|
child.material.map.anisotropy = 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (child.name === "Door") {
|
||||||
|
child.geometry.computeBoundingBox();
|
||||||
|
extDoor.copy(child.geometry.boundingBox).applyMatrix4(child.matrixWorld);
|
||||||
|
extDoorMesh = child;
|
||||||
|
door = extDoor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
mixer = new THREE.AnimationMixer(model);
|
||||||
|
gltf.animations.forEach((clip) => {
|
||||||
|
mixer.clipAction(clip).play();
|
||||||
|
});
|
||||||
|
|
||||||
|
animate();
|
||||||
|
});
|
||||||
|
|
||||||
|
// SCENE 2
|
||||||
|
|
||||||
|
// loader.load("modelCompress2.glb", (gltf) => {
|
||||||
|
// const model = gltf.scene;
|
||||||
|
|
||||||
|
// intScene.add(model);
|
||||||
|
|
||||||
|
// intWorldOctree.fromGraphNode(model);
|
||||||
|
|
||||||
|
// model.traverse((child) => {
|
||||||
|
// if (child.isMesh) {
|
||||||
|
// child.castShadow = true;
|
||||||
|
// child.receiveShadow = true;
|
||||||
|
|
||||||
|
// if (child.material.map) {
|
||||||
|
// child.material.map.anisotropy = 8;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (child.name === "Door") {
|
||||||
|
// child.geometry.computeBoundingBox();
|
||||||
|
// intDoor.copy(child.geometry.boundingBox).applyMatrix4(child.matrixWorld);
|
||||||
|
// intDoorMesh = child;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// intSceneisLoaded = true;
|
||||||
|
// });
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
const deltaTime = Math.min(0.1, clock.getDelta());
|
||||||
|
|
||||||
|
mixer.update(deltaTime);
|
||||||
|
|
||||||
|
if (isMobile) {
|
||||||
|
controls.update();
|
||||||
|
mobileControls(deltaTime);
|
||||||
|
} else keyControls(deltaTime);
|
||||||
|
|
||||||
|
let doorDistance = door.distanceToPoint(camera.position);
|
||||||
|
|
||||||
|
if (doorDistance < 1.5) {
|
||||||
|
testDoor();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDoorActive == false && doorDistance > 2) {
|
||||||
|
isDoorActive = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
updatePlayer(deltaTime);
|
||||||
|
|
||||||
|
renderer.render(scene, camera);
|
||||||
|
|
||||||
|
stats.update();
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
let door = null;
|
||||||
|
let isDoorActive = true;
|
||||||
|
let isInside = false;
|
||||||
|
let intDoor = new THREE.Box3();
|
||||||
|
let extDoor = new THREE.Box3();
|
||||||
|
let intDoorMesh = null;
|
||||||
|
let extDoorMesh = null;
|
||||||
|
|
||||||
|
function testDoor() {
|
||||||
|
if (intSceneisLoaded && isDoorActive) {
|
||||||
|
playerVelocity.y = 5;
|
||||||
|
scene = isInside ? extScene : intScene;
|
||||||
|
door = isInside ? extDoor : intDoor;
|
||||||
|
worldOctree = isInside ? extWorldOctree : intWorldOctree;
|
||||||
|
|
||||||
|
playerCollider.translate(
|
||||||
|
isInside
|
||||||
|
? new THREE.Vector3(0, 0, 0).copy(intDoorMesh.position).negate()
|
||||||
|
: new THREE.Vector3(0, 0, 0).copy(extDoorMesh.position).negate()
|
||||||
|
);
|
||||||
|
playerCollider.translate(isInside ? extDoorMesh.position : intDoorMesh.position);
|
||||||
|
camera.position.copy(playerCollider.end);
|
||||||
|
|
||||||
|
isInside = !isInside;
|
||||||
|
isDoorActive = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
1
|
||||||
|
00:00:00,000 --> 00:00:05,529
|
||||||
|
The average prehistoric person could make a nice living
|
||||||
|
in about a fifteen-hour work week.
|
||||||
|
|
||||||
|
2
|
||||||
|
00:00:05,800 --> 00:00:10,920
|
||||||
|
Fifteen hours a week for subsistence leaves
|
||||||
|
a lot of time for other things
|
||||||
|
|
||||||
|
3
|
||||||
|
00:00:11,514 --> 00:00:14,200
|
||||||
|
So much time
|
||||||
|
|
||||||
|
4
|
||||||
|
00:00:15,057 --> 00:00:19,100
|
||||||
|
that maybe the restless ones
|
||||||
|
|
||||||
|
5
|
||||||
|
00:00:20,171 --> 00:00:27,221
|
||||||
|
to enliven their life, or skill in making
|
||||||
|
or cooking or singing
|
||||||
|
|
||||||
|
6
|
||||||
|
00:00:27,971 --> 00:00:33,057
|
||||||
|
or very interesting thoughts to think
|
||||||
|
|
||||||
|
7
|
||||||
|
00:00:33,629 --> 00:00:37,614
|
||||||
|
decided to slope off and hunt mammoths
|
||||||
|
|
||||||
|
8
|
||||||
|
00:00:38,157 --> 00:00:40,443
|
||||||
|
The skillful hunters then
|
||||||
|
|
||||||
|
9
|
||||||
|
00:00:40,929 --> 00:00:44,871
|
||||||
|
would come staggering back with a load of meat
|
||||||
|
|
||||||
|
10
|
||||||
|
00:00:45,186 --> 00:00:47,329
|
||||||
|
a lot of ivory
|
||||||
|
|
||||||
|
11
|
||||||
|
00:00:47,529 --> 00:00:49,514
|
||||||
|
and a story
|
||||||
|
|
||||||
|
12
|
||||||
|
00:00:49,636 --> 00:00:51,914
|
||||||
|
It wasn't the meat that made the difference.
|
||||||
|
|
||||||
|
13
|
||||||
|
00:00:52,300 --> 00:00:53,760
|
||||||
|
It was the story
|
||||||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,25 @@
|
|||||||
|
import {BoxGeometry, MeshBasicMaterial, Mesh} from "https://unpkg.com/three@0.150.1/build/three.module.js";
|
||||||
|
import context from './3d.js'
|
||||||
|
|
||||||
|
|
||||||
|
// Mapping
|
||||||
|
export default {
|
||||||
|
1: () => addCube(),
|
||||||
|
2: () => addCube(),
|
||||||
|
3: () => addCube()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Functions
|
||||||
|
|
||||||
|
|
||||||
|
const addCube = () => {
|
||||||
|
const geometry = new BoxGeometry(1,1,1);
|
||||||
|
const material = new MeshBasicMaterial({color: 0xff0000})
|
||||||
|
const cube = new Mesh(geometry,material)
|
||||||
|
cube.position.x = Math.random() * 10 - 5;
|
||||||
|
cube.position.y = Math.random() * 10 - 5;
|
||||||
|
cube.position.z = Math.random() * 10 - 5;
|
||||||
|
context.scene.add(cube)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Subtitles player</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
|
||||||
|
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"three": "https://unpkg.com/three@0.150.1/build/three.module.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="module" defer src="3d.js"></script>
|
||||||
|
<script type="module" defer src="index.js" ></script>
|
||||||
|
<script type="module" defer src="functions.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container">
|
||||||
|
<div id="sub">Hello</div>
|
||||||
|
</div>
|
||||||
|
<audio src="assets/polypupatic.mp3" id="player" controls ></audio>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
// 1. Import dependencies, select DOM elements, define global var
|
||||||
|
import srtParser2 from 'https://cdn.skypack.dev/srt-parser-2';
|
||||||
|
|
||||||
|
// 4. Interactive functions to attach to the subtitle id
|
||||||
|
// see functions.js for more info
|
||||||
|
import functions from './functions.js'
|
||||||
|
|
||||||
|
|
||||||
|
const player = document.querySelector('#player')
|
||||||
|
const sub = document.querySelector('#sub')
|
||||||
|
|
||||||
|
|
||||||
|
const printText = (text) => {
|
||||||
|
sub.innerHTML = text
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Parse .srt file and setup audio player callback
|
||||||
|
const readSRT = (srt) => {
|
||||||
|
let parser = new srtParser2();
|
||||||
|
let srt_array = parser.fromSrt(srt)
|
||||||
|
console.log(srt_array)
|
||||||
|
|
||||||
|
let currentId = 0
|
||||||
|
|
||||||
|
player.addEventListener('timeupdate', (e)=>{
|
||||||
|
let current = srt_array.find(
|
||||||
|
caption =>
|
||||||
|
caption.startSeconds <= e.target.currentTime &&
|
||||||
|
caption.endSeconds >= e.target.currentTime
|
||||||
|
)
|
||||||
|
if (current != undefined && currentId != parseInt(current.id)){
|
||||||
|
currentId = parseInt(current.id)
|
||||||
|
printText(current.text)
|
||||||
|
// Check if the srtFunctions object has some callback for the current index
|
||||||
|
if(Object.hasOwn( functions, current.id))
|
||||||
|
functions[current.id]()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. Open .srt file and trigger readSRT() function
|
||||||
|
fetch('assets/mammoth.srt').then(res=>res.text()).then(data=>readSRT(data))
|
||||||
|
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"name": "3dsub",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "3d env with interactive sub",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"eslint": "^8.35.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
max-width: 100vw;
|
||||||
|
max-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sub {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 25%;
|
||||||
|
left: 50%;
|
||||||
|
translate: -50% 0;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 0px 0px 4px black;
|
||||||
|
max-width: 60ch;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue