Цитата:
Сообщение от -=DeS=-
В этом уроке я научу вас как можно передвигать обьекты по форме с помощью клавиш...
--------------------------
Начнём.
1)Создайте новый проект File> New> Application
2)Теперь киньте на форму объект TShape
3)После этого выбираем в Object TreeView форму (Form1)
4)В Object inspector на вкладке Events ищем свойство OnKeyDown и щёлкаем на него 2 раза.
5)В созданной процедуре пишем код (я рекомендую вам не просто копировать а понять как это работает!)
Этот код будет двигат фигуру Shape1 на 2 пиксела вверх!
---------------------------
Попробуйте сами написать движение вниз, вправо, влево...
Позже и это будет показано!
|
Переведу этот урок на JavaScript и Three.js
Передвижение объекта по окну браузера с помощью клавиш-стрелок и клавиш WASD
--------------------------
1) Создайте новый проект на
https://codepen.io/ или
https://jsfiddle.net/ Здесь есть отдельные поля для ввода кода на HTML, CSS и JavaScript
2) Наберите в поисковике:
cdn three.js, чтобы найти актуальную ссылку на three.js, например, следующего вида:
Код:
https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js
3) Вставьте эту ссылку в тег <script> в HTML поле, чтобы подключить библиотеку three.js:
Код:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
4) Вставьте следующий код в CSS поле. Он нужен, чтобы убрать отступы от краёв у <body> (margin: 0; - поумолчанию margin равен 8 пикселей), и чтобы растянуть элемент <canvas> на весь экран браузера (width: 100%, height: 100%), а так же чтобы скрыть появление полос прокрутки браузера (overflow: hidden)
Код:
body {
margin: 0;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
5) В поле для JavaScript кода пишем следующий код. Здесь создаётся три объекта: камера, сцена и отрисовщик, которые должны присутствовать во всех программах с three.js. Так же в программе создаётся куб. Этот куб движется вверх клавишами: стрелка-вверх, и клавишей W. Пробел возвращает куб на исходную позицию (0, 0, 0)
Код:
window.onload = init;
function init()
{
// Create renderer
// Создаём рисовальщик
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create Camera
// Создаём камеру
var FIELD_OF_VIEW = 50;
var ASPECT_RATIO = window.innerWidth / window.innerHeight;
var NEAR_CLIPPING_PLANE = 0.1;
var FAR_CLIPPING_PLANE = 1000;
var camera = new THREE.PerspectiveCamera(
FIELD_OF_VIEW, ASPECT_RATIO, NEAR_CLIPPING_PLANE, FAR_CLIPPING_PLANE);
// Отодвигаем камеру от центра по оси Z
// (в Three.js правая правая система координат)
camera.position.z = 5;
// Create scene for 3D Objects
// Создаём сцену для 3D объектов
var scene = new THREE.Scene();
// Create a cube
// Создаём кубик
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// Add the cube to a scene
// Добавляем этот кубик на сцену
scene.add(cube);
// Game logic
// Игровая логика
var update = function ()
{
};
// Draw scene
// Нарисовать сцену
var render = function ()
{
renderer.render(scene, camera);
};
// Game loop: update -> render -> repeat
// Игровой цикл: обновить -> нарисовать -> повторить
var gameLoop = function ()
{
update();
render();
requestAnimationFrame(gameLoop);
};
var xSpeed = 0.1;
var ySpeed = 0.1;
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event)
{
var keyCode = event.which;
if (keyCode == 87 || keyCode == 38)
{
cube.position.y += ySpeed;
}
// if (keyCode == 65 || keyCode == 37)
// {
// cube.position.x -= xSpeed;
// }
// Клавиша Пробел возвращает куб на исходную позицию (0, 0, 0)
// Space returns to the position (0, 0, 0)
else if (keyCode == 32)
{
cube.position.set(0, 0, 0);
}
render();
}
window.addEventListener("resize", onWindowResize, false);
function onWindowResize()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
gameLoop();
}
Весь код урока, который двигает куб вверх клавишами: стрелка-вверх, и клавишей W. Пробел возвращает куб на исходную позицию (0, 0, 0)
https://jsfiddle.net/8Observer8/bqg03bzL/2/
---------------------------
Попробуйте сами написать движение вниз, вправо, влево...
Позже и это будет показано!