minimal three.js

with orbitControls, XZgrid, info

by espace3d

HTML

<div id="info">minimal three.js</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.24.1/phaser.min.js"></script>

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

let m = {} // materials
let g = {} // geometry
let o = {} // objects

let scene, camera, controls; // pour orbit

let theta = 0; //"time", increases every frame

let tb = 0;
let tf = 0;
var newPosition = new THREE.Vector3();

//essai avec wasd
var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;
let prevTime = performance.now();

const color = new THREE.Color();

let onMouseMove;
let onMouseDown;
let onMouseUp;

var Colors = {
    enemy: 0xff2680,
    red: 0xf25346,
    white: 0xffffff,
    green: 0xc5ff9a,
    brown: 0x59332e,
    brownDark: 0x23190f,
    pink: 0xff26ff,
    yellow: 0xf4ce93,
    blue: 0xCC3E4E,
    arbre: 0x2a4e11,
    sol: 0xD92B5A,
    sky: 0x181626,
    tronc: 0xF2A099,
    branches: 0xD96666,
};
//utilitaires avec Phaser
var random = (min, max) => {
    let num = Phaser.Math.Between(min, max)
    return num
}
class JoyStick {
    constructor(options) {
        const circle = document.createElement("div");
        circle.style.cssText = "position:absolute; bottom:35px; width:80px; height:80px; background:rgba(126, 126, 126, 0.2); border:rgba(126, 126, 126, 0.2) ; border-radius:50%; left:10%; transform:translateX(-50%);";
        const thumb = document.createElement("div");
        thumb.style.cssText = "position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: #ff0065;";
        circle.appendChild(thumb);
        document.body.appendChild(circle);
        this.domElement = thumb;
        this.maxRadius = options.maxRadius || 40;
        this.maxRadiusSquared = this.maxRadius * this.maxRadius;
        this.onMove = options.onMove;
        this.game = options.game;
        this.origin = {
            left: this.domElement.offsetLeft,
            top: this.domElement.offsetTop
        };

        if (this.domElement != undefined) {
            const joystick = this;
            if ('ontouchstart' in window) {
               ...