Визуализация 3D моделей мебели для сайтов, каталогов мебельных компаний.

– от простых до сложных –

Полноценное 3d вращение моделей для сайта

Урок будет большим и разделен на несколько частей, постепенно я буду добавлять новые.

Часть 1

Предалагаю реализацию 3d вращения для вашего сайта написанную на флеше. Итак что, же нам нужно для начала работы..

Работать мы будем с помощью 3d движка minko. Основное его отличие от остальных, это открытый код и возможность работы в браузере без дополнительных плагинов. Большим плюсом является и то, что разработчики на славу постарались. Спасибо, им за это огромное. Это значит, что помимо обычного вращения,если Вы дружите c Action Script, Вы сможете сделать свою флеш интерактивной, добавлять анимацию и другие эффекты.

Исходников с примерами на сайте разработчика предостаточно. Поэтому уверен, что Вы сможете сделать свою флеш еще более привлекательной. Ладно, приступим к самому уроку.

Самое первое, это идем по этой ссылке https://github.com/aerys и скачиваем исходники minko, -examples, -collada, -obj, -effects, -lighting и -picking

minko source

Далее скачиваем редактор //minko.io/download/ .Устанавливаем редактор. В нем мы будем импортировать модели из 3ds Max настраивать освещение, материалы и собирать сцену для флеша.

Установка исходников 3d движка подробно шаг за шагом описана на сайте разработчика //doc.minko.io/wiki/Compile_Minko%27s_Examples поэтому, я повторятся не буду.

После установки всех исходников, открываем FlashBuilder и создаем новый проект.

new project

После установки всех исходников, открываем FlashBuilder и создаем новый Action script проект. Назовем его, например, FlashRotate и жмем Finish

project name

теперь в окне Package Explorer появился наш проект FlashRotate, а в нем наш пустой AC скрипт.

Часть 2

Теперь подключим библиотеки движка к нашему проекту. Кликаем правой кнопкой по проекту и заходим в меню Properties.Библиотеки подключаются на вкладке ActionScript Build Path

Жмем Add Project и добавляем библиотеки 3d движка..

add libs

После жмем Ok

Теперь добавим swc библиотеки, которые позволят правильно работать со сценами из редактора minko. Для этого в тех же свойствах проекта, на той же вкладке ActionScript Build Path жмем на Add SWC Folder и указываем путь к библиотеке

add swc

Теперь нужно в свойствах проекта перейти на вкладку ActionScript Compiler и принудительно установить версию SDK на 11....

sdk version

Жмем Ok. Теперь наш проект готов к работе.

Часть 3

В этой части мы будем подготавливать нашу 3d модель для вставки её в Action script.

Открываем 3ds Max. Пусть для примера наша модель будет Teapot из стандартных примитовов. Добавим немного сегментов для реалистичности

teapot

Теперь можно добавить свет.. Добавим skylight, не забудьте включить cast shadows в настройках skylight

skylight

Советую, сразу установить модель в координаты 0,0,0

model axis

Применим на чайник какой нибудь матеиал, а в качестве текстуры возьмем такую..

model texture

Теперь нам нужно запечь текстуру. Другими словами надо сделать Render to texture. Выбираем наш Teapot и на вкладке Rendering жмем Render to texture

Выбираем Use Automatic Unwrap,с канал 2. Получить нам нужно Complete map, т.е. дифузную карту со всемя тенями, бликами и т.д.

render to texture

Теперь создайте еще 1 материал, а в Diffuse, положите вашу запеченую текстуру и примените на чайник

texture

Сконвертируйте модель в mesh и всё, теперь можно экспортировать наш чайник. Выбираем наш Teapot, жмем File/export/export selected и в качестве выходного формата выбираем OBJ. Такой формат позволит экспортировать модель уже с материалом.

export format

Всё отлично. Модель готова, текстура тоже. Открываем редактор minko. Можно просто перекинуть импортируемую модель в окно редактора, а можно через меню Assets / import

minko import

Если всё удачно, Ваша модель появится в списке Symbols, а напротив написано Used 0. Это значит, что модель єкспортирована в библиотеку, но еще не добавлена в сцену.

Берем из этого списка нашу 3d модель и переносим в окно проекций. По умолчанию в сцене всегда присутствует куб, он поможет вам отмасштабировать вашу модель. Теперь выберите в окне наш чайник, с правой стороны редактора откроется вкладка Properties. Смаштабируйте и прокрутите обьект так чтобы он принял приблизительно размеры куба.На этом работы для куба больше нет, можно его удалить, выбрав и нажав Delete.

Вот приблизительно так должна Ваша выглядеть сцена

minko scene

Теперь жмем File/Publish/Publish for all или другое, если Вы будете делать только для десктопов, например.

minko scene publish

Для публикации выбираете папку с Вашим проектом FlashRotate и непосредственно в папку Src

minko scene publish path

Все! Подготовка модели закончилась осталось написать код.. Но об этом в следующей части.

Часть 4

Итак, приступим к кодингу. Открываем наш проект на FlashBuilder. Пока у Вас чистый action script FlashRotate.as.

add code

Исходный код скрипта находится ниже, просто копирум его и вставляем в свой скрипт.


	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import aerys.minko.physics.World;
	import aerys.minko.physics.api.ColliderController;
	import aerys.minko.physics.constraint.force.DirectionalLinearConstantForce;
	import aerys.minko.render.Viewport;
	import aerys.minko.render.material.phong.PhongMaterial;	
	import aerys.minko.scene.controller.camera.ArcBallController;
	import aerys.minko.scene.node.ISceneNode;
	import aerys.minko.scene.node.Scene;
	import aerys.minko.scene.node.camera.Camera;
	import aerys.minko.type.loader.SceneLoader;
	import aerys.minko.type.loader.parser.ParserOptions;
	import aerys.minko.type.math.Vector4;
	import aerys.minko.type.parser.mk.MKParser;
	import aerys.minko.scene.node.Group
		
		
		
		
		
	public class FlashRotate extends Sprite
	{
		//здесь прописываем файл с нашей компилированной сценой
		[Embed(source="Teapot.mk", mimeType="application/octet-stream")]
		private static const MK : Class;
			
		private var _viewport : Viewport = new Viewport(1);
		private var _scene	: Scene	= new Scene();
		private var _camera	: Camera;
		private var _cameraController:ArcBallController;		
			
			
		public function FlashRotate()
		{
		if (stage)
		initialize();
		else
		addEventListener(Event.ADDED_TO_STAGE, initialize);
		}
		public function initialize(event : Event = null) : void
		{			
		removeEventListener(Event.ADDED_TO_STAGE, initialize);
		stage.addChildAt(_viewport, 0);
		//здесь устанавливаем цвет фона и разрешение флешки
		_viewport.backgroundColor = 0xf3f3f300;
		_viewport.width = 480;
		_viewport.height = 480;
								
		initializeScene();
				
		stage.frameRate = 30;
		stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);			
				
		_camera = new Camera();
		_cameraController = new ArcBallController();
		_cameraController.bindDefaultControls(_viewport);
		_cameraController.distance = 10.;
		_cameraController.maxDistance = 40;
		_cameraController.minDistance = 5;
				
		_cameraController.yaw = Math.PI * -.5;
		_cameraController.pitch = Math.PI / 2;
				
		_camera.addController(_cameraController);				
		_scene.addChild(_camera);	
				
				
				
		}
			
		protected function initializeScene() : void
		{	
		// register plugin & parser
		MKParser.registerPluginController(ColliderController, ColliderController.MK_ENTRY_NAME);
		SceneLoader.registerParser(MKParser);
				
		// create physics world
		var physicsWorld : World = new World();
		physicsWorld.addGlobalForceGenerator(new DirectionalLinearConstantForce(new Vector4(0, -9.81)));
		_scene.addController(physicsWorld);
				
		// load file
		var options : ParserOptions	= new ParserOptions();
		options.material	= new PhongMaterial();
		_scene.loadClass(MK, options).complete.add(sceneLoaded);
		}
			
		private function sceneLoaded(sceneLoader : SceneLoader, dat : Group) : void 
		{
				
				
		var _cameraController : ArcBallController = new ArcBallController();
		_cameraController.bindDefaultControls(_viewport);
		// Параметры камеры
		//начальное расстояние от камеры до обьекта
		_cameraController.distance = 15.;
		//максимальное расстояние на которое можно отодвинуться от модели
		_cameraController.maxDistance = 15;
		//минимальное на которое можно приблизится
		_cameraController.minDistance = 10;
		_cameraController.yaw = Math.PI * -.5; // горизонталь			
		_cameraController.pitch = Math.PI / 2 - 0.2; //вертикаль
				
		_cameraController.inertia =1.1;
		_cameraController.interpolationSpeed = 5;
		_scene.activeCamera.addController(_cameraController);
				
				
				
				
		}
			
			
		protected function enterFrameHandler(event : Event) : void
		{
		_scene.render(_viewport);
				
		}
			
	}
			

Итак, жмем на Run

run project

Скорее всего у Вас появится ошибка:

error

Чтобы избавится от этой напасти, открываем в нашем проекте в папке bin-debug файл FlashRotate.html через него собственно и выводится флешка. И добавляем строку:

wmode param

Теперь всё ок! Можно пользоваться. Готовая флеш лежит в той же папке bin-debug. Не забывайте, только ставить параметр wmode, везде где будете использовать флеш.

А вот и результат.

rotate model

Удачи, надеюсь Вам понравится 3d вращение модели на вашем сайте