Команда (фрилансеры)

Набираем команду фрилансеров, Вы:

  • Программист,
  • Дизайнер,
  • SEO-специалист,
  • Менеджер

Разработка на заказ

Наша команда фрилансеров выполнит
работы на заказ:

Создание и раскрутка сайтов
Разработка приложений (мобайл, десктоп, сервер)
Разработка игр (веб, мобайл, 3D)
Аутсорсинг, фриланс

Контакты
vk.com/sitev_ru
Skype: sitev.ru
E-mail: mike@sitev.ru
github.com/sitev

Рейтинг@Mail.ru

Besucherzahler
счетчик посещений
Сайт на C++
Наш сайт работает на C++ и это очень круто! =))

Three.JS начинающим

На днях для одной компании потребовалось знание фреймворка Three.JS. А яж когда то давно использовал его для своих целей! Вспоминаем, что это такое.

Для начала заходим на сайт threejs.org, качаем архив с исходным кодом и распаковываем его. Из папки build копируем к себе тестовый проект файл three.js (предварительно создадим для этого пустую папку).

Начнём с простенького примерчика, с создания сцены с вращающимся кубом.

Там же рядом создаём файл index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
// Our Javascript will go here!
</script>
</body>
</html>

Заготовку сделали. Оставшаяся программа попадёт в тег script.

Создание сцены

Создадим сцену:

var scene = new THREE.Scene();

Это было просто! Ещё не хватает камеры:

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

В камере мы задали поле зрения, соотношение сторон, плоскость ближнего и дальнего отсечения.

Теперь добавим элемент визуализации, так называемый рендер. Он используется для отрисовки сцены:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Создание куба на three.js

Чтобы создать куб, создадим BoxGeometry. Это объект, который содержит все вершины и грани куба:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

В дополнение к геометрии нам нужен материал для его окраски:

var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

На основе геометрии и материала создадим меш куба:

var cube = new THREE.Mesh( geometry, material );

добавим его на сцену:

scene.add( cube );

Чтобы куб был не на весь экран, отодвинем камеру от него подальше:

camera.position.z = 5;

Отрисовка сцены и анимация куба в Three.js

Cоздать цикл, который заставит рендеринг рисовать сцену каждый раз можно так:

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

Чтобы анимировать куб, перед renderer.render(...) вставьте следующий код:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

Полный код

Можно не париться и не собираться из отдельный кусочков. Выкладываю полный код на Three.js:

<html>
<head>
<title>My first three.js app (from sitev.ru)</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
requestAnimationFrame( animate );

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render( scene, camera );
};

animate();
</script>
</body>
</html>

Ура! Работает! ))


Отправить комментарий
Наш проект: язык Cj
Cj - язык программирования (C++ & Javascript)
Новый язык программирования, для разработки веб, мобайл, десктоп-приложений, игр... подробнее...

Хотите поддержать проект?

  • Оставляйте ссылки на наш сайт
  • Станьте спонсором проекта
подробнее...

Концепция SITEV.ru

SITEV.ru - это социальная сеть для ИТ-специалистов (программистов, дизайнеров, seo-специалистов, рекламных менеджеров, маркетологов), в том числе фрилансеров, бизнесменов... а также обычных пользователей, для которых и делается ИТ

Реклама


Поиск работы по всему миру