What is the reason for the incorrect movement of a 3d model on a plane in three.js?

Question

3D

I am writing the first program using three.js (trying) - when the drive button is pressed, the object should move along WASD on a plane, but I don’t understand how to set the camera correctly, and why it doesn’t work correctly along the axes ("W" and "S") and turn on the keys "A" and "D".

Made by examples with chase camera. Here is a link to github and gitpages: https://github.com/mrmadgav/rx8 https://mrmadgav.github.io/rx8/ And also the question - is it possible to somehow sign the axes / add hints on the coordinate system when working with objects? I will be glad to any advice on working with cameras and movement.

//Main variables

let container;
let camera;
let renderer;
let scene;
let car;
let gui;
var clock = new THREE.Clock();
var keyboard = new THREEx.KeyboardState();
//SETTINGS FOR GUI DATEs
let settings = {
// model
rotation keys rotationX: -1.4,
rotationY: 0,
rotationZ: 0.0,
// body color keys
bodyRed: 0.2,
bodyGreen: 0.2,
bodyBlue: 0.2,
// wheels color keys
rimsRed: 0.2,
rimsGreen: 0.2,
rimsBlue: 0.2,
};

// animation toggle button (!)
var drive = document. querySelector("button");
drive.dataset.status = "OnStyle";

// A function that turns on the first-person camera and the ability to drive a car by pressing the drive button
function makeDrive() {
drive.dataset.status = "OnDrive";
document.querySelector("body").addEventListener("keydown", logKey);
gui.close();
let ground = new THREE.PlaneGeometry(500, 500);
let material = new THREE.MeshNormalMaterial((wireframe = true));

meshGround = new THREE.Mesh(ground, material);

scene.add(meshGround);
meshGround.rotation.x += Math.PI / 2;
let gridHelper = new THREE.GridHelper(800, 50);
scene.add(gridHelper);
let axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);

car.rotation.x = -1.57;
car.position.x = 0;
car.position.y = 0;
car.position.z = 0;
car.rotation.z = Math.PI;
fov = 0;
console log(camera);
}
drive.addEventListener("click", makeDrive);

let loader = new THREE.GLTFLoader();
loader.load("./mazda_rx8/sceneUpdated.gltf", function (gltf) {
init(); // run the whole scene
scene.add(gltf.scene);
car = gltf.scene.children[0];
animate( ); // function starts animation
});
// console.log(drive.dataset.status === 'OnStyle');

function init() {
container = document.querySelector(".scene");

//MAKE A SCENE
scene = new THREE.Scene();

let fov = 40;
let aspect = container.clientWidth / container.clientHeight;
let near = 0.1;
let far = 2000;

//MAKE A CAMERA
camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 50, 600);

const ambient = new THREE.AmbientLight(0x404040, 2);
scene.add(ambient);

const light = new THREE.DirectionalLight(0xffffff, 2);
light.position.set(50, 50, 100);
scene.add(light);

//Dat GUI itself

gui = new dat.GUI();
// create auto rotation sliders
gui.add(settings, "rotationX").min(-1.5).max(1.5).step(0.001);
gui.add(settings, "rotationY").min(-0.2).max(0.2).step(0.001);
gui.add(settings, "rotationZ").min(-0.03).max(0.03).step(0.001);
// folder with auto color settings
var guiBodyColors = gui.addFolder("Choose Body Color");
guiBodyColors.add(settings, "bodyRed").min(0).max(0.7).step(0.005);
guiBodyColors.add(settings, "bodyGreen").min(0).max(0.7).step(0.005);
guiBodyColors.add(settings, "bodyBlue").min(0).max(0.7).step(0.005);
guiBodyColors.open();
//folder with rim color settings
var guiRimsColors = gui.addFolder("Choose Rims Color");
guiRimsColors.add(settings, "rimsRed").min(0).max(0.7).step(0.005);
guiRimsColors.add(settings, "rimsGreen").min(0).max(0.7).step(0.005);
guiRimsColors.add(settings, "rimsBlue").min(0).max(0.7).step(0.005);
// gui.add(settings, "lightPower").min(0).max(10).step(0.5); - find dynamic light change on model

// MAKE A RENDER
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);
// Orbit Controls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
}

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
update();
}

function update() {
if (drive.dataset.status === "OnStyle") {
// model rotation
car.rotation.x = settings.rotationX;
car.rotation.y = settings.rotationY;
car.rotation.z += settings.rotationZ;
// body color
let bodyIDcolor =
car.parent.children[0].children[0].children[0].children[0].material.color;
bodyIDcolor.r = settings.bodyRed;
bodyIDcolor.g = settings.bodyGreen;
bodyIDcolor.b = settings.bodyBlue;
// color of wheels
let rimIDcolor =
car.parent.children[0].children[0].children[0].children[11].material
.color;
rimIDcolor.r = settings.rimsRed;
rimIDcolor.g = settings.rimsGreen;
rimIDcolor.b = settings.rimsBlue;
}

if (drive.dataset.status === "OnDrive") {
document.body.style.background = "none";
}
}

var rotation_matrix = new THREE.Matrix4().identity();
//trap control key press
function logKey(e) {
console.log(`${e.code}`);
var delta = clock.getDelta(); // seconds.
var moveDistance = 200 * delta; // 200 pixels per second
var rotateAngle = (Math.PI / 4) * delta; // pi/2 radians (90 degrees) per second
if (keyboard.pressed("W")) car.translateZ(-moveDistance);
console.log(car.position.x, car.position.y, car.position.z);
if (keyboard.pressed("S")) car.translateZ(moveDistance);
if (keyboard.pressed("Q")) car.translateX(-moveDistance);
if (keyboard.pressed("E")) car.translateX(moveDistance);
// rotate left/right/up/down

if (keyboard.pressed("A"))
car.rotateOnAxis(new THREE.Vector3(0, 1, 0), rotateAngle);
if (keyboard.pressed("D"))
car.rotateOnAxis(new THREE.Vector3(0, 1, 0), -rotateAngle);
if (keyboard.pressed("R"))
car.rotateOnAxis(new THREE.Vector3(1, 0, 0), rotateAngle);
if (keyboard.pressed("F"))
car.rotateOnAxis(new THREE.Vector3(1, 0, 0), -rotateAngle);

if (keyboard.pressed("Z")) {
car.position.set(0, 0, 0, 0);
car.rotation.set(0, 0, 0);
}
var relativeCameraOffset = new THREE.Vector3(0, 50, 600);
var cameraOffset = relativeCameraOffset.applyMatrix4(car.matrixWorld);

camera.position.x = cameraOffset.x;
camera.position.y = cameraOffset.y;
camera.position.z = car.position.z;
camera.lookAt(car.position);
}

function onWindowResize() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();

renderer.setSize(container.clientWidth, container.clientHeight);
}

window.addEventListener("resize", onWindowResize);

Answer 1

All of them were outside the framework, i.e. used separately from each other. As far as I understand, this is not a good practice.

Yes, this is the best practice in the world, use only what is really necessary!
Generally speaking, any framework will suit you, all frameworks suit your requirements. But so be it, I will advise Symfony 3 :)

Answer 2

Laravel for sure!
Why use something else if you are already partially familiar with Laravel?

Answer 3

1/2/3 almost any (not sure about yii)
4. do you need a framework or an archiver? And here in general framework?
php.net/manual/en/book.zip.php

Answer 4

Laravel is easier to get started with.
See Symfony just a couple of years after mastering Laravel.

Answer 5

You should have my friend experience, read the docks and learn how to use the composer and all questions will disappear by themselves

Answer 6

It's not clear if you're mad to use Laravel (which is probably the best choice in the PHP world), why would you choose anything else?