feat: metaverse添加注释，样式优化.
This commit is contained in:
dragonir
parent
9bc2d6aebc
commit
6cfcf62d7f
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
|
|
@ -4,6 +4,11 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>被遗弃的星球（元宇宙）</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<link rel="shortcut icon" href="./images/logo.png">
|
||||
<link rel="apple-touch-icon" href="./images/logo.png" />
|
||||
<link rel="apple-touch-icon-precomposed" href="./images/logo.png">
|
||||
<link rel="Bookmark" href="./images/logo.png" />
|
||||
<link rel="Bookmark" href="./images/logo.png" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="./libs/three.min.js"></script>
|
||||
|
|
@ -24,6 +29,7 @@
|
|||
<script src="./libs/OrbitControls.js"></script>
|
||||
<div id="info"></div>
|
||||
<!-- partial -->
|
||||
<script src="./libs/stats.js"></script>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
/* eslint-disable */
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.Stats = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var Stats = function () {
|
||||
|
||||
var mode = 0;
|
||||
|
||||
var container = document.createElement( 'div' );
|
||||
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
|
||||
container.addEventListener( 'click', function ( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
showPanel( ++ mode % container.children.length );
|
||||
|
||||
}, false );
|
||||
|
||||
//
|
||||
|
||||
function addPanel( panel ) {
|
||||
|
||||
container.appendChild( panel.dom );
|
||||
return panel;
|
||||
|
||||
}
|
||||
|
||||
function showPanel( id ) {
|
||||
|
||||
for ( var i = 0; i < container.children.length; i ++ ) {
|
||||
|
||||
container.children[ i ].style.display = i === id ? 'block' : 'none';
|
||||
|
||||
}
|
||||
|
||||
mode = id;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
|
||||
|
||||
var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
|
||||
var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
|
||||
|
||||
if ( self.performance && self.performance.memory ) {
|
||||
|
||||
var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
|
||||
|
||||
}
|
||||
|
||||
showPanel( 0 );
|
||||
|
||||
return {
|
||||
|
||||
REVISION: 16,
|
||||
|
||||
dom: container,
|
||||
|
||||
addPanel: addPanel,
|
||||
showPanel: showPanel,
|
||||
|
||||
begin: function () {
|
||||
|
||||
beginTime = ( performance || Date ).now();
|
||||
|
||||
},
|
||||
|
||||
end: function () {
|
||||
|
||||
frames ++;
|
||||
|
||||
var time = ( performance || Date ).now();
|
||||
|
||||
msPanel.update( time - beginTime, 200 );
|
||||
|
||||
if ( time >= prevTime + 1000 ) {
|
||||
|
||||
fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
|
||||
|
||||
prevTime = time;
|
||||
frames = 0;
|
||||
|
||||
if ( memPanel ) {
|
||||
|
||||
var memory = performance.memory;
|
||||
memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
beginTime = this.end();
|
||||
|
||||
},
|
||||
|
||||
// Backwards Compatibility
|
||||
|
||||
domElement: container,
|
||||
setMode: showPanel
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
Stats.Panel = function ( name, fg, bg ) {
|
||||
|
||||
var min = Infinity, max = 0, round = Math.round;
|
||||
var PR = round( window.devicePixelRatio || 1 );
|
||||
|
||||
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
|
||||
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
|
||||
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
|
||||
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = WIDTH;
|
||||
canvas.height = HEIGHT;
|
||||
canvas.style.cssText = 'width:80px;height:48px';
|
||||
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
|
||||
context.textBaseline = 'top';
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.fillRect( 0, 0, WIDTH, HEIGHT );
|
||||
|
||||
context.fillStyle = fg;
|
||||
context.fillText( name, TEXT_X, TEXT_Y );
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
return {
|
||||
|
||||
dom: canvas,
|
||||
|
||||
update: function ( value, maxValue ) {
|
||||
|
||||
min = Math.min( min, value );
|
||||
max = Math.max( max, value );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 1;
|
||||
context.fillRect( 0, 0, WIDTH, GRAPH_Y );
|
||||
context.fillStyle = fg;
|
||||
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
|
||||
|
||||
context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
return Stats;
|
||||
|
||||
})));
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
// 性能显示
|
||||
const stats = new Stats();
|
||||
document.documentElement.appendChild(stats.dom);
|
||||
|
||||
const randnum = (min, max) => Math.round(Math.random() * (max - min) + min);
|
||||
|
||||
class CannonHelper {
|
||||
|
|
@ -7,20 +11,16 @@ class CannonHelper {
|
|||
|
||||
addLights(renderer) {
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
|
||||
// 默认THREE.PCFShadowMap
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
|
||||
// LIGHTS
|
||||
/* const ambient = new THREE.AmbientLight( 0x888888 );
|
||||
this.scene.add( ambient );*/
|
||||
|
||||
const light = new THREE.DirectionalLight(0xdddddd, .25, 1);
|
||||
// 光源
|
||||
const light = new THREE.DirectionalLight(0xffffff, .25, 1);
|
||||
light.position.set(3, 10, 4);
|
||||
light.target.position.set(0, 0, 0);
|
||||
light.castShadow = true;
|
||||
|
||||
this.sun = light;
|
||||
this.scene.add(light);
|
||||
|
||||
}
|
||||
|
||||
set shadowTarget(obj) {
|
||||
|
|
@ -29,20 +29,17 @@ class CannonHelper {
|
|||
|
||||
createCannonTrimesh(geometry) {
|
||||
if (!geometry.isBufferGeometry) return null;
|
||||
|
||||
const posAttr = geometry.attributes.position;
|
||||
const vertices = geometry.attributes.position.array;
|
||||
let indices = [];
|
||||
for (let i = 0; i < posAttr.count; i++) {
|
||||
indices.push(i);
|
||||
}
|
||||
|
||||
return new CANNON.Trimesh(vertices, indices);
|
||||
}
|
||||
|
||||
createCannonConvex(geometry) {
|
||||
if (!geometry.isBufferGeometry) return null;
|
||||
|
||||
const posAttr = geometry.attributes.position;
|
||||
const floats = geometry.attributes.position.array;
|
||||
const vertices = [];
|
||||
|
|
@ -57,7 +54,6 @@ class CannonHelper {
|
|||
face = [];
|
||||
}
|
||||
}
|
||||
|
||||
return new CANNON.ConvexPolyhedron(vertices, faces);
|
||||
}
|
||||
|
||||
|
|
@ -100,9 +96,7 @@ class CannonHelper {
|
|||
// What geometry should be used?
|
||||
let mesh;
|
||||
if (body instanceof CANNON.Body) mesh = this.shape2Mesh(body, castShadow, receiveShadow);
|
||||
|
||||
if (mesh) {
|
||||
// Add body
|
||||
body.threemesh = mesh;
|
||||
mesh.castShadow = castShadow;
|
||||
mesh.receiveShadow = receiveShadow;
|
||||
|
|
@ -115,30 +109,24 @@ class CannonHelper {
|
|||
const material = this.currentMaterial;
|
||||
const game = this;
|
||||
let index = 0;
|
||||
|
||||
body.shapes.forEach(function (shape) {
|
||||
let mesh;
|
||||
let geometry;
|
||||
let v0, v1, v2;
|
||||
|
||||
switch (shape.type) {
|
||||
|
||||
case CANNON.Shape.types.SPHERE:
|
||||
const sphere_geometry = new THREE.SphereGeometry(shape.radius, 8, 8);
|
||||
mesh = new THREE.Mesh(sphere_geometry, material);
|
||||
break;
|
||||
|
||||
case CANNON.Shape.types.PARTICLE:
|
||||
mesh = new THREE.Mesh(game.particleGeo, game.particleMaterial);
|
||||
const s = this.settings;
|
||||
mesh.scale.set(s.particleSize, s.particleSize, s.particleSize);
|
||||
break;
|
||||
|
||||
case CANNON.Shape.types.PLANE:
|
||||
geometry = new THREE.PlaneGeometry(100, 100, 4, 4);
|
||||
mesh = new THREE.Object3D();
|
||||
const submesh = new THREE.Object3D();
|
||||
|
||||
THREE.ImageUtils.crossOrigin = '';
|
||||
var floorMap = THREE.ImageUtils.loadTexture("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMaznkwKbnlWTf0zzL9uQrUQ2Q54MfyI7JC5m62icHR5oRjT1v");
|
||||
floorMap.wrapS = floorMap.wrapT = THREE.RepeatWrapping;
|
||||
|
|
@ -984,7 +972,7 @@ var lastTime;
|
|||
renderer.render(scene, camera);
|
||||
orbitControls && orbitControls.update();
|
||||
//composer.render();
|
||||
|
||||
stats && stats.update();
|
||||
let delta = clock.getDelta();
|
||||
mixers.map(x => x.update(delta));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
* {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
body {
|
||||
/* set margin to 0 and overflow to hidden, to go fullsc{reen */
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
#info {
|
||||
font-family: monospace;
|
||||
|
|
|
|||
Loading…
Reference in New Issue