Vous souhaitez dès à présent utiliser la technologie WebGL sur vos sites.
3Dbop est une visionneuse d'objets 3D pour le web basé sur le moteur Open Source CubicVR. Elle est conçu pour afficher plus facilement des objets 3D créé avec votre logiciel favori (SketchUp, Blender...) dans les navigateurs web compatibles avec la technologie WebGL.
Fonctionnalités :
- Déplacement de l'orbite au maintien de la souris
- Zoom avec la molette (bêta)
Fonctionne pour Chrome, Firefox et IE 11 soit 65% des utilisateurs dans le monde en décembre 2013 (gs.statcounter.com).
Vous pouvez nous aider à améliorer 3Dbop.
You now want to use the WebGL technology on your sites.
3Dbop is a 3D objects viewer for web, based in the Open Source engine CubicVR. It is designed to display 3D objects created with your favorite software easier (SketchUp, Blender...) in web browsers compatible with WebGL technology.
Features:
- Moving of the orbit with maintening of the mouse
- Zoom whith the wheel (beta)
Works for Chrome, Firefox and IE 11 (65% of users worldwide in December 2013 (gs.statcounter.com)).
You can help us improve 3Dbop.
Demo
Tutorial
Developers
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
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
10 Dans solaire.html vous pouvez modifier la direction et l'intensité de la lumière ligne 48
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
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.
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
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
10 In solaire.html you can change the direction and intensity of the light on line 48
11 You can change the background of the canvas with CSS or use the color code line 38
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.
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])
}));
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])
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 ;
Developers
3Dbop Visionneuse WebGL Collada est un projet collaboratif Open Source. Il a pour but de faciliter l'intégration d'objets 3D dans des pages web.
Vous pouvez nous faire part de votre expérience utilisateur ou nous envoyer des améliorations de code, notamment JavaScript.
3Dbop version 1.2
Testé sous Chrome 31.0.1650.63 m, Firefox 25.0.1 et IE 11.0.2
Carte graphique NVIDIA GeForce GT 620
La démo CubicVR sur laquelle est basée 3Dbop
La documentation CubicVR
Exemples de points à améliorer :
JS/Collada intégration des textures (voir exemple du canard dans la démo CubicVR)
JS utilisation directe de la balise canva sur un site et redimensionnement
JS zoom molette indépendant du défilement de la page
JS intégration d'une vraie lumière ambiant à la place des 6 directionnelles
JS allègement du code
JS/.fs/.vs utilisation possible en local
SketchUp définir les conditions pour la création de modèles sans bug
Blender, 3DSmax, SolidWorks... expérience utilisateur avec d'autres logiciels
Anglais correction des traductions
Tests sur Safari, IE 10 et les navigateurs mobiles
Vous pouvez laisser un commentaire ou me contacter.
Nicolas Barré
zepply.blogspot.fr
Mon autre projet :
Spiki la langue universelle très facile
3Dbop WebGL Collada viewer is an Open Source collaborative project. It purpose is facilitating the integration of 3D objects in web pages.
You can share us your user experience or send us code improvements, especially JavaScript.
3Dbop version 1.2
Chrome 31.0.1650.63 m , Firefox 25.0.1 and IE11.0.2 tested
Graphic Card NVIDIA GeForce GT 620
The demo CubicVR on which is based 3Dbop
CubicVR documentation
Examples of improvements to do:
JS/Collada textures integration (see the duck example in the CubicVR demo)
JS resizing and direct use of canva
JS zoom wheel independent of page scrolling
JS a real integration of an ambient light instead of the 6 directional lights
JS a lighter code
JS / .fs / .vs possible use of 3Dbop in local
SketchUp define the conditions for the creation of models without bugs
Blender, 3DSmax, SolidWorks... user experience with other softwares
English correction of translations
Tests Safari, IE 10 and mobile browsers
You can leave a comment or contact me.
Nicolas Barré
zepply.blogspot.fr
My other project :
Spiki the universal language very easy
Vous pouvez nous faire part de votre expérience utilisateur ou nous envoyer des améliorations de code, notamment JavaScript.
3Dbop version 1.2
Testé sous Chrome 31.0.1650.63 m, Firefox 25.0.1 et IE 11.0.2
Carte graphique NVIDIA GeForce GT 620
La démo CubicVR sur laquelle est basée 3Dbop
La documentation CubicVR
Exemples de points à améliorer :
JS/Collada intégration des textures (voir exemple du canard dans la démo CubicVR)
JS utilisation directe de la balise canva sur un site et redimensionnement
JS zoom molette indépendant du défilement de la page
JS intégration d'une vraie lumière ambiant à la place des 6 directionnelles
JS allègement du code
JS/.fs/.vs utilisation possible en local
SketchUp définir les conditions pour la création de modèles sans bug
Blender, 3DSmax, SolidWorks... expérience utilisateur avec d'autres logiciels
Anglais correction des traductions
Tests sur Safari, IE 10 et les navigateurs mobiles
Vous pouvez laisser un commentaire ou me contacter.
Nicolas Barré
zepply.blogspot.fr
Mon autre projet :
Spiki la langue universelle très facile
3Dbop WebGL Collada viewer is an Open Source collaborative project. It purpose is facilitating the integration of 3D objects in web pages.
You can share us your user experience or send us code improvements, especially JavaScript.
3Dbop version 1.2
Chrome 31.0.1650.63 m , Firefox 25.0.1 and IE11.0.2 tested
Graphic Card NVIDIA GeForce GT 620
The demo CubicVR on which is based 3Dbop
CubicVR documentation
Examples of improvements to do:
JS/Collada textures integration (see the duck example in the CubicVR demo)
JS resizing and direct use of canva
JS zoom wheel independent of page scrolling
JS a real integration of an ambient light instead of the 6 directional lights
JS a lighter code
JS / .fs / .vs possible use of 3Dbop in local
SketchUp define the conditions for the creation of models without bugs
Blender, 3DSmax, SolidWorks... user experience with other softwares
English correction of translations
Tests Safari, IE 10 and mobile browsers
You can leave a comment or contact me.
Nicolas Barré
zepply.blogspot.fr
My other project :
Spiki the universal language very easy
Inscription à :
Articles
(
Atom
)