jscastro76 / threebox Goto Github PK

I have in my process a way to load new models on demand, but there will be a set for each location via xml, is there a way to clean up or dispose of all models, prior to loading new ones? I did see a way to completed dispose of tb, but only if you you navigating away from the site, is there a way to keep it clean as you go, and only clean up sets of models.

If the 3D objects and models can be translated and rotated, custom fill extrusions should to. (check if possible also with default composite layer)

duplicate method is not cloning properly all the attributes from

Hi,

First of all thanks for maintaining Threebox and adding some great features!

In a previous post (#25 (comment)) it was recommend that I created a simple Angular application to have a minimal reproducible example. In this application I have installed Mapbox and Threebox. The error gets thrown whenever the mouse hovers over the map, however I have also added a 3D model successfully with no errors. The error thrown is shown below.

Example repo: https://github.com/joshnice/angular_threebox

In the index.html file there is commented out code of a script tag referencing mapbox.js, if this does not have comments around it then the error is not thrown. However if Mapbox is bundled with the Angular application as in this case, I don't think the error should be thrown.

Angular Version: 10.1.0
Mapbox-gl Version: 1.12.0
Threebox Version: 2.0.5 (latest)

When the object has a displacement in its positional and pivotal center, the labels and tooltips are misplaced. This is related to issue [#17]

@jscastro76 I have a couple Questions:

1. How do I delete specific models that I have loaded, do I have to loop through all tb.world.children and look for a name, for one to remove, or is there a way to remove via name, or Id.

2. Can I group by id, and have some objects that are meant to be animated, and not, and then remove or clean via different id's. For example, here in addlayer, do all threebox objects need to be added to this id, or is there a smarter way.
   map.addLayer({
   id: 'custom_layer',
   type: 'custom',
   renderingMode: '3d'

Check if a GeoJSON source is present in mapbox viewport
Mapbox queryRenderedFeatures

Three js LOD
Mapbox LOD

Convert tube objects to dynamic through Object3D. This affects a example

Since Three.js update to v116, skinned meshes can be raycasted, but the bounding box is not updated.
Added raycasting support to THREE.SkinnedMesh. #8953
fiddle

Hi @jscastro76 ,
Thank you for maintaining this plugin.
when I add the same model to the map for 100 times by threebox.js,the memory cost 2GB.and set the number to 500,the browser crash
but add the same model to the map for 5000 times by three.js,the memory cost 162M.
Why is the gap so large and how can I improve performance?

**model file format:**glb
**model size:**4M

three.js:
memory cost 162M

threebox.js:

          //the options setting 
          let options = {
            type: "gltf", //'gltf'/'mtl'            
            obj: "./model/Freighter.glb",  //model file path
            bin: "", //replace by mtl attribute
            units: "meters", //units in the default values are always in meters
            scale: 30, //boat size
            rotation: { x: 90, y: 180, z: 0 }, //default rotation
            anchor: "center",
            customProperties: {
              clicked: false,
            },
          };

way 1:

way 2(duplicate):

Am I in the right way or there another way?
thanks again:)

insipred by this StackOverflow question

Allow to add new fill-extrusions drawing them

Is there a way to use the models built in origin for attaching to custom layers. All of our assets we have already assigned the origin to left front of a building of the 3D model in blender before we export, we can get the center of volume, but that doesn't always match perfectly, then we get the lat/lon coordinates. Since we only have center, left, right we basically have to position or tweak the position on many objects again.

Can we use the internal origin for anchoring?

@jscastro76

loadObj load many obj,but the option is same,just coordinate is different.
I change code like this,but only one model display.

Explore options to highlight an object through Outline or Postprocessing

Hi @jscastro76 ,

Thank you for maintaining this plugin.

I'm looking to edit in soldier animation example, what I'm trying to do is to get callback for every coordinates on line; so when the 3d object moved to next coordinates on line I get callback to do any things.

I read all the docs nothing implement my intent, but I found followPath is the best way to implement my goal just adding another callback fired every update.

I started implementing this on source code add this another callback but unfortunately callback always return at the end.

So it is doable?
Am I in the right place "follow path" or there another way?

P.S. the render function in "CustomLayerInterface" is the worst solution cause is "Called during a render frame allowing the layer to draw into the GL context."

Update: after digging in the code I found the "follow path" based on duration not on the line and all coordinates convert to point, is that right?

@jscastro76 Another quick question, if I want to do indoor or floors, or something like that would I just do three.js, and not threebox, since those will most likely be higher scale that mapbox's zoom levels or higher that zoom 22. See example:http://maps.septrio.com/mckinneyevents.html#20.93/33.1939133/-96.6129444/132/60

I basically want to be able to step into the building, see different floors, and add furniture, etc inside.

Enable video player in the map. Analyze options as CSS2D object or as full 3D object

Improve exception management for loadObj as it doesn't return the 3D model url

Even if Threebox is configured to allow selecting and dragging objects, the 3DObject itself should allow to block this option on demand. For that we will need to create public properties for the Object3D and these properties must be set to true or false by default depending Threebox params.

Create a new property obj.raycasted that will hide the objects from raycast and consequently it would be not selectable nor draggable

This issue was initially created to enable collisions detection between 3D objects and make it configurable through an optional param, but the conversation derived in depth calculation to avoid collisions between 3D Objects and Fill-extrusions, which is definitely needed.

This could be calculated at Threebox with an automatic option asociated with castShadow property. obj.modelSize.z will give us at any time the height of the model but like in the case of statue of liberty, we need also to add the height the model is (obj.coordinates.z)

Probably one of the most requested features ever since Mapbox compatibility with CustomLayerInterface.
We need to add this sample to Threebox code using the same sample published by Mapbox.

Could be great to integrate it with Eiffel and Statue of Liberty sample too.
Dynamic

Bundle is not working and the page has errors

this never worked as it was referring to root which is the function _addMethods.

ColladaLoader and FBXLoader have a consol.log with the version of the file that is being processed. This is completely unnecessary.

@jscastro76
I import threebox to my project,get error:(,what's wrong?

the threebox.js in static folder,it's ok:

Currently it's a const in Threebox this.map.on('load'), it should be a default value but configurable

Update all the examples updated to Mapbox-gl-js v1.11.0 and check compatibility

If I change the map.setStyle using standard mapbox tools, I loose all objects that have been added to the map. Is there a way to refresh via tb.update(); on a reload of the page after a setStyle. The only way I could get it to work was add a simple feature within style.load and then do the tb.update() within the render property. Then I get all my previous custom objects back on the map.

Is there a way to use the tb.update() outside of render on the style.load by it self.

Description

Develop an option to realistically illuminate the scene mimicking the sun position at any given lnglat, date of the year and time.
This would mean that DirectionaLight should be calculated in real time based on the date and hour (at least once the map is loaded for the first time as a one shot) and pointed to a lnglat (light.target)

Tools and references

• There are different online tools that can calculate this: SunCalc.
• Suncalc module
• This discussion in Stackoverflow: realistic lighting sunlight
  -video

In scope:

• Enable a parameter for Threebox that can be selected.
• This param should be available to be changed after the initial instantiation.
• Do an example that shows a 24 hours animation
• Ideally enabling different Timezones instead of only user timezone (calculate the timezone of a lnglat is also a problem offline, explore how to do it based on offsets).
• Analize projecting shadows (this will hide the map), it will require to traverse the scene to cast/receive shadows

Out of scope:

• Automatically refresh the map
• Consuming an online service, it must run offline

Describe the issue

Objects are always instantiated, loaded and built from scratch, even if it's not the first time we load the same url. This is quite ineffective and wasting a lot of memory, apart from the fact that produces a lot of contention freezing the browser when a big number of objects are loaded.

To Reproduce
When objects are loaded dynamically from a source using a simple loop, even if tb.loadObj is partially async as it calls to the load method of the different loaders, actually is launching in parallel a call per object to tb.loadObj that builds an object each time. The only time saved is that the object model (.fbx, .glb, ...) is cached by the browser for a second request.

for (var i = 0; i < objects.length; i++) {
	var options = {
		obj: objects[i], 
		type: 'gltf',
		scale: 0.1
	}

	tb.loadObj(options, function (model) {
		let lng = origin[0] + Math.random() * 0.4 - 0.2;
		let lat = origin[1] + Math.random() * 0.4 - 0.2;
		let alt = origin[2] + Math.random() * 0.4 - 0.2;
		tb.add(model.setCoords([lng, lat, alt]));
	})
}

This is loaded as parallel threads doing always the same call to function loadObj(options, cb)

Expected behavior
When 2 or more objects in the loop are going to load the same object url, the ideal behavior should be that the second and successive objects should be clones of the first object loaded. For this, the first object must be cached the first time and make the rest wait if they are in parallel to receive an obj.duplicate instance, without affecting the way it's implemented in the front-end code and fully asynchronous to avoid freezing the visual thread.

Related issues
#51 , #55

• Based on Mapbox changelog v.1.11.0 there is an important optimization of the shader compilation speedup #9497 that affects the performance of the different layer types

• This task affects all the examples that need to be updated and will require unit testing

Hi, as commented previously on a different post, I am currently in the process of updating from peterqliu's threebox library to this forked version, I think I may of come across a bug with the 'duplicate' function. Below is the JavaScript code from a modified example of logistics (also a google drive shareable link which contains the whole example HTML file), which duplicates a model and tires to call setCoords. However once setCoords is called an error is thrown in the console and the model is not added to the map.

Console errors:

Modified file: https://drive.google.com/file/d/1AOfWV_ISFghaDHDRJMsG6T8pIgj9Gtej/view?usp=sharing

Modified JavaScript:
`

          const origin = [-122.4340, 37.7353];

	var map = new mapboxgl.Map({
		container: 'map',
		style: 'mapbox://styles/mapbox/dark-v9',
		center: origin,
		zoom: 14,
		pitch: 60,
		bearing: 90
	});

	map.on('style.load', function () {

		map
			.addLayer({
				id: 'custom_layer',
				type: 'custom',
				renderingMode: '3d',
				onAdd: function (map, mbxContext) {

				window.tb = new Threebox(
					map,
					mbxContext,
					{ defaultLights: true }
				);

				var options = {
					type: 'gltf',
					// converted the truck example to glb but I seem to get the same error with obj files
					obj: 'models/truck.glb',
					scale: 10,
					units: 'meters',
					rotation: { x: 90, y: 180, z: 0 },
				}

				tb.loadObj(options, function (model) {
					truck = model.setCoords(origin);
					tb.add(truck);

					// const new_truck = truck; Works without duplication however only shows last added model
					const new_truck = truck.duplicate();
					tb.add(new_truck);
					// where the error is being thrown
					new_truck.setCoords([-122.4702, 37.6879]);
				})

				},
				render: function (gl, matrix) {
					tb.update();
				}
			});
	});`

Allows to add post-effects，Such as OutlineEffect ，UnrealBloomEffect

This method was made quickly to resolve a critical bug #23 but it must be refactored. Even if it works as it's now, all these members must be found by name and not by position then probably the method won't be needed

And they should be synced with the Custom Layer.

• The layer affected should be by param to be used with default composite-based or custom extrusions
• MinAltitude for the shadow could be required
• On nights explore the option to darken the whole map (sadly changing style would reload de full map)
• It will need an example

As mentioned in #39 here map.removeLayer should also be able to remove the objects in the layer, but that´s not happening as the 3D objects are in tb.world.

At the moment, I create a layer with a 3d object, and add it to the map:

my_layer = {
        id: CUBE_MODEL1_ID,
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, mbxContext)
        {
            const geometry = new THREE.BoxGeometry(0.06, 0.12, 0.06  );
             var material = new THREE.MeshPhongMaterial({
                color: color, 
                opacity: 0.15,
                transparent: true,
                side: THREE.DoubleSide
            });

            global_object = new THREE.Mesh(geometry, material);

            global_object = tb.Object3D({obj: global_object, adjustment: {x: -0.5, y: -0.5, z: 0.5}})
                .setCoords(coords)
            tb.add(global_object)
        },

        render: function (gl, matrix)
        {
            tb.update();
        }

	
 }

map.addLayer(my_layer)

Then I start adding multiple objects on the map every X ms:

every 200 ms:
     for i from 0 to 10:
          let dupObj =  global_object.duplicate();
          dupObj.setCoords(location);
          tb.add(dupObj)

My question is, why does the map become slow after adding a few hundreds of these small objects? Does it have to do with slow rendering? Or maybe the fact that "tb" object eventually becomes too large?

@jscastro76 Is there a way to load a custom url, and dataType to the model, I sort of have this working:
var options = {
obj: '../models/' + folder + '/' + filename,
type: type,
scale: scale,
units: 'meters',
rotation: { x: rotationx, y: rotationy, z: rotationz }, //default rotation
anchor: 'center'
}

                    tb.loadObj(options, function (model) {
                        model.setCoords(modelLocation);
                        model.boundingBox = null; //this removes the yellow/green box
                        model.boundingBoxShadow = null; //this removes the black floor projection box
                        model.addTooltip(tooltip, false);
                        model.addEventListener('SelectedChange', onSelectedFeatureChange, false);

                        if (hasLink) {
                            console.log('Hello, linkUrl!', linkUrl);
                            model.dataType = "Link";
                            model.url = linkUrl;
                        }

                        if (hasAnimation) {
                            model.playDefault(options = { duration: 100000 });
                            console.log('Hello, hasAnimation!', hasAnimation);
                        }

                        model.dataType = "Link";
                        model.url = linkUrl;
                        tb.add(model);
                    })

But when the loadObj runs, the link URL is always blank, I am sure it is becuase this run async, but I am just loading via an xml, and looping through each xml node to build the objects. But, I can't get the animation to start for the object, unless I hard-code it, I can't do or load the data at run time. Is there a easy way to do this, to add to options, or pass it down when load is completed.

Objects3D can have different positional and pivotal center depending on their objects. 3D loaded models pivotal center is normally defined in the model itself and for Three.js geometries, the positional and pivotal center is x/2, y/2, z/2.

For accurate and standard positioning across all 3DObjects, the center of any object must be calculated and then redefined based on a param, similar to what is done in Mapbox for (Markers)[https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker] where options.anchor could have these values 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right'

The colors are now determined hardcoded, this must be a configurable option at least per layer if not per object, similar to what is done with fill-extrusion layers

This is a how-to-do problem rather than a bug/feature request

Codepen Link: https://codesandbox.io/s/romantic-dhawan-u3pg5?file=/src/index.js

I have added a three.js object with tb.Object3D on the map, that has a function called update(), which when executed, modifies the 3D object for a certain duration (eg 4s). To loop over update(), i have used requestAnimationFrame.

However, once 4s elapses, the animation stops and doesn't loop. The timeElapsed time continues to run and the object's attributes are changed, but changes to the object is not reflected on the map. When i zoom/pan on the map, then the animation restarts.

Can you remove node_modules from the repository？

Create a new sample that demonstrates the use of geoJson features to build different layers