kovacsv/jsmodeler

A JavaScript framework to create and visualize 3D models.

jsmodeler's Issues

How to set camera look at selected mesh?

Hello, thanks for your great work!

Could you please advise how to rotate model to desired mesh?
I use viewer with Three.

I only saw in code few predefined cameras.
Direct call to .camera.lookAt(mesh.position) does nothing.

Thanks in advance

Not sure how to do some kind of animation?

I would like to slowly rotate and object. Is there a place in the documentation that I am missing that shows how?

How to create FirstPersonControls?

How do I create a new camera in "First Person" mode? I made a move with the keyboard "W, A, S, D", but I'm having problems: the character can look to the left, right, up & down, however if we imagine the head of the character it can't be tilted
Looking forward to help, thanks in advance!

Runtime SVG nodes with path elements crashes inside SVGToModel (FireFox)

Hi , i am generating SVG nodes at runtime with stored path elements from database and generate 3D Models on the fly. This works perfectly fine with Chrome however FireFox is causing issues. Here is how i generate an SVG node, assume

function getPathNode() {
    var path = "M 197.77778,0 C 129.46031,0 71.04151,35.842624 47.291667,86.540232 L 0,86.540232 0,400 l 400,0 0,-313.459768 -51.73611,0 C 324.50663,35.842733 266.07691,0 197.77778,0 z";

    return { svgData: path };   
}

function GetNextTime() {
    return new Date().getTime();
}

function CreateSVGPreviewNode() {
    var svg_clone = null;
    var spec = getPathNode();

    var style_str = "<svg id=\"svg"+GetNextTime()+"\""
    +"xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"430\" height=\"430\""
    +"xmlns:xlink=\"http://www.w3.org/1999/xlink\""
    +"xmlns:svg=\"http://www.w3.org/2000/svg\""
    +"xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\""
    +"xmlns:cc=\"http://creativecommons.org/ns#\""
    +"xmlns:dc=\"http://purl.org/dc/elements/1.1/\">"
    +"<path d=\""+ spec.svgData +"\" style=\"fill:#ffff00\" id=\"path-"+GetNextTime()+"\"></path>"
    +"</svg>";

    svg_clone = $.parseHTML(style_str)[0];

    return svg_clone;
}

However when i attempt to create a Model out of this node, the SVGToModel function crashes exactly on the following line in function "AddTransformedVertex"

var transformed = point.matrixTransform (elem.getCTM ());

its the getCTM() that returns the null and crashes the code. Any suggestion if there are any consistent ways that i can use to generate such runtime nodes and makes model out of them.

Prism Generator

Hi,
Is there any way to use Prism Generator in our project (like in demo)?

Lego Brick OBJ example

The attached is just a somewhat interesting OBJ example that was created by JSModeler and modified by me to include outside and inside meshes / materials.

Feel free to use it anywhere and close this non-issue at any time.

legobrick.zip

The following pictures show what it looks like with edges applied in my OBJ viewer, while the Online 3D Viewer did show slightly different inside color.

Tests fail without any changes

Just using the latest development branch (76e906e).

sutest test/unittest/jsmodelertest.js

fails with

[ FAILED ] Visual.CubeTest (4 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:83:7

Full failures reported:

[ FAILED ] Visual.CubeTest (4 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:83:7
[ FAILED ] Visual.DrawingTest (4 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:100:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:101:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:102:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:103:7
[ FAILED ] Visual.CutBodyByPlaneTest (45 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:111:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:116:7
[ FAILED ] Visual.CatmullClarkSubdivisionTestCube (5 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:122:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:124:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:126:7
[ FAILED ] Visual.CatmullClarkSubdivisionTestCubeHole (5 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:132:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:134:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:136:7
[ FAILED ] Visual.CatmullClarkSubdivisionTestPrism (7 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:152:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:154:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:156:7
[ FAILED ] Visual.BooleanOperationTest (45 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:165:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:167:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:169:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:173:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:175:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:177:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:183:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:185:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:187:7
[ FAILED ] Visual.GeneratorFunctionTest (47 ms)
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:224:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:225:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:226:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:227:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:228:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:229:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:230:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:231:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:232:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:233:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:234:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:235:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:236:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:237:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:238:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:239:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:240:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:241:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:242:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:243:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:244:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:245:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:246:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:247:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:248:7
  Assert failed
   -> /home/kaspar/projects/bath/JSModeler/test/unittest/tests/visual.js:249:7
[ ------ ] Visual (162 ms)

[ FAILED ] (1033 ms)

I am on Ubuntu 16.04, maybe it's a file-system or other system issue?

Edit: sutest is version 0.1.5, in case it's that.

How can i have a progress bar for ConvertURLListToJsonData function?

Hi,
All is in the subject. I would like to have a progress bar for this function because sometime its taking long time before the convert is ok.

Can you tell me if there is a way to do this.

Thanks.

connector function

Hi, great library! Im trying to implement a connector function like the one found in the OpenJSCAD csg.js library (OpenJSCAD.org/csg.js). Its more complex than I thought, and I am having trouble porting to JSModeler. It would be a very handy function to have for building assemblies. Any ideas?

// # class Connector
// A connector allows to attach two objects at predefined positions
// For example a servo motor and a servo horn:
// Both can have a Connector called 'shaft'
// The horn can be moved and rotated such that the two connectors match
// and the horn is attached to the servo motor at the proper position.
// Connectors are stored in the properties of a CSG solid so they are
// ge the same transformations applied as the solid
CSG.Connector = function(point, axisvector, normalvector) {
this.point = new CSG.Vector3D(point);
this.axisvector = new CSG.Vector3D(axisvector).unit();
this.normalvector = new CSG.Vector3D(normalvector).unit();
};

CSG.Connector.prototype = {
normalized: function() {
    var axisvector = this.axisvector.unit();
    // make the normal vector truly normal:
    var n = this.normalvector.cross(axisvector).unit();
    var normalvector = axisvector.cross(n);
    return new CSG.Connector(this.point, axisvector, normalvector);
},

transform: function(matrix4x4) {
    var point = this.point.multiply4x4(matrix4x4);
    var axisvector = this.point.plus(this.axisvector).multiply4x4(matrix4x4).minus(point);
    var normalvector = this.point.plus(this.normalvector).multiply4x4(matrix4x4).minus(point);
    return new CSG.Connector(point, axisvector, normalvector);
},

// Get the transformation matrix to connect this Connector to another connector
//   other: a CSG.Connector to which this connector should be connected
//   mirror: false: the 'axis' vectors of the connectors should point in the same direction
//           true: the 'axis' vectors of the connectors should point in opposite direction
//   normalrotation: degrees of rotation between the 'normal' vectors of the two
//                   connectors
getTransformationTo: function(other, mirror, normalrotation) {
    mirror = mirror ? true : false;
    normalrotation = normalrotation ? Number(normalrotation) : 0;
    var us = this.normalized();
    other = other.normalized();
    // shift to the origin:
    var transformation = CSG.Matrix4x4.translation(this.point.negated());
    // construct the plane crossing through the origin and the two axes:
    var axesplane = CSG.Plane.anyPlaneFromVector3Ds(
    new CSG.Vector3D(0, 0, 0), us.axisvector, other.axisvector);
    var axesbasis = new CSG.OrthoNormalBasis(axesplane);
    var angle1 = axesbasis.to2D(us.axisvector).angle();
    var angle2 = axesbasis.to2D(other.axisvector).angle();
    var rotation = 180.0 * (angle2 - angle1) / Math.PI;
    if(mirror) rotation += 180.0;
    transformation = transformation.multiply(axesbasis.getProjectionMatrix());
    transformation = transformation.multiply(CSG.Matrix4x4.rotationZ(rotation));
    transformation = transformation.multiply(axesbasis.getInverseProjectionMatrix());
    var usAxesAligned = us.transform(transformation);
    // Now we have done the transformation for aligning the axes.
    // We still need to align the normals:
    var normalsplane = CSG.Plane.fromNormalAndPoint(other.axisvector, new CSG.Vector3D(0, 0, 0));
    var normalsbasis = new CSG.OrthoNormalBasis(normalsplane);
    angle1 = normalsbasis.to2D(usAxesAligned.normalvector).angle();
    angle2 = normalsbasis.to2D(other.normalvector).angle();
    rotation = 180.0 * (angle2 - angle1) / Math.PI;
    rotation += normalrotation;
    transformation = transformation.multiply(normalsbasis.getProjectionMatrix());
    transformation = transformation.multiply(CSG.Matrix4x4.rotationZ(rotation));
    transformation = transformation.multiply(normalsbasis.getInverseProjectionMatrix());
    // and translate to the destination point:
    transformation = transformation.multiply(CSG.Matrix4x4.translation(other.point));
    var usAligned = us.transform(transformation);
    return transformation;
},

axisLine: function() {
    return new CSG.Line3D(this.point, this.axisvector);
},

// creates a new Connector, with the connection point moved in the direction of the axisvector
extend: function(distance) {
    var newpoint = this.point.plus(this.axisvector.unit().times(distance));
    return new CSG.Connector(newpoint, this.axisvector, this.normalvector);
}

};

Restrict Camera movment within a angle range and along an axis

Victor, I am working on a smart rendering project using JSModeler library. I want to restrict the rotation of my model ( By camera positioning) along an axis and within a angle range. Could you please give me any tips or suggest any example code? Also I am using a skybox to add a background to the scene. The problem is, whenever I am changing the viewing angle the zooming is getting reset and skybox cube is being shown on the screen. How I can persist the zooming level on the scene even though I change the viewing angle?
Any clue or code example will be really appreciated. Thanks and regards.

UCD

Npm support

Hi :) !

You've done an awesome work here, i was wondering if there will be any npm support ? ( package.json )

Thanks you and have a nice day !

Model Appear Black initially when Texture Applied

Hi , in continuation on my previous issue, now that the texture has been applied successfully, however on the first view , the model appear completely black , however as soon as you starts to move it, the texture suddenly appears with all the glory. Is there something that can be easily fixed or if somehow we can force the update for the texture. In case of single color fills, this issue doesnt exist and only happends when you apply a texture.

Can't print the models with wkhtmltopdf

For some reason, everytime that I try to print the models with wkhtmltopdf, I get the same error, tested with the examples on the sandbox and the ones created by me.

xploshioon@personal ~ $ wkhtmltopdf --javascript-delay 4000 --debug-javascript file:///home/xploshioon/Desktop/JSModeler-master/sandbox/texture.html test.pdf
Loading pages (1/6)
Warning: undefined:0 TypeError: 'null' is not an object           
Counting pages (2/6)                                               
Resolving links (4/6)                                                       
Loading headers and footers (5/6)                                           
Printing pages (6/6)
Done                   

I even tried adding the js on the html directly and adding it to the end of the page, to be sure that the elements are rendered first. it's weird. I am trying to print some dynamic models pdf files, but for some reason it breaks everytime, if I open the browser console, there is no errors and the model is rendered.

SVG to Model conversion brings corrupted model

Hi I have the following svg , when converting it , the model is getting corrupted , can you take a look ?
Corruption occurs both on FireFox and Chrome latest versions.

<svg height="1" width="1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" 
 style="visibility:hidden" id="svg-base-2">
<g id="layer1">
<path
 style="fill:#808000"
 d="M 14.40625,-0.0044632 C 6.42426,-0.0044632 0,5.6970258 0,12.776787 l 0,46.09375 c 0,7.07976 6.42426,12.78125 14.40625,12.78125 l 370.78125,0 c 7.98198,0 14.40625,-5.70149 14.40625,-12.78125 l 0,-46.09375 c 0,-7.0797612 -6.42427,-12.7812502 -14.40625,-12.7812502 z M 358,10.651787 c 13.80712,0 25,10.745167 25,24 0,13.254834 -11.19288,24 -25,24 -13.80712,0 -25,-10.745166 -25,-24 0,-13.254833 11.19288,-24 25,-24 z m -312.15625,0.03125 c 13.998076,0 25.34375,10.73867 25.34375,24 0,13.26133 -11.345674,24 -25.34375,24 -13.998075,0 -25.34375,-10.73867 -25.34375,-24 0,-13.26133 11.345675,-24 25.34375,-24 z m 61.875,0 187.84375,0 c 7.98199,0 14.40625,5.88416 14.40625,13.21875 l 0,21.5625 c 0,7.33458 -6.42426,13.21875 -14.40625,13.21875 l -187.84375,0 c -7.981992,0 -14.40625,-5.88417 -14.40625,-13.21875 l 0,-21.5625 c 0,-7.33459 6.424258,-13.21875 14.40625,-13.21875 z"
 id="BASE-0002" />
</g>
</svg>

I want to rotate the loaded model

I like to apply rotation in the 3d model but I cannot set it up correctly. I checked the documentation but didn't get the object rotation. I will update when it gets working anyway.
Thanks

Change Material after model is loaded.

I'm trying to load a new material for the loaded model dynamically and unable to do so. Would I have to remove and readd the meshes?

What is the License and Platform Support?

Looks like an awesome library! Just curious what license you are using and what browsers / rendering tech you require.

How can I limit the camera rotation?

I tried using THREE.OrbitControls but I can't make it work. Is it achievable? I want to limit the camera on the Y axis (not to dive under the surface). Thanks.

JSM.BooleanOperation create a lot of new polygons on the same face

I am doing a "Differnce" boolean operation with two cubes. Each has 6 faces(polygons). After the boolean, I found some faces has more than one polygons on them. It looks like a single face has been cut into serveral pieces after the boolean. Do you have plan to merge the polygons after the boolean?

SVG node ids and JSM.Model

In my CSV , i have number of nodes(paths actually) with their specific IDs, is there a way that i can refer to the created JSM.Models from JSM.SvgToModel(), using their SVG ids with something like the following

var modelAndMaterials = JSM.SvgToModel (svgObject, 5, 5);
var model = modelAndMaterials[0];

var head_model = model.GetModelById("head_node");

and in my SVG node, i have two paths with ids set to "head_node" and "body_node", so now i am sure that the JSM.Model that i have just got is for the "head_node" path.

I hope i am clear in my requirement.

Canvas Background Attributes

I'd like to use JSModeler within a web page but I'd like to change the background attributes to another colour. Is there a way of plugging this into the initial call, and if not how would it be done?

Many thanks for your work on this - it's fantastic!

GenerateSquareGrid usage

Hello @kovacsv and thank you once again for providing this library.

I have the following code:

grid = new JSM.GenerateSquareGrid(50, 1, false);
var body = JSM.ConvertBodyToRenderBody(grid);
viewer.AddBody(body);

However instead of getting a grid, I get a square plane. Am I missing something? Thanks!

Implement touch zoom

Touch based zoom should be implemented for mobile devices.

Generate axis grid

Im trying to generate grid lines for the x, y, and z axis. I have not found an easy way to accomplish this for a three.js viewer. Any suggestions? Thanks!

SvgPathSegList is now deprecated in Chrome version 48

This causes SvgToModel to break.
There is a polyfill available at: https://github.com/progers/pathseg

Download the model

Hey, How can I download the generated output and make changes to it?

Canvas background set to transparent

I would like to overlay a JSModeler canvas in a web page. It seems the default background color is white.
Is there a way for me to set it as transparent?

BooleanOperation 'union' results in overlapping triangles which is an error

After performing a BooleanOperation "union" on 2 cubes, the resulting stl file is not correct, which results in overlapping triangles errors.
Overlapping triangles can cause other code to behave oddly. In particular slicer programs if the stl output is sent to a 3d printer. Different slicers respond to this error differently.

In the attached jpg, the blue arrows are pointing at triangles that have at least 1 side that has another vertex superimposed on top of the line, but not on a vertex.
To make these correct the indicated triangles need to be replaced with 2 triangles where the extra line is from the overlapping vertex to the vertex opposite it on the labelled big triangle.
I added the dashed line to show what is required.

I believe the fix has to be in csg.js in the function JSM.BooleanOperation
although possibly it needs to be fixed in JSM.ClipPolygonWithBSPTree

but I do not understand this code enough to suggest a solution.

Touch gesture zoom should be available

It would be great if touch gestures could be used to zoom in the viewer.

ExportBodyToStl produces non-manifold stl files due to roundoff issues on the vertex

all of these vertexes I think are supposed to be the same, but because of roundoff errors in the 11+th decimal point they end up looking like different vertex, that creates tiny holes in the mesh:
vertex 0.5 -0.5000000000000001 -0.20710678118654358
vertex 0.5 0.2071067811865434 -0.5
vertex 0.5 0.2071067811865434 -0.5
vertex 0.5 0.20710678118654346 -0.5
vertex 0.5 0.2071067811865435 -0.5
vertex 0.5 0.20710678118655118 0.5
vertex 0.5 0.20710678118655124 0.5
vertex 0.5 0.20710678118655135 0.5
vertex 0.5 0.20710678118655135 0.5
vertex 0.5 0.49999999999999983 -0.2071067811865514
vertex 0.5 0.49999999999999983 -0.2071067811865514
vertex 0.5 0.5 -0.20710678118655118
vertex 0.5 0.5 -0.20710678118655118
recommended solution in exporter.js:
function fToStr(f)
{
return (+f).toExponential(11).replace(/0+e/,'e');
}
function AddTriangleToContent (normal, vertex1, vertex2, vertex3)
{
AddLineToContent ('\tfacet normal ' + fToStr(normal.x) + ' ' + fToStr(normal.y) + ' ' + fToStr(normal.z));
AddLineToContent ('\t\touter loop');
AddLineToContent ('\t\t\tvertex ' + fToStr(vertex1.x) + ' ' + fToStr(vertex1.y) + ' ' + fToStr(vertex1.z));
AddLineToContent ('\t\t\tvertex ' + fToStr(vertex2.x) + ' ' + fToStr(vertex2.y) + ' ' + fToStr(vertex2.z));
AddLineToContent ('\t\t\tvertex ' + fToStr(vertex3.x) + ' ' + fToStr(vertex3.y) + ' ' + fToStr(vertex3.z));
AddLineToContent ('\t\tendloop');
AddLineToContent ('\tendfacet');
}

unfortunately this prints "0.5" as "5.e-1" but this is necessary to get the maximum resolution. I did find that toExponential(12) does occasionally still produce an error.
The replace portion is just to remove trailing zeros thus shortening the output.

Generating geodesic figures

Hi,

First of all thanks for this amazing library!! Quick question is there any way of generate a geodesic figure like the attached ones with built in functions? or perhaps create a truncate Icosahedron with an specific number of panels?

Thanks

Can display model from result json?

I have the idea of reading the file once, then save the json file of JSModeler, then save it on the server. At the model display I just read the results from that json file, can you help me?
Because for large models it looks like JSModeler is pretty weak, or models larger than 50MB mobile devices (Mobile or tablet) are notified by the browser.

Translate a rendered scene left, right, up and down

JSModeler might have the API to shift the scene left, right or up down, but I could not find out. I have already looked into the http:/3DViewer.net page. Could you please let me know the API or the key/mouse interaction for that? I am trying to create a generalized viewer page with all sort of interaction capabilities. I do not find any You help is highly appreciated. Thank you.

3D Text Support

3D text generation should be supported.

There's no import examples, and no usage in reference

I cannot find any information about import operation.
How is it used?
Nothing in the examples and tutorials, even nothing in the docs.
Could you please provide some information?
Thanks

SVGToModel : SVG with pattern doesnt display the texture

I am using the SVG To 3D functionality and I have a pattern defined for my path , but unfortunately it doesnt get loaded and the object is displayed as black. Here are the details

<svg height="400" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" style="overflow: visible;" id="svgid">
<g id="layer1">
<path fill="url(#SvgjsPattern1011)" d="M304 146C242.5142822265625 146 189.93736267089844 176.41582489013672 168.5625 219.4375L126 219.4375L126 485.4375L486 485.4375L486 219.4375L439.4375 219.4375C418.05596923828125 176.4159164428711 365.4692077636719 146 304 146z " id="rect2985"></path>
</g>
<defs id="SvgjsDefs1001"><pattern patternUnits="userSpaceOnUse" height="100" width="100" y="0" x="0" id="SvgjsPattern1011"><image height="128" width="128" xlink:href="img/egyptian_marble_128.jpg" id="SvgjsImage1012"></image></pattern></defs>
</svg>

Any ideas if Pattern are currently supported by JSModeler ?

DAE File

Hi, is there a way to import Collada files (.dae)?

Is there a way in JSModeler to select a mesh object by mouse event?

I am just started looking at JSModeler. So far it is awesome to me. Previously I have used another Canvas/Webgl based 3D library named JSC3D. It is really lightweight compare to JSModeler. But It supports picking an mesh object by mouse event on the model. Does JSModeler provide that sort of functionality? If it does, I will appreciate if I get a sample code. It would help a lot to select a model component and edit that. Thank you very much. -- Uday

Zooming the view without using Mouse wheel scroll

Victor, I really appreciate all your help. I am implementing a smart rendering application for .obj formatted model. I just wanted to know, how to implement Zooming without using mouse wheel scroll? Is there any example code? Thanks in advance.

Runtime SVG nodes and IE Security Error

Hi

So for the Runtime SVG nodes, i convert the SVG nodes to PNG and create TextureMaps out of it. This render properly in both Firefox and Chrome however IE-11 crashes with a Security Error on the following line

        this.renderer.render(this.scene, this.camera);

in

JSM.ThreeViewer.prototype.Draw = function () {
    if (this.enableDraw) {
        null !== this.runBeforeRender && this.runBeforeRender();
        this.camera.position.set(this.cameraMove.eye.x, this.cameraMove.eye.y, this.cameraMove.eye.z);
        this.camera.up.set(this.cameraMove.up.x, this.cameraMove.up.y, this.cameraMove.up.z);
        this.camera.lookAt(new THREE.Vector3(this.cameraMove.center.x, this.cameraMove.center.y, this.cameraMove.center.z));
        var a = (new THREE.Vector3).subVectors(this.cameraMove.eye, this.cameraMove.center);
        this.directionalLight.position.set(a.x, a.y, a.z);
        this.renderer.render(this.scene, this.camera);
        null !== this.runAfterRender && this.runAfterRender();
        this.drawLoop && requestAnimationFrame(this.Draw.bind(this));
    }

upon some investigation, i thought it could be related to the Image's crossOrigin attribute, which i did try to set to 'Anonymous' but to no avail. Here is a part of the code that i am using to generate this texture image

        var image = document.createElement( 'img' );
        image.crossOrigin = 'Anonymous';
        var mapSprite = new THREE.Texture( image );
        mapSprite.needsUpdate = true;

        $(image).load(function() {

            var material = new THREE.MeshBasicMaterial( { map: mapSprite, transparent: true } );

            var bbox_head = head.geometry.boundingBox;

            var w = bbox_head.max.x - bbox_head.min.x;
            var h = bbox_head.max.z - bbox_head.min.z;

            var geo1 = new THREE.PlaneGeometry( w, h, 10 , 10 );
            var mesh = new THREE.Mesh( geo1, material);
            mesh.rotateZ(DegToRad(180));
            mesh.rotateX(DegToRad(90));

            viewer.AddMesh( mesh );
            viewer.Draw();
        });

       image.src = "data:image/svg+xml;base64,........";

any ideas or suggestions ?

Tutorial missing examples of object loading

I want to try this to load an OBJ/MTL object instead of using three.js ObjectLoader. I can't find an example of doing that. Can you point me to an example that runs locally with just JS script includes (no node.js)?

Thanks.

GenerateWireBody rendering broken

Hello again!

Just to give you a head's up, as of Firefox v50.1.0 and Chrome v55.0.2883.87, GenerateWireBody is having rendering problems. I would assume something in their latest implementation of WebGL changed, so as to impact the Line shader script.

When I run your fiddle, I get this output

All the best, and thanks in advance for any help!

svg to 3d

Hello, I am trying to use your example on svg to 3d and is working but I need to add dynamic numbers on the 3d example, I am using svg.js library to create the svg but isn't working, the diference I saw here is that the svg that is generated don't have the "d" attribute

this is the one generated
<svg id="tower" segmentlength="1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="600"><defs id="SvgjsDefs1007"></defs><text id="SvgjsText1010" font-family="Helvetica, Arial, sans-serif" fill="#ff0099" font-size="180"><tspan id="SvgjsTspan1011" dy="234" x="0">300</tspan></text></svg>

and this is the one you are using on your example

  <svg id="svgid" xmlns="http://www.w3.org/2000/svg" version="1.1" width="180" height="180" viewBox="0 0 180 180" segmentlength="1">
        <path
          style="fill:#ff0000;fill-opacity:1;stroke:none"
          d="M 30 10 C 18.92 10 10 18.92 10 30 L 10 150 C 10 161.08 18.92 170 30 170 L 150 170 C 161.08 170 170 161.08 170 150 L 170 30 C 170 18.92 161.08 10 150 10 L 30 10 z M 87.25 43.6875 L 116.25 47 L 95.65625 56.0625 L 61.46875 48.65625 L 87.25 43.6875 z M 118.25 51.09375 L 114.1875 82.6875 L 96.5625 102.375 L 97.65625 60.15625 L 118.25 51.09375 z M 59.5625 52.75 L 93.65625 60.15625 L 92.46875 102.375 L 64.5625 86.5625 L 59.5625 52.75 z M 83.4375 114.875 C 85.95539 114.87503 88.42837 115.51662 90.84375 116.78125 L 88.40625 121.5 C 87.08462 120.47463 85.75064 119.96877 84.40625 119.96875 C 83.75682 119.96877 83.16893 120.13837 82.65625 120.46875 C 82.07518 120.84475 81.81249 121.34214 81.8125 121.96875 C 81.81249 122.584 82.17415 123.08693 82.9375 123.53125 C 83.27929 123.73635 84.32226 124.09246 86.03125 124.59375 C 88.17317 125.22039 89.68228 126.13055 90.59375 127.28125 C 91.37987 128.26108 91.78123 129.52442 91.78125 131.0625 C 91.78123 135.00456 90.05727 137.55371 86.59375 138.75 C 85.38606 139.17155 84.07746 139.375 82.6875 139.375 C 79.77082 139.375 77.05761 138.51596 74.5625 136.75 L 77.15625 131.84375 C 78.97916 133.48438 80.75683 134.3125 82.5 134.3125 C 83.28612 134.3125 83.95311 134.14584 84.5 133.78125 C 85.13801 133.3711 85.46874 132.78321 85.46875 132.03125 C 85.46874 131.34766 85.11262 130.76824 84.40625 130.3125 C 83.88215 129.97072 82.99186 129.63445 81.75 129.28125 C 80.24609 128.83693 79.32486 128.51466 78.9375 128.34375 C 78.32226 128.08172 77.77669 127.7907 77.34375 127.4375 C 76.10189 126.41212 75.5 124.85483 75.5 122.78125 C 75.5 120.61656 76.15007 118.83042 77.4375 117.40625 C 78.9414 115.73147 80.93098 114.87503 83.4375 114.875 z M 64.625 115.4375 L 70.71875 115.4375 L 70.71875 131.59375 C 70.718736 132.5394 70.64517 133.30241 70.53125 133.90625 C 70.291979 135.19369 69.60806 136.33822 68.46875 137.375 C 66.999013 138.7194 65.212883 139.40625 63.09375 139.40625 C 60.587236 139.40625 58.549477 138.27018 57 135.96875 L 60.96875 131.90625 C 61.151037 133.42155 61.798172 134.1875 62.9375 134.1875 C 64.099602 134.1875 64.679029 133.26889 64.65625 131.46875 L 64.625 130.1875 L 64.625 115.4375 z M 98.5625 115.4375 L 104.53125 115.4375 L 109.28125 127.875 L 114.28125 115.4375 L 120.3125 115.4375 L 123.84375 138.78125 L 117.78125 138.78125 L 116.03125 125.34375 L 110.40625 138.78125 L 108 138.78125 L 102.625 125.34375 L 100.625 138.78125 L 94.59375 138.78125 L 98.5625 115.4375 z "
        />
      </svg>

if this "dynamic" generated is incompatible with jsmodeler, how can I achieve this?
My case, I am creating dynamic 3d models with data from backend, and need to add labels, and metrics to the 3d model, not outside, in the 3d model dinamically too.
Do you have and idea for this? I am trying to create dynamic svg (the text) and add it to the model.

thanks for your help.

Drag an object over another object.

Viktor - Is there an code example for dragging and dropping an selected object over another one? I am working on creating a building model and want to locate the openings (Door/Window) on the wall interactively. Any example code will be highly helpful. Thank you.

Canvas resize for unknown reason

I have a bootstrap modal dialog that i am using and displaying the element inside it for a 3DPreview of the meshes. However launching the dialog multiple times for the preview causes the modal-box to get shrinked. Upon investigation it seems that the canvas width and height attribute gets updated for unknown reason. Is there any specific reason for it ?

I hope i am correct in assuming that this resize is being done in JSModeler and not in bootstrap.