jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
fuckit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button id="paw" class="pauseButton">Pause</button>
<script type="module" async src="/main.js"></script>
</body>
</html>import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.background = new THREE.Color(0xc87ceed)
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera,renderer.domElement)
document.body.appendChild(renderer.domElement);
const ambiant = new THREE.HemisphereLight(0xffffbb, 0x080820, 1.2);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.3, 50);
dirLight.position.set(4, 3, -2);
dirLight.shadow.camera.far = 13;
dirLight.shadow.camera.near = -2;
dirLight.shadow.camera.left = - 8;
dirLight.shadow.camera.right = 10;
dirLight.castShadow = true;
class Box extends THREE.Mesh {
constructor ({
width,
height,
depth,
color = 0x00ff00,
velocity = {x : 0,y : 0,z : 0 },
position ={x : 0,y : 0,z : 0 },
canJump,
}) {
super (
new THREE.BoxGeometry(width, height, depth),
new THREE.MeshPhongMaterial({color})
)
this.position.set(position.x, position.y, position.z)
this.LastPosY
this.gravity = -0.04
this.velocity = velocity
this.height = height
this.width = width
this.depth = depth
this.top = position.y + height*0.5
this.bottom = position.y - height*0.5
this.left = position.x - width*0.5
this.right = position.x + width*0.5
this.front = position.z - depth*0.5
this.back = position.z + depth*0.5
}
update( ) {
const {position, velocity} = this
this.LastPosY = position.y
position.y += velocity.y
position.x += velocity.x
position.z += velocity.z
this.top = position.y + this.height*0.5
this.bottom = position.y - this.height*0.5
this.left = position.x - this.width*0.5
this.right = position.x + this.width*0.5
this.front = position.z - this.depth*0.5
this.back = position.z + this.depth*0.5
if(Math.max(this.bottom ,platform.bottom) - Math.min(this.top ,platform.top)<0 &&
Math.max(this.left,platform.left)-Math.min(this.right,platform.right) <0 &&
Math.max(this.front,platform.front) - Math.min(this.back,platform.back )<0 ){
velocity.y = 0
position.y = this.LastPosY
}else {
velocity.y = this.gravity
}
}
}
const cube = new Box ({
width: 1,
height: 1,
depth: 1,
velocity:{ x: 0, y: -0.04, z: 0 },
canJump: false
})
cube.castShadow = true;
const platform2 = new Box ({
width: 1,
height: 0.8,
depth: 6,
color: 0xff8000,
position:
{ x: 1.2, y: -1, z: 0 }
})
platform2.receiveShadow = true;
const platform = new Box ({
width: 11,
height: 0.8,
depth: 11,
color: 0x0000ff,
position:
{ x: 0, y: -2, z: 0 }
})
platform.receiveShadow = true;
scene.add(ambiant,dirLight, platform, platform2,cube);
//scene.add(new THREE.CameraHelper( dirLight.shadow.camera )
const namekeys = {left:'q', right:'d', forward:'z', backward:'s', jump:'e'}
const velocities = {left: -0.06, right: 0.06, forward:-0.06, backward:0.06, jump:0.2, stop:0}
const keys = {left: false, right: false, forward: false, backward: false, jump:false}
window.addEventListener("keydown", function(event) {
switch(event.key) {
case namekeys.forward: keys.forward = true; break;
case namekeys.backward: keys.backward = true; break;
case namekeys.left: keys.left = true; break;
case namekeys.right: keys.right = true; break;
case namekeys.jump: keys.jump = true; break;
}
})
window.addEventListener("keyup", function(event) {
switch(event.key) {
case namekeys.forward: keys.forward = false; cube.velocity.z = velocities.stop; break;
case namekeys.backward: keys.backward = false; cube.velocity.z =velocities.stop; break;
case namekeys.left: keys.left = false; cube.velocity.x = velocities.stop; break;
case namekeys.right: keys.right = false; cube.velocity.x = velocities.stop; break;
case namekeys.jump: keys.jump = false; break;
}
})
function keyboard() {
if (keys.forward == true) cube.velocity.z = velocities.forward
if (keys.backward == true) cube.velocity.z = velocities.backward
if (keys.left == true )cube.velocity.x = velocities.left
if (keys.right == true) cube.velocity.x = velocities.right
if(keys.jump == true ) cube.velocity.y = velocities.jump
}
let btn = document.querySelector('#paw')
let paused = false
btn.addEventListener('click', function () {
paused = !paused
animate()
})
function animate() {
if (!paused) {
requestAnimationFrame(animate);
cube.update()
keyboard()
renderer.render(scene, camera);
}
}
animate();Ready to run.
| Test | Ops/sec | |
|---|---|---|
| 1 | | ready |
| 2 | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.