removed unused files
This commit is contained in:
parent
f0c20fc2b6
commit
7076008ea4
28 changed files with 0 additions and 933 deletions
|
|
@ -1,50 +0,0 @@
|
|||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-color: white;
|
||||
--background-color: black;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clicker {
|
||||
border-radius: 50%;
|
||||
background-color: var(--main-color);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.winner.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#timer {
|
||||
color: var(--main-color);
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.gameArea {
|
||||
border: 0;
|
||||
margin: auto auto auto auto;
|
||||
}
|
||||
|
||||
.primer {
|
||||
border: 0;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
margin: auto auto auto auto;
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Click!</title>
|
||||
<link rel="stylesheet" href="/games/click/index.css" />
|
||||
<script src="/games/click/index.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<p id="timer"></p>
|
||||
<div id="primer" class="primer"></div>
|
||||
<div class="gameArea"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
// todo: add cross-hair
|
||||
// todo: continuous reaction speed reading
|
||||
// todo: better font
|
||||
// todo: average reaction speed
|
||||
// todo: reaction speed graph
|
||||
// todo: put mouse over to restart
|
||||
// todo: click order
|
||||
// todo: sound effect
|
||||
// todo: X if miss
|
||||
// todo: settings
|
||||
// todo: remaining clickers
|
||||
|
||||
const gameArea = document.getElementsByClassName("gameArea")[0]
|
||||
const primer = document.getElementById("primer")
|
||||
const timerText = document.getElementById("timer")
|
||||
|
||||
let clickerSize = 1.3
|
||||
let initClickerCount = 10
|
||||
let clickerCount = initClickerCount
|
||||
let timer, startTime, clickable
|
||||
|
||||
primer.addEventListener("mousedown", () => {prime()})
|
||||
document.addEventListener("keydown", (event) => {
|
||||
if ("zq".includes(event.key.toLowerCase())) {
|
||||
removeClicker()
|
||||
}
|
||||
|
||||
if (event.key.toLowerCase() === "a") {
|
||||
// todo: pause
|
||||
}
|
||||
else if (event.key.toLowerCase() === "q") {
|
||||
// todo: end measurement
|
||||
}
|
||||
})
|
||||
|
||||
function prime() {
|
||||
primer.style.display = "none"
|
||||
clearInterval(timer)
|
||||
clearClicker()
|
||||
initializeTimer()
|
||||
addClicker()
|
||||
}
|
||||
|
||||
function addClicker() {
|
||||
let newClicker = document.createElement("div")
|
||||
newClicker.addEventListener("mousedown", removeClicker, {once: true})
|
||||
newClicker.addEventListener("mouseenter", () => {clickable = newClicker})
|
||||
newClicker.addEventListener("mouseleave", clearClickable)
|
||||
|
||||
newClicker.classList.add("clicker")
|
||||
|
||||
newClicker.style.width = `${clickerSize}in`
|
||||
newClicker.style.height = `${clickerSize}in`
|
||||
|
||||
let x = Math.random() * 100, y = Math.random() * 100
|
||||
// todo: always make clicker appear in the screen
|
||||
newClicker.style.top = `${x}%`
|
||||
newClicker.style.left = `${y}%`
|
||||
|
||||
gameArea.appendChild(newClicker)
|
||||
}
|
||||
|
||||
function removeClicker() {
|
||||
if (clickable === undefined) return
|
||||
clickerCount -= 1
|
||||
|
||||
if (clickerCount > 0) {
|
||||
addClicker()
|
||||
}
|
||||
else if (clickerCount === 0) {
|
||||
primer.style.display = "block"
|
||||
clearInterval(timer)
|
||||
clearClicker()
|
||||
clickerCount = initClickerCount
|
||||
clearClickable()
|
||||
return
|
||||
}
|
||||
clickable.remove()
|
||||
clearClickable()
|
||||
}
|
||||
|
||||
function clearClicker() {
|
||||
gameArea.textContent = "";
|
||||
clearClickable()
|
||||
}
|
||||
|
||||
function clearClickable() {
|
||||
clickable = undefined
|
||||
}
|
||||
|
||||
function initializeTimer() {
|
||||
startTime = Date.now()
|
||||
timer = setInterval(() => {
|
||||
timerText.innerHTML = ((Date.now() - startTime) / 1000).toFixed(2)
|
||||
}, 10)
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"companyName": "AnonymousPomp",
|
||||
"productName": "PONG",
|
||||
"dataUrl": "7.data.unityweb",
|
||||
"wasmCodeUrl": "7.wasm.code.unityweb",
|
||||
"wasmFrameworkUrl": "7.wasm.framework.unityweb",
|
||||
"TOTAL_MEMORY": 268435456,
|
||||
"graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
|
||||
"webglContextAttributes": {"preserveDrawingBuffer": false},
|
||||
"splashScreenStyle": "Dark",
|
||||
"backgroundColor": "#231F20",
|
||||
"cacheControl": {"default": "must-revalidate"}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
|
@ -1,24 +0,0 @@
|
|||
function UnityProgress(gameInstance, progress) {
|
||||
if (!gameInstance.Module)
|
||||
return;
|
||||
if (!gameInstance.logo) {
|
||||
gameInstance.logo = document.createElement("div");
|
||||
gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
|
||||
gameInstance.container.appendChild(gameInstance.logo);
|
||||
}
|
||||
if (!gameInstance.progress) {
|
||||
gameInstance.progress = document.createElement("div");
|
||||
gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
|
||||
gameInstance.progress.empty = document.createElement("div");
|
||||
gameInstance.progress.empty.className = "empty";
|
||||
gameInstance.progress.appendChild(gameInstance.progress.empty);
|
||||
gameInstance.progress.full = document.createElement("div");
|
||||
gameInstance.progress.full.className = "full";
|
||||
gameInstance.progress.appendChild(gameInstance.progress.full);
|
||||
gameInstance.container.appendChild(gameInstance.progress);
|
||||
}
|
||||
gameInstance.progress.full.style.width = (100 * progress) + "%";
|
||||
gameInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
|
||||
if (progress == 1)
|
||||
gameInstance.logo.style.display = gameInstance.progress.style.display = "none";
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 345 B |
Binary file not shown.
|
Before Width: | Height: | Size: 155 B |
Binary file not shown.
|
Before Width: | Height: | Size: 159 B |
Binary file not shown.
|
Before Width: | Height: | Size: 137 B |
Binary file not shown.
|
Before Width: | Height: | Size: 142 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
|
|
@ -1,18 +0,0 @@
|
|||
.webgl-content * {border: 0; margin: 0; padding: 0}
|
||||
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
|
||||
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
|
||||
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
|
||||
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
|
||||
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
|
||||
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
|
||||
|
||||
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
|
||||
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
|
||||
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
|
||||
|
||||
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
|
||||
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
|
||||
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
|
||||
.webgl-content .footer .title {margin-right: 10px; float: right;}
|
||||
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
|
|
@ -1,24 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>PONG</title>
|
||||
<link rel="shortcut icon" href="/games/pong/TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="/games/pong/TemplateData/style.css">
|
||||
<script src="/games/pong/TemplateData/UnityProgress.js"></script>
|
||||
<script src="/games/pong/Build/UnityLoader.js"></script>
|
||||
<script>
|
||||
var gameInstance = UnityLoader.instantiate("gameContainer", "/games/pong/Build/7.json", {onProgress: UnityProgress});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="webgl-content">
|
||||
<div id="gameContainer" style="width: 960px; height: 600px"></div>
|
||||
<div class="footer">
|
||||
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
|
||||
<div class="title">PONG v7</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,176 +0,0 @@
|
|||
/*---[ MAIN ]---*/
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--cell-size: 100px;
|
||||
--mark-size: calc(var(--cell-size) * .9);
|
||||
--background-color: black;
|
||||
--main-color: white;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/*---[ Winner message ]---*/
|
||||
.winner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--main-color);
|
||||
font-size: 5rem;
|
||||
font-family: Arial, sans-serif;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.winner button {
|
||||
font-size: 3rem;
|
||||
background-color: var(--background-color);
|
||||
color: var(--main-color);
|
||||
border: 1px solid var(--main-color);
|
||||
padding: .25em .5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.winner button:hover {
|
||||
background-color: var(--main-color);
|
||||
color: var(--background-color);
|
||||
border-color: var(--background-color);
|
||||
}
|
||||
|
||||
.winner.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/*---[ Board styling ]---*/
|
||||
.board {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
}
|
||||
|
||||
/*---[ Cell styling ]---*/
|
||||
.cell {
|
||||
width: var(--cell-size);
|
||||
height: var(--cell-size);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
background-color: var(--background-color);
|
||||
border: 2px solid var(--main-color);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cell.x,
|
||||
.cell.o {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*---[ Remove edge border for edge cells ]---*/
|
||||
.cell:nth-child(1),
|
||||
.cell:nth-child(2),
|
||||
.cell:nth-child(3) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.cell:nth-child(1),
|
||||
.cell:nth-child(4),
|
||||
.cell:nth-child(7) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.cell:nth-child(3),
|
||||
.cell:nth-child(6),
|
||||
.cell:nth-child(9) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.cell:nth-child(7),
|
||||
.cell:nth-child(8),
|
||||
.cell:nth-child(9) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/*---[ X ]---*/
|
||||
.cell.x::before,
|
||||
.cell.x::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(var(--mark-size) * .1);
|
||||
height: var(--mark-size);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.board.x .cell:not(.x):not(.o):hover::before,
|
||||
.board.x .cell:not(.x):not(.o):hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(var(--mark-size) * .1);
|
||||
height: var(--mark-size);
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
.cell.x::before,
|
||||
.board.x .cell:hover::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.cell.x::after,
|
||||
.board.x .cell:hover::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/*---[ O ]---*/
|
||||
.cell.o::before,
|
||||
.cell.o::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: var(--mark-size);
|
||||
height: var(--mark-size);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.board.o .cell:not(.x):not(.o):hover::before,
|
||||
.board.o .cell:not(.x):not(.o):hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: var(--mark-size);
|
||||
height: var(--mark-size);
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
.cell.o::before {
|
||||
height: calc(var(--mark-size) * .9);
|
||||
width: calc(var(--mark-size) * .9);
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
.board.o .cell:not(.x):not(.o):hover::before {
|
||||
height: calc(var(--mark-size) * .9);
|
||||
width: calc(var(--mark-size) * .9);
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
.cell.o::after,
|
||||
.board.o .cell:not(.x):not(.o):hover::after{
|
||||
height: calc(var(--mark-size) * .69);
|
||||
width: calc(var(--mark-size) *.69);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TicTac Toe</title>
|
||||
<link rel="icon" href="/icon/icon_circle.svg" />
|
||||
<link rel="stylesheet" href="/games/tictactoe/index.css" />
|
||||
<script src="/games/tictactoe/index.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="board x" id="board">
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
<div class="cell" data-cell></div>
|
||||
</div>
|
||||
|
||||
<div class="winner" id="winner">
|
||||
<div data-message></div>
|
||||
<button id="restart">Restart</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
const X_CLASS = "x"
|
||||
const O_CLASS = "o"
|
||||
|
||||
const WINNING_PATTERN = [
|
||||
[0, 1, 2],
|
||||
[3, 4, 5],
|
||||
[6, 7, 8],
|
||||
[0, 3, 6],
|
||||
[1, 4, 7],
|
||||
[2, 5, 8],
|
||||
[0, 4, 8],
|
||||
[2, 4, 6]
|
||||
]
|
||||
|
||||
const cellElements = document.querySelectorAll("[data-cell]")
|
||||
const board = document.getElementById("board")
|
||||
const winnerMessage = document.querySelector("[data-message]")
|
||||
const winner = document.getElementById("winner")
|
||||
const restartButton = document.getElementById("restart")
|
||||
|
||||
let oTurn = false;
|
||||
|
||||
restartButton.addEventListener("click", gameStart)
|
||||
|
||||
function gameStart() {
|
||||
function clickHandler(event) {
|
||||
console.log(full())
|
||||
const currentClass = oTurn ? O_CLASS : X_CLASS
|
||||
event.target.classList.add(currentClass) // add O or X to the grid
|
||||
|
||||
if (checkWin(currentClass)) {
|
||||
gameOver(false)
|
||||
} else if (full()) {
|
||||
gameOver(true)
|
||||
}
|
||||
oTurn = !oTurn // change tern
|
||||
updateHover()
|
||||
}
|
||||
|
||||
winner.classList.remove("show")
|
||||
cellElements.forEach(cell => {
|
||||
cell.classList.remove("o")
|
||||
cell.classList.remove("x")
|
||||
})
|
||||
|
||||
cellElements.forEach(cell => {
|
||||
cell.addEventListener("click", clickHandler, {once: true})
|
||||
})
|
||||
|
||||
updateHover()
|
||||
}
|
||||
|
||||
function gameOver(draw) {
|
||||
if (draw) {
|
||||
// show draw message
|
||||
}
|
||||
else {
|
||||
winnerMessage.innerText = `${oTurn ? "O" : "X"} won!!`
|
||||
}
|
||||
winner.classList.add("show")
|
||||
}
|
||||
|
||||
function updateHover() {
|
||||
board.classList.remove(X_CLASS)
|
||||
board.classList.remove(O_CLASS)
|
||||
|
||||
if (oTurn) {
|
||||
board.classList.add(O_CLASS)
|
||||
}
|
||||
else {
|
||||
board.classList.add(X_CLASS)
|
||||
}
|
||||
}
|
||||
|
||||
function checkWin(currentClass) {
|
||||
return WINNING_PATTERN.some(combination => {
|
||||
return combination.every(index => {
|
||||
return cellElements[index].classList.contains(currentClass)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function full() {
|
||||
//todo: add when the game is a draw
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
gameStart()
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,166 +0,0 @@
|
|||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
* @author Mugen87 / https://github.com/Mugen87
|
||||
*/
|
||||
|
||||
// https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/jsm/controls/PointerLockControls.js
|
||||
|
||||
import {
|
||||
Euler,
|
||||
EventDispatcher,
|
||||
Vector3
|
||||
} from "./three.js";
|
||||
|
||||
var PointerLockControls = function ( camera, domElement ) {
|
||||
|
||||
if ( domElement === undefined ) {
|
||||
|
||||
console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
|
||||
domElement = document.body;
|
||||
|
||||
}
|
||||
|
||||
this.domElement = domElement;
|
||||
this.isLocked = false;
|
||||
|
||||
//
|
||||
// internals
|
||||
//
|
||||
|
||||
var scope = this;
|
||||
|
||||
var changeEvent = { type: 'change' };
|
||||
var lockEvent = { type: 'lock' };
|
||||
var unlockEvent = { type: 'unlock' };
|
||||
|
||||
var euler = new Euler( 0, 0, 0, 'YXZ' );
|
||||
|
||||
var PI_2 = Math.PI / 2;
|
||||
|
||||
var vec = new Vector3();
|
||||
|
||||
function onMouseMove( event ) {
|
||||
|
||||
if ( scope.isLocked === false ) return;
|
||||
|
||||
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
|
||||
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
|
||||
|
||||
euler.setFromQuaternion( camera.quaternion );
|
||||
|
||||
euler.y -= movementX * 0.002;
|
||||
euler.x -= movementY * 0.002;
|
||||
|
||||
euler.x = Math.max( - PI_2, Math.min( PI_2, euler.x ) );
|
||||
|
||||
camera.quaternion.setFromEuler( euler );
|
||||
|
||||
scope.dispatchEvent( changeEvent );
|
||||
|
||||
}
|
||||
|
||||
function onPointerlockChange() {
|
||||
|
||||
if ( document.pointerLockElement === scope.domElement ) {
|
||||
|
||||
scope.dispatchEvent( lockEvent );
|
||||
|
||||
scope.isLocked = true;
|
||||
|
||||
} else {
|
||||
|
||||
scope.dispatchEvent( unlockEvent );
|
||||
|
||||
scope.isLocked = false;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onPointerlockError() {
|
||||
|
||||
console.error( 'THREE.PointerLockControls: Unable to use Pointer Lock API' );
|
||||
|
||||
}
|
||||
|
||||
this.connect = function () {
|
||||
|
||||
document.addEventListener( 'mousemove', onMouseMove, false );
|
||||
document.addEventListener( 'pointerlockchange', onPointerlockChange, false );
|
||||
document.addEventListener( 'pointerlockerror', onPointerlockError, false );
|
||||
|
||||
};
|
||||
|
||||
this.disconnect = function () {
|
||||
|
||||
document.removeEventListener( 'mousemove', onMouseMove, false );
|
||||
document.removeEventListener( 'pointerlockchange', onPointerlockChange, false );
|
||||
document.removeEventListener( 'pointerlockerror', onPointerlockError, false );
|
||||
|
||||
};
|
||||
|
||||
this.dispose = function () {
|
||||
|
||||
this.disconnect();
|
||||
|
||||
};
|
||||
|
||||
this.getObject = function () { // retaining this method for backward compatibility
|
||||
|
||||
return camera;
|
||||
|
||||
};
|
||||
|
||||
this.getDirection = function () {
|
||||
|
||||
var direction = new Vector3( 0, 0, - 1 );
|
||||
|
||||
return function ( v ) {
|
||||
|
||||
return v.copy( direction ).applyQuaternion( camera.quaternion );
|
||||
|
||||
};
|
||||
|
||||
}();
|
||||
|
||||
this.moveForward = function ( distance ) {
|
||||
|
||||
// move forward parallel to the xz-plane
|
||||
// assumes camera.up is y-up
|
||||
|
||||
vec.setFromMatrixColumn( camera.matrix, 0 );
|
||||
|
||||
vec.crossVectors( camera.up, vec );
|
||||
|
||||
camera.position.addScaledVector( vec, distance );
|
||||
|
||||
};
|
||||
|
||||
this.moveRight = function ( distance ) {
|
||||
|
||||
vec.setFromMatrixColumn( camera.matrix, 0 );
|
||||
|
||||
camera.position.addScaledVector( vec, distance );
|
||||
|
||||
};
|
||||
|
||||
this.lock = function () {
|
||||
|
||||
this.domElement.requestPointerLock();
|
||||
|
||||
};
|
||||
|
||||
this.unlock = function () {
|
||||
|
||||
document.exitPointerLock();
|
||||
|
||||
};
|
||||
|
||||
this.connect();
|
||||
|
||||
};
|
||||
|
||||
PointerLockControls.prototype = Object.create( EventDispatcher.prototype );
|
||||
PointerLockControls.prototype.constructor = PointerLockControls;
|
||||
|
||||
export { PointerLockControls };
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
background-color: #282828;
|
||||
color: #fff;
|
||||
font-family: Monospace, sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
scroll-behavior: none;
|
||||
}
|
||||
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ff0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#info {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.dg.ac {
|
||||
user-select: none;
|
||||
z-index: 2 !important;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 1;
|
||||
background-color: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#overlay > div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#overlay > div > button {
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
outline: 1px solid #ffffff;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#overlay > div > p {
|
||||
color: #777777;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>3D</title>
|
||||
<link rel="icon" href="/icon/icon_circle.svg" />
|
||||
<link rel="stylesheet" href="/projects/3d/index.css" />
|
||||
<script src="/projects/3d/index.js" defer></script>
|
||||
<script src="/js/three.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="3dView"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
// https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js
|
||||
// https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js
|
||||
|
||||
let scene, camera, container, GL_Renderer
|
||||
let materials = {}, lights = {}, objects = {}
|
||||
|
||||
let FOV = 75
|
||||
|
||||
/*---[ HELPERS ]---*/
|
||||
function moveObject(object, x, y, z) {
|
||||
object.position.x += x
|
||||
object.position.y += y
|
||||
object.position.z += z
|
||||
}
|
||||
|
||||
function rotateObject(object, x, y, z) {
|
||||
object.rotateX(x)
|
||||
object.rotateY(y)
|
||||
object.rotateZ(z)
|
||||
}
|
||||
|
||||
function setScale(object, scale) {
|
||||
object.scale.x = object.scale.y = object.scale.z = scale
|
||||
}
|
||||
|
||||
/*---[ EVENTS ]---*/
|
||||
function onWindowResize() {
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
GL_Renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
}
|
||||
|
||||
function Start() {
|
||||
window.addEventListener("resize", onWindowResize, false)
|
||||
container = document.getElementById("3dView")
|
||||
|
||||
// Scene
|
||||
{
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color(0x000000)
|
||||
scene.fog = new THREE.Fog(0xffffff, 0, 750)
|
||||
}
|
||||
|
||||
// Camera
|
||||
{
|
||||
camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 10000)
|
||||
moveObject(camera, 0, 0, 500)
|
||||
scene.add(camera)
|
||||
}
|
||||
|
||||
// Lights
|
||||
{
|
||||
lights.ambientLight = new THREE.AmbientLight(0x404040, 0.3)
|
||||
moveObject(lights.ambientLight, 10, 10, 10)
|
||||
scene.add(lights.ambientLight)
|
||||
|
||||
lights.one = new THREE.DirectionalLight(0x00ffff, 0.3)
|
||||
lights.one.position = camera.position
|
||||
scene.add(lights.one)
|
||||
|
||||
lights.mainLight = new THREE.DirectionalLight(0xaabbff, 0.7)
|
||||
moveObject(lights.mainLight, 0, 10, 20)
|
||||
scene.add(lights.mainLight)
|
||||
}
|
||||
|
||||
// Material
|
||||
{
|
||||
materials.main = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff,
|
||||
shading: THREE.FlatShading
|
||||
})
|
||||
materials.wire = new THREE.MeshPhongMaterial({
|
||||
color: 0xffffff,
|
||||
side: THREE.DoubleSide,
|
||||
wireframe: true
|
||||
})
|
||||
}
|
||||
|
||||
// Objects
|
||||
{
|
||||
objects.rotatingGeo = {}
|
||||
objects.rotatingGeo.main = new THREE.Mesh(new THREE.IcosahedronGeometry(8, 1), materials.main)
|
||||
setScale(objects.rotatingGeo.main, 15)
|
||||
scene.add(objects.rotatingGeo.main)
|
||||
|
||||
let outerGeo = new THREE.IcosahedronBufferGeometry(15, 1)
|
||||
objects.rotatingGeo.outer = new THREE.Mesh(outerGeo, materials.wire)
|
||||
setScale(objects.rotatingGeo.outer, 10)
|
||||
scene.add(objects.rotatingGeo.outer)
|
||||
|
||||
let vertices = outerGeo.attributes.position.array;
|
||||
for (let k=0; k<vertices.length; k+=3) {
|
||||
let vertexSphere = new THREE.Mesh(new THREE.SphereGeometry(0.3, 5, 5), materials.main);
|
||||
vertexSphere.applyMatrix(new THREE.Matrix4().makeTranslation(vertices[k],vertices[k+1],vertices[k+2]));
|
||||
objects.rotatingGeo.outer.add(vertexSphere);
|
||||
}
|
||||
}
|
||||
|
||||
// Renderer
|
||||
{
|
||||
GL_Renderer = new THREE.WebGLRenderer({antialias: true, alpha: true })
|
||||
GL_Renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1)
|
||||
GL_Renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
GL_Renderer.autoClear = false
|
||||
GL_Renderer.setClearColor(0x000000, 0.0)
|
||||
container.appendChild(GL_Renderer.domElement)
|
||||
}
|
||||
}
|
||||
|
||||
function Update() {
|
||||
requestAnimationFrame(Update)
|
||||
|
||||
rotateObject(objects.rotatingGeo.main, 0.002, 0.003, 0)
|
||||
rotateObject(objects.rotatingGeo.outer, 0.001, 0.003, 0)
|
||||
|
||||
GL_Renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
Start()
|
||||
Update()
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue