Je kent het vast wel, je komt op een pagina, klikt op het product van je keuze en vervolgens kom je op een 3D-weergave terecht. Als je met je muis erover beweegt kun je het voorwerp 360 graden draaien. Zo krijg je een beter beeld van het product, de verhoudingen, de grootte en zelfs materialen.

Geen idee waar ik het over heb? Klik dan hier voor een aantal voorbeelden.

Zou het je niet mooi lijken om zoiets op jouw eigen website te hebben? Zeker als je een webshop hebt en meer wilt laten zien van een specifiek product, komt het je zeker van pas.
In het geval dat je het je afvraagt: het is eigenlijk helemaal niet zo heel spannend om zoiets zelf te maken. Je hebt een draaiende ondergrond nodig, een (digitale) fotocamera, een statief en een klein programmaatje van Yofla, daarover zometeen meer.

Zo maken we een 3D-weergave

• Zet de draaiende ondergrond klaar, met je product erop. De draaiende ondergrond kan eigenlijk van alles zijn, zelfs een barkruk of een platenspeler is goed te gebruiken, zolang het maar gelijk kan ronddraaien.
• Zet vervolgens je camera op een statief en plaats die op de gewenste hoogte voor je product.
• Zet eventueel een extra lamp klaar om de belichting optimaal en hetzelfde te kunnen houden.
• Maak nu een foto van het product, en draai het product vervolgens een klein stukje verder.
• Als je deze stap herhaalt tot je rond bent, krijg je het beste resultaat.
• Maak een nieuwe map aan op je computer en noem die bijvoorbeeld '3d-object'.
• Open de map '3d-object'.
• Maak vervolgens nog een map aan en noem die 'images'. Plaats daar de gemaakte foto's in.
• Ik raad je aan om de foto's eerst te verkleinen voordat je aan de volgende stappen begint. Hier vind je een artikel waarin dat wordt uitgelegd.

Je hebt nu een hoop foto's van een (steeds een stukje verder) draaiend product. We gaan deze nu samenvoegen met behulp van '3D Object Rotate' van Yofla.

• Ga naar http://www.yofla.com/flash/3d-rotate/download.php.
• Klik op 'Download now' achter '3D Rotate Free' en sla het bestand op op een makkelijk terug te vinden plaats, bijvoorbeeld je bureaublad.
• Pak het zojuist gedownloade bestand uit.
• Open de map en ga direct naar de map 'config-utility'.
• Dubbelklik nu op 'config_utility.exe'.
• Kies hier 'Choose Dir'.
• Ga naar de map waar je je foto's in hebt geplaatst en klik op 'Open'.
• De code die we nodig hebben wordt nu voor je gegenereerd.
• Klik nu op 'Save File' en sla het 'config.xml'-bestand op in de map '3d-object'.

De foto's en het config.xml-bestand staan nu op de juiste plek. Hier moeten we alleen nog een flash-bestandje aan toevoegen.

• Ga terug naar de map van '3D rotator' en ga naar de map 'examples'.
• Kopieer het 'rotateTool.swf'-bestand.
• Plak dit vervolgens in dezelfde map als het config.xml-bestand.

Voeg de interactieve 3D-weergave toe aan je website

Je bent nu klaar met de bestanden, de map kun je nu uploaden naar je server.
Maar... je bent nog niet klaar. Uiteraard moeten we de 3D-presentatie toevoegen aan de pagina waar je hem wilt laten verschijnen. Open deze pagina dan ook eerst.

Ga nu in de html-code van je pagina op de plek staan waar het terecht moet komen en plaats daar de volgende code: 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="320" height="240">
<param name="movie" value="rotateTool.swf">
<param name="quality" value="high">
<embed src="rotateTool.swf" mce_src="rotateTool.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="320"
height="240"></embed></object>

Verander de width- en height-waarden in het gewenste formaat. In dit voorbeeld gaan we uit van het feit dat je html-pagina zich in dezelfde map bevindt als rotateTool.swf en config.xml. Als dit niet het geval is, kun je dat aangeven bij value="rotateTool.swf". Geef hier aan waar rotateTool.swf zich bevindt. Houd er wel rekening mee dat rotateTool.swf en config.xml altijd bij elkaar moeten staan.

Ik wens je veel succes met het maken van interactieve 3D-weergaven!