What I am asking is similar to Can I serve RSS in JSON? but I am not sure he is trying to achieve the same thing as me. I want to create a globe news app where a user can hover over different countries on a 3D globe and they can see the top news stories from the country that day, I am using three js’ globe gl for the 3D globe and the country labels, I have found some good news widgets I want to embed under each country label: https://rss.app/feed/GtCHIcNstmLwXE13 but data for the countries is in a json file and I am not sure if I can put an rss embed link into a json file, is this possible? Here is an editable example of what I have made so far: https://codepen.io/forerunrun/pen/YzayQbg ${d.agency} - ${d.program} Program
Landing on ${new Date(d.date).toLocaleDateString()}.
`)
.onLabelClick(d => window.open(d.url, '_blank'))
(elem);
fetch('https://shange- fagan.github.io/globe.news/moon_landings.json') // make the request to fetch https://raw.githubusercontent.com/eesur/country-codes-lat-long/e20f140202afbb65addc13cad120302db26f119a/country-codes-lat-long-alpha3.json
// fetch('https://raw.githubusercontent.com/eesur/country-codes-lat-long/e20f140202afbb65addc13cad120302db26f119a/country-codes-lat-long-alpha3.json')
.then(r => r.json()) //then get the returned json request header if and when the request value returns true
.then(landingSites => { // then use the request result as a callback
console.log(landingSites)
// moon.labelsData(landingSites.ref_country_codes);
moon.labelsData(landingSites);
console.log(moon.labelLabel)
// custom globe material
const globeMaterial = moon.globeMaterial();
globeMaterial.bumpScale = 10;
new THREE.TextureLoader().load('//unpkg.com/three-globe/example/img/earth-water.png', texture => {
globeMaterial.specularMap = texture;
globeMaterial.specular = new THREE.Color('grey');
globeMaterial.shininess = 15;
});
setTimeout(() => { // wait for scene to be populated (asynchronously)
const directionalLight = moon.scene().children.find(obj3d => obj3d.type === 'DirectionalLight');
directionalLight && directionalLight.position.set(1, 1, 1); // change light position to see the specularMap's effect
});
});
//moon.controls().autoRotate = false;
//moon.controls().autoRotateSpeed = 0.85;
//const animate = () => {
//requestAnimationFrame(animate);
//moon.rotation.y += 0.01;
//}
//animate();
ignore the current labels on the 3D globe they are just locations of different moon landing sites as I used the https://globe.gl/example/moon-landing-sites/index.html Example as the basic structure for my project
Any advice would be greatly appreciated.
Edit: here is a link to the live example and repo on github incase you can’t see all the files being used I.e json files- in the code pen example: repo: https://github.com/Shange-Fagan/globe.news GitHub pages live example: https://shange-fagan.github.io/globe.news/
Related
In Documentation page of Native UI Picker it says:
"The NativeUI Picker is an interface you can add to effects. It allows people using your effect to choose different options within it by selecting icons.
For example the user can tap different icons to change the texture shown in the effect"
I've made several effects with NativeUI texture "switcher", and was trying to implement NativeUI to switch not between textures, but effects (objects) themselves.
For example if I would make a FaceMesh with some texture on it, that would change with a screen tap and a particle system with another texture also with a change when the screen is tapped. How could I switch between those two using NativeUI?
I don't really like my current solution to this because it's not user friendly. I've used PatchEditor and FaceFinder, turning on/off visibility of the faceMesh and Emitter when eyebrows are raised. See the screenshot bellow:
I would really appreciate any suggestions,
Thank you!
// Load in modules
const NativeUI = require("NativeUI");
const Textures = require("Textures");
const Patches = require("Patches");
export const Diagnostics = require("Diagnostics");
// Create a number
let userNumber = 0;
const texture0 = Textures.get("number1");
const texture1 = Textures.get("number2");
const texture2 = Textures.get("number3");
const index = 0;
const configuration = {
selectedIndex: index,
items: [
{ image_texture: texture0 },
{ image_texture: texture1 },
{ image_texture: texture2 }
]
};
const picker = NativeUI.picker;
picker.configure(configuration);
picker.visible = true;
picker.selectedIndex.monitor().subscribe(function(index) {
userNumber = index.newValue;
// Send the number to the Patch Editor under the name 'userNumber'
Patches.setScalarValue("userNumber", userNumber);
// Debugging
Diagnostics.log("user selection = " + index.newValue);
});
Using NativeUI picker. The code above will output index value as userNumber(scalar) to patch editor.
Examples:
If user pick number 1 the output of userNumber will be 0,
If user pick number 2 the output of userNumber will be 1,
If user pick number 3 the output of userNumber will be 2,
etc.
You can use userNumber as switch combine with equal exactly
NativeUI Picker as Switch Picture
I'm using the Forge Viewer to display simple geometry extractions from buildings.
However, when loading them the orientation of the model/view cube is not matching the expected use case (see image).
Basically I would need to swap the "Front View" with the "Top View".
Is this possible to achieve such a thing through e.g. default settings on the viewer object?
My set up is basically identical to the one in this 3rd-party react wrapper of the Forge Viewer: https://github.com/outer-labs/react-forge-viewer
Thank you already very much.
Daniel
EDIT: The model is in STP format
Basically, you can archive this with following steps via Viewer APIs after the model is loaded completely and can be separated into two parts.
(Preproccess) Get the Front view state of the Viewer that your want to make it as the Top:
a. Orient the current view to Front view: viewer.setViewCube( 'front' ).
b. Obtain current view statue of the viewport: var viewState = .getState( { viewport: true } ).
c. Save this viewState to somewhere, your js file or database.
Restore view state and set it as the Top view:
a. Obtain the viewState from somewhere (e.g. js file or database) that you got from the step1.
b. Restore view state via viewer.restoreState( viewState ).
c. Set the current view as Top view: viewer.autocam.setCurrentViewAsTop().
d. Set the current view as Home to avoid the state of the viewcube to be reset: viewer.autocam.setCurrentViewAsHome().
The code snippet for step2:
viewer.addEventListener(
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
function( event ) {
console.log( '%cGEOMETRY_LOADED_EVENT: !!!Geometries loaded!!!', 'color: green;' );
setTimeout(() => {
const onOrientTopViewCompleted = function() {
viewer.removeEventListener(
Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED,
onOrientTopViewCompleted
);
viewer.autocam.setCurrentViewAsTop();
viewer.autocam.setCurrentViewAsHome();
console.log( 'CAMERA_TRANSITION_COMPLETED' );
};
viewer.addEventListener(
Autodesk.Viewing.CAMERA_TRANSITION_COMPLETED,
onOrientTopViewCompleted
);
var viewState = '....'; //!<< the view state of the original `Front` view.
viewer.restoreState( viewState )
}, 1000);
});
Hope it helps!
I have have a viewer app with 8 models loaded
I have a plugin looking for the "AGGREGATE_SELECTION_CHANGED_EVENT" event
this.viewer.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, this.onSelectionBinded);
I need to be able to get access to the selected elements properties
this.viewer.getProperties(_dbId, (result) => { })
but it seams the viewer is only looking at the last loaded model not all of them.
do i have to load/switch to the other models ? and if so how.
The viewer.model is always pointed to the first loaded model with my experience. If you want to access other loaded models, you can obtain them via calling viewer.impl.modelQueue().getModels(). Afterward, call Viewer properties APIs in this way:
var allModels = viewer.impl.modelQueue().getModels();
var model = allModels[1];
model.getProperties( dbId, onSuccessCallback, onErrorCallback );
Besides, you can obtain the model instance in the function argument event of your onSelectionBinded callback. So, your onSelectionBinded can be modified to this based on the above logic:
this.onSelectionBinded = function( event ) {
var selSet = event.selections;
var firstSel = selSet[0];
var model = firstSel.model;
var dbIds = firstSel.dbIdArray;
var firstDbId = dbIds[0];
model.getProperties( firstDbId, onSuccessCallback, onErrorCallback );
}
Hope it helps!
I know this is a little late...
Another way to get properties for multi-model, is to use the aggregated method.
var DBids = viewer.impl.selector.getAggregateSelection();
I have a blog post and sample website that goes through the details:
https://forge.autodesk.com/blog/highlighting-clashes-multi-model
I have exported a model as a Three.js scene. I load it using ObjectLoader. It seems to load fine, but the textures are not applied. When I look at the json file, there are materials listed. Here is the code I have tried.
loader.load( "MyModel.json", function(obj){
var materialsFromFile = new THREE.MeshFaceMaterial(obj.materials);
// create our mesh with the loaded geometry and materials
mesh = new THREE.Mesh(obj.geometry, materialsFromFile);
scene.add(mesh);
});
UPDATE:
I have a fix for this, perhaps someone knows a better way? What I do is: first I traverse the model after loading it
obj.traverse(function(child){ initChild(child); });
In initChild(child) I do this:
if(child.material != null)
{
var childName = child.material.name;
child.material = new THREE.MeshPhongMaterial();
child.material.name = childName;
AssignMap(child.material);
}
In AssignMap(material) I first load the textures, then assign them based on the material name:
var texture_metal = new THREE.ImageUtils.loadTexture("media/texture_metal.jpg");
var texture_glass = new THREE.ImageUtils.loadTexture("media/texture_glass.jpg");
if(material.name == "metal texture")
material.map = texture_metal;
if(material.name == "glass texture")
material.map = texture_glass;
Have I gone mad? Is this is reasonable solution? I had looked all over and couldn't find much regarding using THREE.ObjectLoader() and getting mutiple textures to load correctly.
I have recently started working with backbone.js and i am finally started to get my head around after many tutorials.
One thing i am stuck on is how to use the routing to allow a list to pull different rest request.
Say i have the following in my collection
var NewsCollection = Backbone.Collection.extend({
model : News,
url: 'http://api.example.com/index.php/news/all/format/json',
});
From my understanding correct me if i am wrong backbone stores all the data pulled from the above feed into my model that extends this collection, this will all work i will pull in the feed and then display it in the view
This is where i get confused within my routing i have the following.
var NewsRouter = Backbone.Router.extend({
routes: {
"": "defaultRoute",
"news/:country_code":"updatedRoute"
},
defaultRoute: function () {
console.log("defaultRoute");
var movies = new NewsCollection()
new NewsView({ collection: movies });
movies.fetch();
//setInterval(function(){movies.fetch({success: function(){}});}, 60000);
},
updatedRoute:function (country_code) {
//confused
this.movie = this.movies.get(country_code);
}
})
I need to run the updatedRoute function when that will display a list of news based on cat of country code see below.
http://api.example.com/index.php/news/country/gb/format/json
How do i update the whole feed when a list item is click so the browser url would be.
http://localhost:8888/backbonetut/#news/gb
my list item is.
<li><a href='#news/gb'>GB</a></li>
I can get that in the updateRoute function with
this.movie = this.movies.get(country_code);
Can someone please help
You can either override the fetch function on your collection or temporarily change the url of the collection in your router action.