One of the properties available on the var material = NEW THREE.MeshLambertMaterial is texture maps: {( map: new THREE.TextureLoader().load('wool.jpg') )}
We're very curious whether it would be possible to load in a texture this way and apply it to a specific object in the model?
Yes, but the way you modify materials in the Forge Viewer is a little bit different than what you would do in Three.js.
I have an extensive sample that illustrates how to modify materials, including custom textures here:
Viewing.Extension.Material
The live demo is there. To use it, load a model first with "Model Loader" +, then activate either "Theming color", "Material color" or "Texture" and pick a component of the loaded model. You can click in the square in each option to change color/texture.
Related
I would like to link between elements from the 2D sheet and 3D model, so when I select the element from 2D it should reflect and select (isolate) in the 3D also if I change the color it does the same on both e.g. and the other way around.
so I can use the document browser extensions to open the 2d sheet on 1st viewer and the 3d model on the 2nd viewer:
const firstModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv1'));
const secondModel = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv2'));
Autodesk.Viewing.Initializer(options1, function() {
viewer1.start();
viewer1.load(...);
});
Autodesk.Viewing.Initializer(options2, function() {
viewer2.start();
viewer2.load(...);
});
if the example above is correct I am still missing how to links both viewers.
I hope someone could help me with this issue
Note that we have a viewer extension that might already give you what you're looking for: https://github.com/Autodesk-Forge/forge-extensions/blob/master/public/extensions/NestedViewerExtension/README.md.
If you want to implement the cross-selection between two viewer instances yourself, you can. Just subscribe to the SELECTION_CHANGED event in one of the viewers, get the selected IDs, and select the same IDs in the other viewer using the usual viewer.select([...]); method.
Btw. regarding your code snippet:
the Autodesk.Viewing.Initializer only needs to be called once per the entire webpage
the Autodesk.Viewing.Private.GuiViewer3D instances should be created after the initializer has done its work
In the viewable, the model has three leaf nodes that are named “Solid1” but have a parent name of “Tread”, how do I search by parent name to get the dbId?
Following the answer from Default material for model in Forge Viewer I can see that we can set a color. Is it possible to instead apply a texture?
Thanks!
The Viewer has a search() function so you can search for any component based on its properties. You can then go up and down the instance tree to go from Thread to Solid1 or vice versa. See e.g.
https://forge.autodesk.com/blog/selection-override
Yes, you can also use texture for materials. See e.g. https://github.com/Autodesk-Forge/library-javascript-viewer-extensions/blob/master/src/Autodesk.ADN.Viewing.Extension.Material/Autodesk.ADN.Viewing.Extension.Material.js#L273
That code is used in this sample https://forge-rcdb.autodesk.io/configurator?id=58c7ae474c6d400bfa5aaf37
Just enable the "Material" extension by clicking on it, then you will be able to assign textured materials to faces.
i am using a CesiumJS instance to display a base map of the earth using a imageryProvider from source A.
var viewer = new Cesium.Viewer('cesiumContainer', imageryProvider:providerA);
Now while using the Viewer I would like to be able to change this map to get images from providerB at a certain event.
I tried:
viewer.scene.imageryLayers.get(0).imageryProvider.url = providerB.url
However that does not seem to work and also feels quite like hack anyway.
I could not find anything in Cesium's documentation .
Is this at all possible without restarting / recreating the viewer instance?
I know that there is a Cesium.BaseLayerPicker (https://cesium.com/docs/cesiumjs-ref-doc/BaseLayerPicker.html)
However I do not see what method this picker calls on "select" )
Thanks a lot.
The BaseLayerPicker widget calls this code when the user selects a new layer.
There's a lot of boilerplate widget management in that block of code, but for your sake, only a couple of the lines are critical. First, the old existing active imagery layer is searched for, and removed:
imageryLayers.remove(layer);
Then, a new imagery provider is constructed and added at index 0, the first position, which is the base imagery layer:
imageryLayers.addImageryProvider(newProviders, 0);
You can directly change the URL of the provider but you should also change appropriate parameters("layers" in case of WMS, "layer", "style", "format", "tileMatrixSetID " ... in case of WMTS) depending on the type of provider(WMS or WMTS).
I want to override the color of a component in the viewer, in order to conserve the same rendering effect than other components I would like to clone an existing material and simply modify the color of the clone.
I can change the color of an existing material as follow:
var renderProxy =
viewer.impl.getRenderProxy(
model, fragIds[0])
renderProxy.material.setHex(0xFF0000)
This affects all other components in the model which are using that material, which is not the desired result.
For that purpose I would like to clone material, modify it and affect the new material to a specific component. Invoking the material.clone() method is working:
var newMat = renderProxy.material.clone()
newMat.setHex(0xFF0000)
But the new material will loose all the specific properties that makes it look nice by the renderer.
So my question "is there a way to -easily- clone a viewer material without writing the cloning code for each property"?
You will need to clone the 'prism' material, rather than the 3js phong-material.
Start with this repo: https://github.com/wallabyway/fusion-chair-configurator
as an example, to create a 'metal' material, use these two lines of code (and copy the initPaint() function).
https://github.com/wallabyway/fusion-chair-configurator/blob/c6d5bd575cdf40194c9fbdd1c5f9bb27c70b356e/docs/js/app.js#L107-L108
The szPrism json string, contains lots of parameters. Prism materials are rather complex, but you can find out more about what these parameters do by understanding this article for the Autodesk Cloud Render ART help page (the real-time renderer built inside Revit2019, Fusion360, etc)...
http://help.autodesk.com/view/ARENDERING/ENU/?guid=GUID-49345267-CE6A-4006-BB58-5BEAFD8B0D0E
Try experimenting with Fusion360's 'render' mode. Start by opening 'appearance' and creating some custom materials. You can modify their parameters in real-time to better understand what they do and get the effect you are looking for.
Here is a tutorial video on Fusion360 custom materials: https://www.youtube.com/watch?v=D9AS5rQhtPo
Let me know if that helps.
I am a newbie regarding three.js and I have a problem with imported geometry (js-file from 3dsmax inclusive all material and textures) and the CanvasRenderer. The CanvasRenderer displays the triangle edges of imported geometry, the WebGLRenderer works well.
Canvas example:
http://der-n.square7.ch/threejs/examples/teapot_canvas.html
WebGL example:
http://der-n.square7.ch/threejs/examples/teapot_webgl.html
In the three.js library I have found the option "overdraw: true" for a material to fix this behaviour but obviously the material+textures are defined by the above mentioned exported 3dsmax js-file.
For the tests I use the "misc_camera_trackball" example with small changes (I have added a JSONLoader, changed some camera and trackball parameters, changed some light colors, added a CanvasRenderer)
Any hints how to solve this?
Thanks for your help.
Best regards
Oggy
In the loader callback, you have all of the loaded materials in an array geometry.materials. You could loop over those materials and set the overdraw property to true for each.
As far as I know, THREE.MeshFaceMaterial is just a pass-through material that indicates "faces have an index that points to a material instance to use from the geometry's materials array", so setting properties for MeshFaceMaterial won't have any effect.