France
Joined: Nov 7, 2005
Post Count: 9426
Status:
Offline
Re: Export to HTML5 plug-in
I just released the version 1.4 of Export to HTML5 plug-in to support the new features of Sweet Home 3D 6.0, even if Sweet Home 3D JS Viewer 6.0 should make this plug-in less useful (actually, it's still useful if you want to reduce the SH3D file to render).
New features in the 3D view are shown in the following scene, mainly: - polylines and blueprint at ground can be displayed in 3D, - texts can be written on more than one line with alignment, - transformations can be applied on 3D models like doors, windows and a new mannequin - textures can be shifted along their width and height, and X offset on sky texture is used to rotate it around the azimuth.
Of course, all these features are still accessible in JavaScript through the updated API to let you read or change the data you want.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
France
Joined: Nov 7, 2005
Post Count: 9426
Status:
Offline
Re: Export to HTML5 plug-in
Source code of SweetHome3DJS project can be found in the archive SweetHome3DJS-6.1-src.zip and in SVN repository. I hoped that stopPropagation calls on key events in HomeComponent3D.js would be enough, but in some browsers, this trick is not enough.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
France
Joined: Jun 12, 2017
Post Count: 4
Status:
Offline
Re: Export to HTML5 plug-in
Thanks for the src! But it nos scrolls with an event. It just scollTo the canvas when I open my page. My sh3d is embed in the middle of my page and when I open it, the scroll is directly in the middle of the page centered to the canvas. Is it a wanted feature ?
France
Joined: Nov 7, 2005
Post Count: 9426
Status:
Offline
Re: Export to HTML5 plug-in
Thanks, it explains why I had the same issue in that page. I thought you were speaking about unwanted scrolling that may happen when the 3D view is displayed in an overlay on long pages and you press page up or down keys.
Completely removing focus might not be the best idea. Maybe it should request focus only if the 3D view is at screen.
----------------------------------------
Emmanuel Puybaret, Sweet Home 3D creator
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>View home with Sweet Home 3D HTML5 Viewer</title>
<!-- Copy the following scripts in your page header --> <script type="text/javascript" src="lib/big.min.js"></script> <script type="text/javascript" src="lib/gl-matrix-min.js"></script> <script type="text/javascript" src="lib/jszip.min.js"></script> <script type="text/javascript" src="lib/core.min.js"></script> <script type="text/javascript" src="lib/geom.min.js"></script> <script type="text/javascript" src="lib/triangulator.min.js"></script> <script type="text/javascript" src="lib/viewmodel.min.js"></script> <script type="text/javascript" src="lib/viewhome.min.js"></script>
<style type="text/css"> /* The class of components handled by the viewer */ .viewerComponent { } </style> </head>
<body> <div> <!-- Copy the following canvas and components in your page, changing their size / texts and other values if needed --> <canvas id="viewerCanvas" class="viewerComponent" width="800" height="600" style="background-color: #CCCCCC; border: 1px solid gray; outline:none" tabIndex="1"></canvas> <div id="viewerProgressDiv" style="width: 400px; position: relative; top: -350px; left: 200px; background-color: rgba(128, 128, 128, 0.7); padding: 20px; border-radius: 25px"> <progress id="viewerProgress" class="viewerComponent" value="0" max="200" style="width: 400px"></progress> <label id="viewerProgressLabel" class="viewerComponent" style="margin-top: 2px; display: block; margin-left: 10px"></label> </div> <div style="margin-top: -60px"> <input id="aerialView" class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;"/> <label class="viewerComponent" for="aerialView" style="visibility: hidden;">Aerial view</label> <input id="virtualVisit" class="viewerComponent" name="cameraType" type="radio" style="visibility: hidden;"/> <label class="viewerComponent" for="virtualVisit" style="visibility: hidden;">Virtual visit</label> <select id="levelsAndCameras" class="viewerComponent" style="visibility: hidden;"></select> </div> </div> <div style="position: absolute; bottom: 5px; text-align: center; width: 95%; z-index: -1"> <a href="http://www.sweethome3d.com">Sweet Home 3D</a> HTML5 Viewer / Version 1.2 - Distributed under GNU General Public License </div>
<!-- Copy the following script to view your home in the previous canvas --> <script type="text/javascript"> var homeUrl = "One%20Person.zip"; var onerror = function(err) { if (err == "No WebGL") { alert("Sorry, your browser doesn't support WebGL."); } else { console.log(err.stack); alert("Error: " + (err.message ? err.constructor.name + " " + err.message : err)); } }; var onprogression = function(part, info, percentage) { var progress = document.getElementById("viewerProgress"); if (part === HomeRecorder.READING_HOME) { // Home loading is finished progress.value = percentage * 100; info = info.substring(info.lastIndexOf('/') + 1); } else if (part === Node3D.READING_MODEL) { // Models loading is finished progress.value = 100 + percentage * 100; if (percentage === 1) { document.getElementById("viewerProgressDiv").style.visibility = "hidden"; } }
// Display home in canvas 3D // Mouse and keyboard navigation explained at // http://sweethome3d.cvs.sf.net/viewvc/sweethom...elp/en/editing3DView.html // You may also switch between aerial view and virtual visit with the space bar // For browser compatibility, see http://caniuse.com/webgl viewHome("viewerCanvas", // Id of the canvas homeUrl, // URL or relative URL of the home to display onerror, // Callback called in case of error onprogression, // Callback called while loading {roundsPerMinute: 0, // Rotation speed of the animation launched once home is loaded in rounds per minute, no animation if missing or equal to 0 navigationPanel: "none", // Displayed navigation arrows, "none" or "default" for default one or an HTML string containing elements with data-simulated-key // attribute set "UP", "DOWN", "LEFT", "RIGHT"... to replace the default navigation panel, "none" if missing aerialViewButtonId: "aerialView", // Id of the aerial view radio button, radio buttons hidden if missing virtualVisitButtonId: "virtualVisit", // Id of the aerial view radio button, radio buttons hidden if missing levelsAndCamerasListId: "levelsAndCameras" // Id of the levels select component, hidden if missing /*, selectableLevels: ["Level 0", "Level 1"] */ // List of displayed levels, all viewable levels if missing }); </script>
