Custom threebox layer for react-map-gl - three.js

I am trying to add a custom 3D object to my react-map-gl instance. Unfortunately, I can't find any examples that have successfully implemented this besides mapbox-gl-threelayer. This package is a bit outdated for my needs- it relies on an v1 instance of mapbox-gl that doesn't support 3d terrain as the current v2 package does.
Does anyone have a suggestion or recommendation on how to add 3d objects to a react-map-gl custom layer with 3d terrain enabled?

Related

Moving drone 3d Object using Spark AR framework

I am trying to rotate, scale or move Drone 3D fbx object in Spark AR.
But unable to join the patches in correct sequence .
Please help,as i am a beginner in the AR domain.
I have attached the screenshots for reference.
Open this sample project, and change 3d model to yours.

Cache scene in Three.js

PIXI.js has Container#cacheAsBitmap which causes the container to "render" itself to an image, save that, render the image instead of its children and when a child is added or removed or updated, the cache is updated.
What's the alternative for Three.js (but instead of an image it would be a mesh)?
I may not be understanding your question properly, but your reply to Sabee's answer was helpful. It sounds like you're looking to either merge multiple geometries into a single mesh or implement a form of model instancing, with the goal of reducing draw calls.
There is more than one way to accomplish this, depending on your requirements. You can merge multiple geometries into a single geometry object, and provide either one material or an array of materials (where each index corresponds to one of the merged geometries). You can also use GPU-accelerated instancing to achieve a similar effect with only a single copy of the geometry.
I'll refer to Dusan Bosnjak's excellent Medium series on instancing, which starts here: https://medium.com/#pailhead011/instancing-with-three-js-36b4b62bc127
As well, here are the three.js examples regarding instancing: https://threejs.org/examples/?q=instanc#webgl_buffergeometry_instancing_dynamic
Pixi.js is a 2D javascript library, using WebGL to render the images(frames) into html5 canvas. Three.js allows the creation of Graphical Processing Unit (GPU)-accelerated 3D animations using WebGL.
The browser cannot store rendered 3D frames, this work allows the GPU Accelerated Render Cache, which depends on what hardware's they run. Helpful post understanding what's going on behind the scenes.
But you can cahce your assets in browser like images, json objects of 3D models and etc.
In Three.js Cache class is a global object, used by assets loaders (TextureLoader, ImageLoader, AudioLoader ...), by default is disabled (false). To enable it you can set THREE.Cache.enabled = true ;
I think by default the browser should cache the textures for performance reasons, but if you want to be sure simply enable the cache by force code it in Three.js. Also the creator of Three.js answered this question.

Zest2 into E4 application

I'm doing a project with E4 and JavaFX, I want to display a graph using Zest2 but following the example AbstractZestExample need a Stage and do not see how I can use the FXViewer without creating a new scene. I want to put the viewer in a SplitPane in a specified position of the application.
By Alexander NyßenFriend
In GEF4 MVC 0.1.0, FXViewer was responsible for creating the scene, so that your use case can not be realized by using it. We have changed this for 0.2.0 (Mars.1), having exactly this use case in mind, so that the responsibility for creating the scene now lies within the responsibility of the client.
The respective changes to FXViewer are documented in https://wiki.eclipse.org/GEF/New_and_Noteworthy/3.10.1 (Fixed that FXViewer could not share a JavaFX scene) as well as https://bugs.eclipse.org/bugs/show_bug.cgi?id=472646.

What to use for creating custom 3D objects and animations?

I'm used to working with SolidWorks and Catia for 3D object and basic animations but i got a personal project that i work on where i need to build a LASER manufacturing machine and i need to make it look like it is in real life, make zoom inside the machine and see how the light gets polarized as it passes through a crystal, see how the laser beam hits the surface and particles fly of the hit surface,etc.
I thought about Unity Engine but don't know much about this area of 3D and in what program to do the models before importing into Unity, can you guys help me with better solutions ?
Thanks,
Adrian
If you want to use Unity, you can import the following file formats: .FBX, .dae, .3DS, .dxf, .obj (http://docs.unity3d.com/Manual/HOWTO-importObject.html)
From Solidworks, you can export as an STL, then import the STL into a 3d Application (ex. Blender), and in Blender you could export the model as an FBX.
I think you're able to achieve more in terms of animation with unity. You can design your model documents in SolidWorks or CATIA and save them in IGES (neutral format).

3D on Bing maps

Are there ways to get a 3D model
(maybe made by a tool like 3DVIA at)
into a 3D Bing map.
I tried following the steps at
http://msdn.microsoft.com/en-us/library/cc451896.aspx
under the heading 3DVIA and I can't find the options mentioned.
If there is a way to import 3D models on the fly it would be great?
I'm trying to do this using the SDK at
http://www.microsoft.com/maps/isdk/ajax/
The Bing Maps 3d Control has been retired so there is currently no supported 3d mode at all in Bing Maps

Resources