weitingwan
/
earthquake_3d_viewer_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dev-1.4
feature-1.4.1
main
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2c5c35709c'
${ noResults }
earthquake_3d_viewer_front/three/manual/examples/game-conga-line.html

1046 lines
22 KiB
HTML
Raw Normal View History Unescape Escape

需求4第一阶段
2 months ago
<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Three.js - Game</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
height: 100%;
user-select: none;
}
img, canvas {
/* prevent the save-image on long press on mobile */
pointer-events: none;
}
#c {
width: 100%;
height: 100%;
display: block;
}
#ui {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-content: stretch;
}
#ui>div {
display: flex;
align-items: flex-end;
flex: 1 1 auto;
}
.bright {
filter: brightness(2);
}
#left {
justify-content: flex-end;
}
#right {
justify-content: flex-start;
}
#ui img {
padding: 10px;
width: 80px;
height: 80px;
display: block;
}
#loading {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: xx-large;
font-family: sans-serif;
}
#loading>div>div {
padding: 2px;
}
.progress {
width: 50vw;
border: 1px solid black;
}
#progressbar {
width: 0%;
transition: width ease-out .5s;
height: 1em;
background-color: #888;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .5) 50%,
rgba(255, 255, 255, .5) 75%,
transparent 75%,
transparent
);
background-size: 50px 50px;
animation: progressanim 2s linear infinite;
}
@keyframes progressanim {
0% {
background-position: 50px 50px;
}
100% {
background-position: 0 0;
}
}
#labels {
position: absolute; /* let us position ourself inside the container */
left: 0; /* make our position the top left of the container */
top: 0;
color: white;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
#labels>div {
position: absolute; /* let us position them inside the container */
left: 0; /* make their default position the top left of the container */
top: 0;
font-size: large;
font-family: monospace;
user-select: none; /* don't let the text get selected */
text-shadow: /* create a black outline */
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
1px 0 0 #000,
1px 1px 0 #000,
0 1px 0 #000,
-1px 1px 0 #000,
-1px 0 0 #000;
}
</style>
</head>
<body>
<canvas id="c" tabindex="1"></canvas>
<div id="ui">
<div id="left"><img src="resources/images/left.svg"></div>
<div style="flex: 0 0 40px;"></div>
<div id="right"><img src="resources/images/right.svg"></div>
</div>
<div id="loading">
<div>
<div>...loading...</div>
<div class="progress"><div id="progressbar"></div></div>
</div>
</div>
<div id="labels"></div>
</body>
<script type="importmap">
{
"imports": {
"three": "../../build/three.module.js",
"three/addons/": "../../examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
function main() {
const canvas = document.querySelector( '#c' );
const renderer = new THREE.WebGLRenderer( { antialias: true, canvas } );
const fov = 45;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.set( 0, 40, 80 );
const controls = new OrbitControls( camera, canvas );
controls.target.set( 0, 5, 0 );
controls.update();
const scene = new THREE.Scene();
scene.background = new THREE.Color( 'white' );
function addLight( ...pos ) {
const color = 0xFFFFFF;
const intensity = 2.5;
const light = new THREE.DirectionalLight( color, intensity );
light.position.set( ...pos );
scene.add( light );
scene.add( light.target );
}
addLight( 5, 5, 2 );
addLight( - 5, 5, 5 );
const manager = new THREE.LoadingManager();
manager.onLoad = init;
const progressbarElem = document.querySelector( '#progressbar' );
manager.onProgress = ( url, itemsLoaded, itemsTotal ) => {
progressbarElem.style.width = `${itemsLoaded / itemsTotal * 100 | 0}%`;
};
const models = {
pig: { url: 'resources/models/animals/Pig.gltf' },
cow: { url: 'resources/models/animals/Cow.gltf' },
llama: { url: 'resources/models/animals/Llama.gltf' },
pug: { url: 'resources/models/animals/Pug.gltf' },
sheep: { url: 'resources/models/animals/Sheep.gltf' },
zebra: { url: 'resources/models/animals/Zebra.gltf' },
horse: { url: 'resources/models/animals/Horse.gltf' },
knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
};
{
const gltfLoader = new GLTFLoader( manager );
for ( const model of Object.values( models ) ) {
gltfLoader.load( model.url, ( gltf ) => {
model.gltf = gltf;
} );
}
}
function prepModelsAndAnimations() {
const box = new THREE.Box3();
const size = new THREE.Vector3();
Object.values( models ).forEach( model => {
box.setFromObject( model.gltf.scene );
box.getSize( size );
model.size = size.length();
const animsByName = {};
model.gltf.animations.forEach( ( clip ) => {
animsByName[ clip.name ] = clip;
// Should really fix this in .blend file
if ( clip.name === 'Walk' ) {
clip.duration /= 2;
}
} );
model.animations = animsByName;
} );
}
// Keeps the state of keys/buttons
//
// You can check
//
// inputManager.keys.left.down
//
// to see if the left key is currently held down
// and you can check
//
// inputManager.keys.left.justPressed
//
// To see if the left key was pressed this frame
//
// Keys are 'left', 'right', 'a', 'b', 'up', 'down'
class InputManager {
constructor() {
this.keys = {};
const keyMap = new Map();
const setKey = ( keyName, pressed ) => {
const keyState = this.keys[ keyName ];
keyState.justPressed = pressed && ! keyState.down;
keyState.down = pressed;
};
const addKey = ( keyCode, name ) => {
this.keys[ name ] = { down: false, justPressed: false };
keyMap.set( keyCode, name );
};
const setKeyFromKeyCode = ( keyCode, pressed ) => {
const keyName = keyMap.get( keyCode );
if ( ! keyName ) {
return;
}
setKey( keyName, pressed );
};
addKey( 37, 'left' );
addKey( 39, 'right' );
addKey( 38, 'up' );
addKey( 40, 'down' );
addKey( 90, 'a' );
addKey( 88, 'b' );
window.addEventListener( 'keydown', ( e ) => {
setKeyFromKeyCode( e.keyCode, true );
} );
window.addEventListener( 'keyup', ( e ) => {
setKeyFromKeyCode( e.keyCode, false );
} );
const sides = [
{ elem: document.querySelector( '#left' ), key: 'left' },
{ elem: document.querySelector( '#right' ), key: 'right' },
];
// note: not a good design?
// The last direction the user presses should take
// precedence. Example: User presses L, without letting go of
// L user presses R. Input should now be R. User lets off R
// Input should now be L.
// With this code if user pressed both L and R result is nothing
const clearKeys = () => {
for ( const { key } of sides ) {
setKey( key, false );
}
};
const handleMouseMove = ( e ) => {
e.preventDefault();
// this is needed because we call preventDefault();
// we also gave the canvas a tabindex so it can
// become the focus
canvas.focus();
window.addEventListener( 'pointermove', handleMouseMove );
window.addEventListener( 'pointerup', handleMouseUp );
for ( const { elem, key } of sides ) {
let pressed = false;
const rect = elem.getBoundingClientRect();
const x = e.clientX;
const y = e.clientY;
const inRect = x >= rect.left && x < rect.right &&
y >= rect.top && y < rect.bottom;
if ( inRect ) {
pressed = true;
}
setKey( key, pressed );
}
};
function handleMouseUp() {
clearKeys();
window.removeEventListener( 'pointermove', handleMouseMove, { passive: false } );
window.removeEventListener( 'pointerup', handleMouseUp );
}
const uiElem = document.querySelector( '#ui' );
uiElem.addEventListener( 'pointerdown', handleMouseMove, { passive: false } );
uiElem.addEventListener( 'touchstart', ( e ) => {
// prevent scrolling
e.preventDefault();
}, { passive: false } );
}
update() {
for ( const keyState of Object.values( this.keys ) ) {
if ( keyState.justPressed ) {
keyState.justPressed = false;
}
}
}
}
function removeArrayElement( array, element ) {
const ndx = array.indexOf( element );
if ( ndx >= 0 ) {
array.splice( ndx, 1 );
}
}
class SafeArray {
constructor() {
this.array = [];
this.addQueue = [];
this.removeQueue = new Set();
}
get isEmpty() {
return this.addQueue.length + this.array.length > 0;
}
add( element ) {
this.addQueue.push( element );
}
remove( element ) {
this.removeQueue.add( element );
}
forEach( fn ) {
this._addQueued();
this._removeQueued();
for ( const element of this.array ) {
if ( this.removeQueue.has( element ) ) {
continue;
}
fn( element );
}
this._removeQueued();
}
_addQueued() {
if ( this.addQueue.length ) {
this.array.splice( this.array.length, 0, ...this.addQueue );
this.addQueue = [];
}
}
_removeQueued() {
if ( this.removeQueue.size ) {
this.array = this.array.filter( element => ! this.removeQueue.has( element ) );
this.removeQueue.clear();
}
}
}
class GameObjectManager {
constructor() {
this.gameObjects = new SafeArray();
}
createGameObject( parent, name ) {
const gameObject = new GameObject( parent, name );
this.gameObjects.add( gameObject );
return gameObject;
}
removeGameObject( gameObject ) {
this.gameObjects.remove( gameObject );
}
update() {
this.gameObjects.forEach( gameObject => gameObject.update() );
}
}
const kForward = new THREE.Vector3( 0, 0, 1 );
const globals = {
camera,
canvas,
debug: true,
time: 0,
moveSpeed: 16,
deltaTime: 0,
player: null,
congaLine: [],
};
const gameObjectManager = new GameObjectManager();
const inputManager = new InputManager();
class GameObject {
constructor( parent, name ) {
this.name = name;
this.components = [];
this.transform = new THREE.Object3D();
parent.add( this.transform );
}
addComponent( ComponentType, ...args ) {
const component = new ComponentType( this, ...args );
this.components.push( component );
return component;
}
removeComponent( component ) {
removeArrayElement( this.components, component );
}
getComponent( ComponentType ) {
return this.components.find( c => c instanceof ComponentType );
}
update() {
for ( const component of this.components ) {
component.update();
}
}
}
// Base for all components
class Component {
constructor( gameObject ) {
this.gameObject = gameObject;
}
update() {
}
}
class CameraInfo extends Component {
constructor( gameObject ) {
super( gameObject );
this.projScreenMatrix = new THREE.Matrix4();
this.frustum = new THREE.Frustum();
}
update() {
const { camera } = globals;
this.projScreenMatrix.multiplyMatrices(
camera.projectionMatrix,
camera.matrixWorldInverse );
this.frustum.setFromProjectionMatrix( this.projScreenMatrix );
}
}
class SkinInstance extends Component {
constructor( gameObject, model ) {
super( gameObject );
this.model = model;
this.animRoot = SkeletonUtils.clone( this.model.gltf.scene );
this.mixer = new THREE.AnimationMixer( this.animRoot );
gameObject.transform.add( this.animRoot );
this.actions = {};
}
setAnimation( animName ) {
const clip = this.model.animations[ animName ];
// turn off all current actions
for ( const action of Object.values( this.actions ) ) {
action.enabled = false;
}
// get or create existing action for clip
const action = this.mixer.clipAction( clip );
action.enabled = true;
action.reset();
action.play();
this.actions[ animName ] = action;
}
update() {
this.mixer.update( globals.deltaTime );
}
}
class FiniteStateMachine {
constructor( states, initialState ) {
this.states = states;
this.transition( initialState );
}
get state() {
return this.currentState;
}
transition( state ) {
const oldState = this.states[ this.currentState ];
if ( oldState && oldState.exit ) {
oldState.exit.call( this );
}
this.currentState = state;
const newState = this.states[ state ];
if ( newState.enter ) {
newState.enter.call( this );
}
}
update() {
const state = this.states[ this.currentState ];
if ( state.update ) {
state.update.call( this );
}
}
}
const gui = new GUI();
gui.add( globals, 'debug' ).onChange( showHideDebugInfo );
const labelContainerElem = document.querySelector( '#labels' );
function showHideDebugInfo() {
labelContainerElem.style.display = globals.debug ? '' : 'none';
}
class StateDisplayHelper extends Component {
constructor( gameObject, size ) {
super( gameObject );
this.elem = document.createElement( 'div' );
labelContainerElem.appendChild( this.elem );
this.pos = new THREE.Vector3();
this.helper = new THREE.PolarGridHelper( size / 2, 1, 1, 16 );
gameObject.transform.add( this.helper );
}
setState( s ) {
this.elem.textContent = s;
}
setColor( cssColor ) {
this.elem.style.color = cssColor;
this.helper.material.color.set( cssColor );
}
update() {
this.helper.visible = globals.debug;
if ( ! globals.debug ) {
return;
}
const { pos } = this;
const { transform } = this.gameObject;
const { canvas } = globals;
pos.copy( transform.position );
// get the normalized screen coordinate of that position
// x and y will be in the -1 to +1 range with x = -1 being
// on the left and y = -1 being on the bottom
pos.project( globals.camera );
// convert the normalized position to CSS coordinates
const x = ( pos.x * .5 + .5 ) * canvas.clientWidth;
const y = ( pos.y * - .5 + .5 ) * canvas.clientHeight;
// move the elem to that position
this.elem.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
}
}
class Player extends Component {
constructor( gameObject ) {
super( gameObject );
const model = models.knight;
globals.playerRadius = model.size / 2;
this.text = gameObject.addComponent( StateDisplayHelper, model.size );
this.skinInstance = gameObject.addComponent( SkinInstance, model );
this.skinInstance.setAnimation( 'Run' );
this.turnSpeed = globals.moveSpeed / 4;
this.offscreenTimer = 0;
this.maxTimeOffScreen = 3;
}
update() {
const { deltaTime, moveSpeed, cameraInfo } = globals;
const { transform } = this.gameObject;
const delta = ( inputManager.keys.left.down ? 1 : 0 ) +
( inputManager.keys.right.down ? - 1 : 0 );
transform.rotation.y += this.turnSpeed * delta * deltaTime;
transform.translateOnAxis( kForward, moveSpeed * deltaTime );
const { frustum } = cameraInfo;
if ( frustum.containsPoint( transform.position ) ) {
this.offscreenTimer = 0;
} else {
this.offscreenTimer += deltaTime;
if ( this.offscreenTimer >= this.maxTimeOffScreen ) {
transform.position.set( 0, 0, 0 );
}
}
}
}
// Returns true of obj1 and obj2 are close
function isClose( obj1, obj1Radius, obj2, obj2Radius ) {
const minDist = obj1Radius + obj2Radius;
const dist = obj1.position.distanceTo( obj2.position );
return dist < minDist;
}
// keeps v between -min and +min
function minMagnitude( v, min ) {
return Math.abs( v ) > min
? min * Math.sign( v )
: v;
}
const aimTowardAndGetDistance = function () {
const delta = new THREE.Vector3();
return function aimTowardAndGetDistance( source, targetPos, maxTurn ) {
delta.subVectors( targetPos, source.position );
// compute the direction we want to be facing
const targetRot = Math.atan2( delta.x, delta.z ) + Math.PI * 1.5;
// rotate in the shortest direction
const deltaRot = ( targetRot - source.rotation.y + Math.PI * 1.5 ) % ( Math.PI * 2 ) - Math.PI;
// make sure we don't turn faster than maxTurn
const deltaRotation = minMagnitude( deltaRot, maxTurn );
// keep rotation between 0 and Math.PI * 2
source.rotation.y = THREE.MathUtils.euclideanModulo(
source.rotation.y + deltaRotation, Math.PI * 2 );
// return the distance to the target
return delta.length();
};
}();
class Animal extends Component {
constructor( gameObject, model ) {
super( gameObject );
this.helper = gameObject.addComponent( StateDisplayHelper, model.size );
const hitRadius = model.size / 2;
const skinInstance = gameObject.addComponent( SkinInstance, model );
skinInstance.mixer.timeScale = globals.moveSpeed / 4;
const transform = gameObject.transform;
const playerTransform = globals.player.gameObject.transform;
const maxTurnSpeed = Math.PI * ( globals.moveSpeed / 4 );
const targetHistory = [];
let targetNdx = 0;
function addHistory() {
const targetGO = globals.congaLine[ targetNdx ];
const newTargetPos = new THREE.Vector3();
newTargetPos.copy( targetGO.transform.position );
targetHistory.push( newTargetPos );
}
this.fsm = new FiniteStateMachine( {
idle: {
enter: () => {
skinInstance.setAnimation( 'Idle' );
},
update: () => {
// check if player is near
if ( isClose( transform, hitRadius, playerTransform, globals.playerRadius ) ) {
this.fsm.transition( 'waitForEnd' );
}
},
},
waitForEnd: {
enter: () => {
skinInstance.setAnimation( 'Jump' );
},
update: () => {
// get the gameObject at the end of the conga line
const lastGO = globals.congaLine[ globals.congaLine.length - 1 ];
const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
const targetPos = lastGO.transform.position;
aimTowardAndGetDistance( transform, targetPos, deltaTurnSpeed );
// check if last thing in conga line is near
if ( isClose( transform, hitRadius, lastGO.transform, globals.playerRadius ) ) {
this.fsm.transition( 'goToLast' );
}
},
},
goToLast: {
enter: () => {
// remember who we're following
targetNdx = globals.congaLine.length - 1;
// add ourselves to the conga line
globals.congaLine.push( gameObject );
skinInstance.setAnimation( 'Walk' );
},
update: () => {
addHistory();
// walk to the oldest point in the history
const targetPos = targetHistory[ 0 ];
const maxVelocity = globals.moveSpeed * globals.deltaTime;
const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
const distance = aimTowardAndGetDistance( transform, targetPos, deltaTurnSpeed );
const velocity = distance;
transform.translateOnAxis( kForward, Math.min( velocity, maxVelocity ) );
if ( distance <= maxVelocity ) {
this.fsm.transition( 'follow' );
}
},
},
follow: {
update: () => {
addHistory();
// remove the oldest history and just put ourselves there.
const targetPos = targetHistory.shift();
transform.position.copy( targetPos );
const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
aimTowardAndGetDistance( transform, targetHistory[ 0 ], deltaTurnSpeed );
},
},
}, 'idle' );
}
update() {
this.fsm.update();
const dir = THREE.MathUtils.radToDeg( this.gameObject.transform.rotation.y );
this.helper.setState( `${this.fsm.state}:${dir.toFixed( 0 )}` );
}
}
function init() {
// hide the loading bar
const loadingElem = document.querySelector( '#loading' );
loadingElem.style.display = 'none';
prepModelsAndAnimations();
{
const gameObject = gameObjectManager.createGameObject( camera, 'camera' );
globals.cameraInfo = gameObject.addComponent( CameraInfo );
}
{
const gameObject = gameObjectManager.createGameObject( scene, 'player' );
globals.player = gameObject.addComponent( Player );
globals.congaLine = [ gameObject ];
}
const animalModelNames = [
'pig',
'cow',
'llama',
'pug',
'sheep',
'zebra',
'horse',
];
animalModelNames.forEach( ( name, ndx ) => {
const gameObject = gameObjectManager.createGameObject( scene, name );
gameObject.addComponent( Animal, models[ name ] );
gameObject.transform.position.x = ( ndx + 1 ) * 5;
} );
}
function resizeRendererToDisplaySize( renderer ) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if ( needResize ) {
renderer.setSize( width, height, false );
}
return needResize;
}
let then = 0;
function render( now ) {
// convert to seconds
globals.time = now * 0.001;
// make sure delta time isn't too big.
globals.deltaTime = Math.min( globals.time - then, 1 / 20 );
then = globals.time;
if ( resizeRendererToDisplaySize( renderer ) ) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
gameObjectManager.update();
inputManager.update();
renderer.render( scene, camera );
requestAnimationFrame( render );
}
requestAnimationFrame( render );
}
main();
</script>
</html>