function buttonClicked() {
if (this.querySelector('#id_butt').classList.contains('butt_Activ')) {
let xhr = new XMLHttpRequest(); // Создан AJAX-транспорт.
let formData = new FormData(myForm); // Создан новый Объект-FormData.
// При завершении запроса:
xhr.onloadend = function() {
if (xhr.status === 200) {
_При успешном ответе сервера - вставляем ответ как значение в кнопку.
return;
} else {
_При ошибке запроса - сообщение об ошибке.
return;
}
}
xhr.open('POST', '/my_form');
xhr.send(formData);
}<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function() {
let width = window.innerWidth;
let height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
controls = THREE.OrbitControls(camera, renderer.domElement);
// Shape
let geometry = new THREE.BoxGeometry(1, 1, 1);
let cubeMaterials =
[
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/1.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/2.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/3.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/4.png'), side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({color: 0xffffff}),
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/5.png'), side: THREE.DoubleSide})
];
let material = new THREE.MeshFaceMaterial(cubeMaterials);
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Camera Position
camera.position.z = 2.1;
// Game Logic
let update = function () {
cube.rotation.x += 0.08;
cube.rotation.y += 0.08;
};
// Draw Scene
let render = function () {
renderer.render(scene, camera);
};
// Run Game
let GameLoop = function () {
requestAnimationFrame(GameLoop);
// update();
render();
};
GameLoop();
</script>
</body>
</html>