Comments (8)
In WebGL all texture objects appear black until the texture file is loaded. You can set a callback function to conversion which is called when a texture is loaded. In the callback you should call Draw:
var meshes = JSM.ConvertModelToThreeMeshes (model, materials, {
textureLoadedCallback : function () {
viewer.Draw ();
}
});
from jsmodeler.
Tried it , but not working.
from jsmodeler.
And what happens? Are there any console error messages? Are your viewer visible in this scope with this name?
If you could not figure out what is the problem, you can force the viewer to redraw continuously by calling StartDrawLoop. In this case it will be redrawed every time, not just in case of navigation, so I think the first solution is better.
viewer.StartDrawLoop ();
from jsmodeler.
No specific error messages , there are couple of warnings from three.js but they are there since beginning
"THREE.WebGLRenderer" "68" three.min.js:520
"THREE.WebGLProgram: gl.getProgramInfoLog()" "(70,2-97): warning X3557: loop only executes for 1 iteration(s), forcing loop to unroll" three.min.js:589
My viewer however is working the same way, comes out with model as black and then as soon as you moves it around , the texture gets displayed. Second my primary working browser is Firefox however i tried using Internet Explorer and at few times , IE does display the model with texture in the first attempt say 1 out of 7 times it does, rest it remains black.
here is the code for the reference along with the svg.
SVG
<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="#ffff00" 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>
</svg>
Code
var viewerSettings = {
cameraEyePosition : [-3, -2, 1.0],
cameraCenterPosition : [0.0, 0.0, 0.0],
cameraUpVector : [0.0, 0.0, 1.0],
nearClippingPlane : 1.0,
farClippingPlane : 100000.0
};
var viewer = new JSM.ThreeViewer ();
if (!viewer.Start ('svgcanvas', viewerSettings)) {
viewer = null;
return;
}
var svgObject = document.getElementById ('svgid');
var modelAndMaterials = JSM.SvgToModel (svgObject, 35, 5);
// ---------------
var model = modelAndMaterials[0];
var materials = modelAndMaterials[1];
var mat = materials.GetMaterial(0);
materials.AddMaterial (new JSM.Material ({
texture : 'img/egyptian_marble_128.jpg',
ambient : 0xffffff,
diffuse : 0xffffff,
textureWidth : 128.0,
textureHeight : 128.0
}));
var newMaterialIndex = materials.Count () - 1;
model.GetBody (0).SetPolygonsMaterialIndex (newMaterialIndex);
var meshes = JSM.ConvertModelToThreeMeshes (model, materials , {
textureCallback: function() {
viewer.Draw ();
}
});
viewer.AddMeshes (meshes);
viewer.FitInWindow ();
from jsmodeler.
FireFox : 33.1
IE : 11
from jsmodeler.
The callback name is textureLoadedCallback, not textureCallback.
from jsmodeler.
Now i am seriously embarrassed.. deepest apologize, my BAD!!!!! Thanks for such a wonderful work.
from jsmodeler.
You welcome :)
from jsmodeler.
Related Issues (20)
- Not sure how to do some kind of animation? HOT 1
- Canvas background set to transparent
- How can I limit the camera rotation?
- Zooming the view without using Mouse wheel scroll HOT 8
- How can i have a progress bar for ConvertURLListToJsonData function?
- How to set camera look at selected mesh? HOT 2
- Restrict Camera movment within a angle range and along an axis
- Download the model HOT 3
- How to create FirstPersonControls? HOT 6
- I want to rotate the loaded model HOT 2
- Can display model from result json? HOT 1
- DAE File HOT 1
- Canvas Background Attributes HOT 2
- Tests fail without any changes
- Change Material after model is loaded. HOT 1
- Tutorial missing examples of object loading HOT 1
- ExportBodyToStl produces non-manifold stl files due to roundoff issues on the vertex HOT 1
- BooleanOperation 'union' results in overlapping triangles which is an error HOT 2
- Lego Brick OBJ example HOT 4
- Drag an object over another object. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsmodeler.