thayol/instructions-clear
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use the placeholder player model

Browse Source
This commit is contained in:
Thayol
2025-01-23 23:39:10 +09:00
parent 305980b7f9
commit 52a0da10fe
8 changed files with 96 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/client.js
+56 -27
View File
@@ -1,5 +1,6 @@
import * as THREE from 'three'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { Tween } from '@tweenjs/tween.js'
import * as THREE from 'three'
import Stats from 'stats.js'
const global = (0,eval)('this')
@@ -22,6 +23,16 @@ camera.updateProjectionMatrix()
camera.layers.enable(1)
camera.layers.enable(2)
const gltfLoader = new GLTFLoader()
const addTo = function addTo(scene) {
return function addToScene(gltf) {
const model = gltf.scene
const scale = 2
model.scale.set(scale, scale, scale)
scene.add(model)
}
}
const projectileMaterial = new THREE.MeshToonMaterial({ color: 0xcccccc })
const terrainMaterial = new THREE.MeshToonMaterial({ color: 0x5c4033 })
const passableTerrainMaterial = new THREE.MeshToonMaterial({ color: 0x228822, transparent: true, opacity: 0.65 })
@@ -50,6 +61,7 @@ minimapCamera.position.set(10, 10, 10)
const entities = {}
const projectiles = {}
const positionTweens = {}
const rotationTweens = {}
const terrains = {}
var state = { abilities: [], entities: [], terrains: [], projectiles: [] }
@@ -88,7 +100,8 @@ function render() {
stats.begin()
delta = clock.getDelta()
cameraMovement()
Object.values(positionTweens).forEach((tween) => tween.update()) // TODO: clean up tweens
Object.values(positionTweens).forEach((tween) => tween.update())
Object.values(rotationTweens).forEach((tween) => tween.update())
renderer.render(scene, camera)
stats.end()
}
@@ -296,17 +309,19 @@ function connectWebSocket() {
entity = entities[e.id]
}
else {
const entityMaterial = teamMaterials[e.team]
entity = new THREE.Mesh(new THREE.CylinderGeometry(e.visualRadius / 100, e.visualRadius / 100, e.height / 50), entityMaterial)
// const entityMaterial = teamMaterials[e.team]
// entity = new THREE.Mesh(new THREE.CylinderGeometry(e.visualRadius / 100, e.visualRadius / 100, e.height / 50), entityMaterial)
entity = new THREE.Group()
entity.rotation.x = Math.PI / 2
entity.scale.set(e.visualRadius / 100, e.height / 100, e.visualRadius / 100)
entity.userData.type = 'entity'
entity.userData.id = e.id
entity.position.set(e.position.x / 100, e.position.y / 100, e.height / 100)
entity.position.set(e.position.x / 100, e.position.y / 100, 0)
scene.add(entity)
const hpMargin = 0.4
const maxHp = new THREE.Sprite(new THREE.SpriteMaterial({ color: 0xd03333 }))
maxHp.position.set(0, (e.height / 100) + hpMargin, 0)
maxHp.position.set(0, (e.visualRadius / 100) + hpMargin, 0)
maxHp.scale.set(1.5, 0.2, 1)
maxHp.layers.set(1)
entity.add(maxHp)
@@ -318,12 +333,8 @@ function connectWebSocket() {
maxHp.add(hp)
const teamMaterial = teamMaterials[`${e.team}Transparent`]
const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.radius) / 100, (e.radius) / 100, 1), teamMaterial)
const teamMarkerSize = 4000
teamMarker.scale.y = e.height / teamMarkerSize
teamMarker.position.y = (e.height / (teamMarkerSize * 2)) - (e.height / 100)
teamMarker.position.y += 0.01
teamMarker.layers.set(1)
const teamMarker = new THREE.Mesh(new THREE.CylinderGeometry(1, 0.00001, 1), teamMaterial)
teamMarker.position.y = -0.496
entity.add(teamMarker)
const buffMaterial = new THREE.MeshToonMaterial({ color: 0xffff00, transparent: true, opacity: 0.4 })
@@ -334,30 +345,35 @@ function connectWebSocket() {
buffMarker.visible = false
entity.add(buffMarker)
const rotationBase = new THREE.Object3D()
entity.add(rotationBase)
const castingMarkerrotationBase = new THREE.Group()
entity.add(castingMarkerrotationBase)
const castingMaterial = new THREE.MeshToonMaterial({ color: 0x10dde0, transparent: true, opacity: 0.4 })
const castingMarker = new THREE.Mesh(new THREE.CylinderGeometry((e.height * 0.9) / 100, (e.height * 0.9) / 100, 1), castingMaterial)
const castingMarkerSize = 800
castingMarker.rotation.z = Math.PI / 2
castingMarker.position.x = (e.radius) / 100
castingMarker.position.x = 1
castingMarker.position.y = 1
castingMarker.scale.y = e.height / castingMarkerSize
castingMarker.layers.set(1)
buffMarker.visible = false
rotationBase.add(castingMarker)
castingMarkerrotationBase.add(castingMarker)
const rangeMaterial = teamMaterials['range']
// const rangeSize = e.visionRange ?? 0
const rangeSize = (state.abilities.find((it) => it.id == e.abilities?.a)?.range ?? 0) + e.radius
const rangeMarker = new THREE.Mesh(new THREE.CylinderGeometry((rangeSize) / 100, (rangeSize) / 100, 1), rangeMaterial)
const rangeMarkerSize = 5000
rangeMarker.scale.y = e.height / rangeMarkerSize
rangeMarker.position.y = (e.height / (rangeMarkerSize * 2)) - (e.height / 100)
const rangeMarker = new THREE.Mesh(new THREE.CylinderGeometry(rangeSize / e.visualRadius, rangeSize / e.visualRadius, 0.001), rangeMaterial)
rangeMarker.position.y = 0.002
rangeMarker.layers.set(1)
rangeMarker.visible = false
entity.add(rangeMarker)
const modelRotationBase = new THREE.Object3D()
modelRotationBase.layers.set(1)
entity.add(modelRotationBase)
gltfLoader.load('models/generic-player-placeholder.gltf', addTo(modelRotationBase))
entities[e.id] = entity
}
@@ -365,28 +381,36 @@ function connectWebSocket() {
entity.children.at(1).visible = !e.dead
entity.children.at(2).visible = e.buffs.some((it) => it.id == 'exposed') // TODO: only works for Exposed now
let z = e.height / 100
if (e.dead) {
entity.rotation.x = 0
entity.position.z = 0
z = 0
entity.children.at(5).children.at(0).rotation.y = Math.PI / 2
}
else {
entity.rotation.x = Math.PI / 2
entity.position.z = e.height / 100
entity.children.at(5).children.at(0).rotation.y = 0
}
entity.userData.flaggedForRemoval = false
entity.children.at(3).rotation.y = e.rotation
positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z }, tweenDuration).start()
// entity.children.at(5).rotation.y = e.rotation - (Math.PI / 2)
const oldRotationY = entity.children.at(5).rotation.y
const newRotationY = e.rotation - (Math.PI / 2)
if (Math.abs((oldRotationY - (2 * Math.PI)) - newRotationY) < Math.abs(oldRotationY - newRotationY)) {
entity.children.at(5).rotation.y = oldRotationY - (2 * Math.PI)
}
if (Math.abs((oldRotationY + (2 * Math.PI)) - newRotationY) < Math.abs(oldRotationY - newRotationY)) {
entity.children.at(5).rotation.y = oldRotationY + (2 * Math.PI)
}
positionTweens[entity.id] = new Tween(entity.position).to({ x: e.position.x / 100, y: e.position.y / 100, z: 0 }, tweenDuration).start()
rotationTweens[entity.id] = new Tween(entity.children.at(5).rotation).to({ x: 0, y: newRotationY, z: 0 }, tweenDuration).start()
const hp = entity.children.at(0).children.at(0)
const percentageHp = e.health / e.maxHealth
hp.scale.x = percentageHp
hp.position.x = -(1 - percentageHp) / 2
// entity.children.at(4).visible = e.id == playerId
entity.children.at(4).visible = e.id == playerId
entity.children.at(3).children.at(0).visible = e.casting != null
}
@@ -395,6 +419,7 @@ function connectWebSocket() {
scene.remove(e)
delete entities[e.userData.id]
delete positionTweens[e.userData.id]
delete rotationTweens[e.userData.id]
}
}
@@ -561,6 +586,10 @@ window.addEventListener('load', () => {
playerId = params.id
if (playerId == null) {
playerId = prompt('Player ID:')
if (playerId == '') {
window.location.href = '/menu/'
return
}
}
connectWebSocket()