A

Benchmark created on

Description

fuckit

Preparation HTML

<!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>

Setup

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();

Test runner

Ready to run.

Testing in
TestOps/sec
1
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
2
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(this.bottom < platform.top && this.top > platform.bottom &&
    this.left < platform.right && this.right > platform.left &&
    this.front < platform.back && this.back > platform.front){
     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

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.