Tutorial

Prérequis :
HTML niveau basique
SketchUp niveau basique
Un serveur et FTP niveau basique (3Dbop Visionneuse WebGL Collada ne fonctionne pas en local)
Navigateur Chrome (ou Firefox mais c'est plus lent)

---

1 Télécharger les exemples et déziper.

2 Installez les fichiers sur un serveur avec un logiciel FTP et vérifier sur Chrome que ça fonctionne.

3 Dans SketchUp créer votre modèle 3D et colorez-le avec les couleurs basiques (pour l'instant les textures ne sont pas bien prises en charge par 3Dbop).
Commencez par un modèle simple qui sera plus rapide à charger, par exemple un cube.
Attention, le premier objet créé dans SketchUp deviendra l'origine de votre projet pour sa rotation orbitale.

4 Si vous en avez créé, éclatez tout vos composants (clic droit sur le composant > Éclater)

5 Exporter votre projet en Collada (.dae) (Fichier > Exporter > Modèle 3D)
En bas à droite dans Options décochez tout sauf "trianguler toutes les faces" afin d'avoir un modèle le plus léger possible.

6 Mettez votre fichier Collada, par exemple cube.dae, dans le dossier SketchUp sur le serveur.

7 Éditez solaire.html et modifiez le chemin ligne 34

var scene = CubicVR.loadCollada("SketchUp/cube.dae","SketchUp/");

8 Vérifiez que votre projet apparaît bien.
Des parties peuvent être caché car trop longue ou votre modèle peut tout simplement ne pas apparaître. Essayez de modifier ou de recréer un nouveau modèle sur SketchUp.

9 Dans solaire.html vous pouvez modifier les coordonnées de la position de la caméra ligne 41

scene.camera.position = [0, 100, 100];

10 Dans solaire.html vous pouvez modifier la direction et l'intensité de la lumière ligne 48

scene.bindLight(new CubicVR.Light({type:CubicVR.enums.light.type.DIRECTIONAL,
intensity: 0.5,
direction:CubicVR.vec3.normalize([0,-0.5,-0.5])
}));

Dupliquez ces lignes pour ajouter une lumière.

11 Vous pouvez changer l'arrière plan du canvas en CSS ou utiliser le code couleur ligne 38

gl.clearColor(0.0, 0.7, 0.8, 1.0);

12 Vous pouvez créer une <iframe> pour intégrer la visionneuse sur votre site.

13 Vous pouvez désactiver le zoom molette dans source > CubicVR.MainLoop.js > ligne 620.
Passez le delta à 10000.

dist -= delta / 10000.0;

---

Requirements:
HTML basic level
SketchUp basic level
A server and FTP basic level (3Dbop WebGL Collada viewer not working on local)
Chrome browser (or Firefox but it's slower)

---

1 Download exemples and unzip.

2 Install the files on a server with an FTP software and verify that it works on Chrome.

3 In SketchUp create your 3D model and color it with the basics colors (for the moment the textures are not well supported by 3Dbop) .
Start with a simple model which will be faster to load, such as a cube.
Warning, the first object created in SketchUp will become the origin of your project for its orbital rotation.

4 If you created components, explode all them (right click on the component > Explode)

5 Export your project as Collada (.dae) (File > Export > 3D Model)
Bottom right in Options uncheck everything except "triangulate all sides" to have the lightest possible model.

6 Put your Collada file, for example cube.dae, in the SketchUp folder on the server .

7 Edit solaire.html and change the path on line 34

var scene = CubicVR.loadCollada("SketchUp/cube.dae","SketchUp/");

8 Verify that your project appears well .
Parts may be hidden because they are too long or your model may simply not appear. Try to modify or recreate a new model in SketchUp.

9 In solaire.html you can change the coordinates of the camera position on line 41

scene.camera.position = [0, 100, 100];

10 In solaire.html you can change the direction and intensity of the light on line 48

scene.bindLight(new CubicVR.Light({type:CubicVR.enums.light.type.DIRECTIONAL,
intensity: 0.5,
direction:CubicVR.vec3.normalize([0,-0.5,-0.5])

11 You can change the background of the canvas with CSS or use the color code line 38

gl.clearColor(0.0, 0.7, 0.8, 1.0);

12 You can create an <iframe> to embed the viewer on your site.

13 You can disable the wheel zoom here : source > CubicVR.MainLoop.js > line 620.
Change delta to 10000.

dist -= delta / 10000.0 ;