Load topology and trajectory files in viewer?

[MayurDange15]

Hello 3Dmol.js team, I'm facing some issues. How to load multiple file types into a single viewer instance?

For e.g.
$(function() {
let element = $('#canvas');
let config = {backgroundColor: 'black'};
let viewer = $3Dmol.createViewer(element, config);
let topologyUri = topology.pdb;
let trajectoryUri = trajectory.netcdf;

jQuery.ajax(topologyUri, trajectoryUri, {
success: function(data) {
let v = viewer;
let m = v.addModel(); /* load data /
m.AddAtoms([topologyUri, "pdb"])
v.setStyle({}, {cartoon: {color: 'spectrum'}}); / style all atoms /
m.setCoordinates(trajectoryUri, 'netcdf')
v.zoomTo(); / set camera /
v.animate({loop: "forward", reps: 1});
v.render(); / Want to show both files in the same viewer render scene /
v.zoom(1.2, 1000); / slight zoom */
},
error: function(hdr, status, err) {
console.error("Failed to load PDB " + pdbUri + ": " + err);
},
});

Ideally, this would work as I'm passing topology files first and then trajectory files later. But I'm getting only blank screen. Is it because I'm passing the files data and not putting it in textarea tag? Please help. I tried with issue #416 solution but still, I'm only getting blank screen

[dkoes]

You aren't calling jQuery.ajax properly, you aren't using the data it fetches, you are providing (presumably) URLs instead of molecular data, there is not GLModel.AddAtoms method (and you should provide the data when you create the model).

[dkoes]

Here is an example of loading a netcdf:
https://3dmol.org/tests/auto/generate_test.cgi?test=test91

[MayurDange15]

@dkoes Thank you sir, I'll take a look at it...

[MayurDange15]

@dkoes Sir, one question I'd like to ask, by any other methods we can use some different file formats, like XTC, DCD, etc?

[dkoes]

Currently, the only trajectory formats supported are mdcrd, inpcrd, pdb, netcdf, or a raw array of coordinates.

[MayurDange15]

@dkoes Thank you so much sir, for such a quick response.