kovacsv / JSModeler

A JavaScript framework to create and visualize 3D models.
MIT License
648 stars 124 forks source link

SVGToModel : SVG with pattern doesnt display the texture #4

Closed saadfaisal closed 9 years ago

saadfaisal commented 9 years ago

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 ?

kovacsv commented 9 years ago

Unfortunately pattern handling is not supported currently, but you can set textured materials manually for each bodies. For example you can set a new material for the first body like this:

var modelAndMaterials = JSM.SvgToModel (svgObject, height, segmentLength);

var model = modelAndMaterials[0];
var materials = modelAndMaterials[1];

var newMaterialIndex = materials.AddMaterial (new JSM.Material ({
    texture : 'texture.jpg',
    textureWidth : 100.0,
    textureHeight : 100.0
}));

model.GetBody (0).SetPolygonsMaterialIndex (newMaterialIndex);
saadfaisal commented 9 years ago

Tried as you suggested but getting TypeError: l is undefined jsmodeler.js:196

Here is my code

var svgObject = document.getElementById ('svgid');
var modelAndMaterials = JSM.SvgToModel (svgObject, 35, 5);
// ---------------
var model = modelAndMaterials[0];
var materials = modelAndMaterials[1];

var newMaterialIndex = materials.AddMaterial (new JSM.Material ({
    texture : 'img/egyptian_marble_128.jpg',
    textureWidth : 128.0,
    textureHeight : 128.0
}));

model.GetBody (0).SetPolygonsMaterialIndex (newMaterialIndex);    

var meshes = JSM.ConvertModelToThreeMeshes (model, materials);
viewer.AddMeshes (meshes);

viewer.FitInWindow ();
viewer.Draw ();
kovacsv commented 9 years ago

Its strange. It works for me with the current version. Which version do you use? On which part of this code you get this error?

saadfaisal commented 9 years ago

Using the latest version JSModeler 0.32.183. and the error is on the following line

var meshes = JSM.ConvertModelToThreeMeshes (model, materials);
kovacsv commented 9 years ago

I have no idea what went wrong. Maybe if you could send me the whole code...

saadfaisal commented 9 years ago

Somehow the newMaterialIndex is coming out as undefined, very strange.

saadfaisal commented 9 years ago

how can i send it to you ?

kovacsv commented 9 years ago

Ok, I think I figured out what is the problem. I have used the developer version where the AddMaterial returns the added index :) So I think you should modify your code:

materials.AddMaterial (new JSM.Material ({
    texture : 'texture.jpg',
    textureWidth : 128.0,
    textureHeight : 128.0
}));
var newMaterialIndex = materials.Count () - 1;
saadfaisal commented 9 years ago

Thanks , got it working.