3d обект на сайта (без флаш)
На уебсайтовете на много онлайн магазини можете да видите интерактивни изображения на продукти, които могат да се въртят с курсора на мишката и да се разглеждат от всички страни. Като тези снимки например:
Този ефект ме заинтересува и намерих един начин да внедря 3d обект на сайта. Някои знаещи момчета от проекта beono.ru направиха съответен скрипт, който успях да приложа. Самият сайт beono.ru днес не е достъпен и не знам нищо друго за създателите на скрипта.
За да приложим въртенето на обект на сайта, имаме нужда от:
Взех Nikon Coolpix 7700 - добра сапунерка. Стативът е най-малкият обикновен изрод с гъвкави крака - напълно е достатъчен, въпреки че ако имате добър статив, няма да е по-лошо.
Грамофонът се състои от основа и въртяща се маса с ъглови маркировки, например през 20 градуса, или през 10, или през произволен брой градуси, основното е, че сегментите са еднакви. Направих едно от лего, лист хартия с маркировки и скоч.
Общата процедура за създаване на интерактивен 3d обект на сайта:
1. Поставете обекта в центъра на въртене на въртящата се маса, така че оста на обекта и оста на въртене на масата да съвпадат. Поставете камерата в ръчен режим - така че да снима всички кадри по един и същ начин, НЕ да се настройва автоматично. Завъртете масата необходимия брой пъти, в съответствие с оформлението на масата, докато снимате всяка позиция.
2. Съберете всички получени снимки във Photoshop на различни слоеве, обработете ги по същия начин, премахнете фона, направете корекции и т.н.
3. Разтегнете платното, така че да включва хоризонтално броят на вашите получени изображения е с 1 по-малък от броя на сегментите на грамофона, споредс когото сте се снимали. Например вашите рамки са с ширина 300 px, броят на сегментите е 20, което означава 300 x 19 = 5700 px, това трябва да е ширината. Подредете вашите слоеве с последователни рамки в хоризонтален ред, един след друг, и го запазете като jpg файл. Трябва да изглежда така: 4. Вземете папката със скрипта и свързаните с него файлове на тази връзка - . Качете в основната директория на сайта. В папката с изображения, тази в папката със скрипта, попълнете картинката от стъпка 3.
5. Редактирайте файла 123.htm - намерете там пътя до снимката с разширение jpg и променете името на тази снимка с името на файла от стъпка 3. можете също да промените името на файла 123.htm
6. Залепете на сайта. Не съм програмист, не можах да вмъкна запис в блога директно - вмъкнах го през iframe. Ето кода:
Ето го: style=”float: left; поле: 0 20px 20px 0;” - необходимо за обвиване на текст и не е задължително.