adrien/teTra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

orbit controls

Browse Source
This commit is contained in:
Adrien MALINGREY
2023-06-07 03:09:36 +02:00
parent 4d58c114e8
commit f9bfedf2fd
2 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app.js
View File

@ -1,10 +1,13 @@
P = (x, y, z) => new THREE.Vector3(x, y, z)
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let P = (x, y, z) => new THREE.Vector3(x, y, z)
Array.prototype.pick = function() { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
HTMLElement.prototype.addNewChild = function(tag, properties) {
let child = document.createElement(tag)
for (key in properties) {
for (let key in properties) {
child[key] = properties[key]
}
this.appendChild(child)
@ -227,7 +230,6 @@ class Tetromino extends THREE.Group {
this.rotatedLast = false
this.rotationPoint4Used = false
this.holdEnabled = true
let material = this.material
for (let i=0; i<4; i++) {
this.add(new Mino())
}
@ -315,9 +317,9 @@ Tetromino.prototype.srs = [
{ [ROTATION.CW]: [P(0, 0, 0), P( 1, 0, 0), P( 1, 1, 0), P(0, -2, 0), P( 1, -2, 0)], [ROTATION.CCW]: [P(0, 0, 0), P(-1, 0, 0), P(-1, 1, 0), P(0, -2, 0), P(-1, -2, 0)] },
{ [ROTATION.CW]: [P(0, 0, 0), P(-1, 0, 0), P(-1, -1, 0), P(0, 2, 0), P(-1, 2, 0)], [ROTATION.CCW]: [P(0, 0, 0), P(-1, 0, 0), P(-1, -1, 0), P(0, 2, 0), P(-1, 2, 0)] },
]
minoRenderTarget = new THREE.WebGLCubeRenderTarget(256)
const minoRenderTarget = new THREE.WebGLCubeRenderTarget(256)
minoRenderTarget.texture.type = THREE.HalfFloatType
minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
const minoCamera = new THREE.CubeCamera(1, 1000, minoRenderTarget)
minoCamera.position.set(5, 10, 0)
Tetromino.prototype.lockedMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff,
@ -785,8 +787,17 @@ renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 400)
camera.position.set(5, 7, 16)
camera.lookAt(5, 9, 0)
camera.position.set(5, 1, 16)
const controls = new OrbitControls( camera, renderer.domElement );
controls.autoRotate;
controls.enableDamping;
controls.maxDistance = 21;
controls.keys = {};
controls.minPolarAngle = 0.9;
controls.maxPolarAngle = 2.14;
controls.target = P(5, 9, 0);
controls.update();
const commonCylinderGeometry = new THREE.CylinderGeometry(25, 25, 400, 20, 1, true)
@ -850,11 +861,9 @@ const edgeExtrudeSettings = {
bevelEnabled: false,
}
const edge = new THREE.Mesh(
//new THREE.PlaneGeometry(10, SKYLINE),
new THREE.ExtrudeGeometry(edgeShape, edgeExtrudeSettings),
edgeMaterial
)
//edge.position.set(5, 10, 0)
scene.add(edge)
const holdQueue = new THREE.Group()
@ -889,6 +898,8 @@ function animate() {
colorFullCylinderTexture.offset.y -= COLORFULL_MOVE_FORWARD
colorFullCylinderTexture.offset.x -= COLORFULL_TEXTURE_ROTATION
controls.update();
renderer.render(scene, camera)
minoCamera.update(renderer, scene)
@ -1033,7 +1044,7 @@ let playerActions = {
scheduler.clearInterval(fall)
scheduler.clearTimeout(lockDown)
heldpiece = holdQueue.piece
let heldpiece = holdQueue.piece
holdQueue.piece = piece
holdQueue.piece.holdEnabled = false
holdQueue.piece.locked = false
@ -1053,15 +1064,15 @@ const REPEATABLE_ACTIONS = [
playerActions.moveRight,
playerActions.softDrop
]
pressedKeys = new Set()
actionsQueue = []
let pressedKeys = new Set()
let actionsQueue = []
function onkeydown(event) {
if (event.key in settings.keyBind) {
event.preventDefault()
if (!pressedKeys.has(event.key)) {
pressedKeys.add(event.key)
action = settings.keyBind[event.key]
let action = settings.keyBind[event.key]
action()
if (REPEATABLE_ACTIONS.includes(action)) {
actionsQueue.unshift(action)
@ -1093,7 +1104,7 @@ function onkeyup(event) {
if (event.key in settings.keyBind) {
event.preventDefault()
pressedKeys.delete(event.key)
action = settings.keyBind[event.key]
let action = settings.keyBind[event.key]
if (actionsQueue.includes(action)) {
actionsQueue.splice(actionsQueue.indexOf(action), 1)
if (!actionsQueue.length) {

13
index.html
View File

@ -9,7 +9,15 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"></script>
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.152.2/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
}
}
</script>
</head>
<body data-bs-theme="dark">
@ -143,8 +151,7 @@
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="app.js"></script>
<script type="module" src="app.js"></script>
</body>
</html>