threebox | js plugin for Mapbox GL JS | Frontend Framework library
kandi X-RAY | threebox Summary
kandi X-RAY | threebox Summary
A three.js plugin for Mapbox GL JS, using the custom layer feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of threebox
threebox Key Features
threebox Examples and Code Snippets
Community Discussions
Trending Discussions on threebox
QUESTION
I recently found out there is a very handy method in three-box for placing three.js objects on the map which is "projectToworld".
While trying to place my three.js objects using the method, I realized that the Vector3 the method returns are really huge and not on the map.
According to the documentation of threebox, it says
projectToWorld
tb.projectToWorld(lnglat) : THREE.Vector3
Calculate the corresponding THREE.Vector3 for a given lnglat. It's inverse method is tb.unprojectFromWorld.
So I decided to use this method to locate my animated object in three js canvas. But what the methods returns are really huge.
So as I expected, these values don't place the three objects on the map and all the objects disappeared because they presumably are placed at very distant locations.
How do I fix this issue?
I made a minimal code to demonstrate this issue as below.
...
- instantiating map
ANSWER
Answered 2021-Jun-12 at 22:39It's strange that no one could answer this question. So I finally figured out how to make it by myself.
The solution is in the following link.
The primary reason was that mapbox plots things not based on its vector configuration. It renders things through its matrix as follows.
var m = new THREE.Matrix4().fromArray(matrix); var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ) .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
QUESTION
I am adding multiple instances of the same GLTF model to a scene using Mapbox-gl (2.2.0) and the excellent Threebox (2.2.3) plugin.
The first model renders correctly, the second model exists in the scene, but loses textures and/or shapes.
Different models can be loaded and they do not conflict with each other, however the same behaviour occurs where the second and consecutive instances of each model lose textures and/or shapes.
Pre-Mapbox 2.0 release this was working ok, so I presume it's either a bug or a feature I've misunderstood. It would be great to get this working with 3D terrain on the newest version.
Below is the relevant code, stripped right back:
...ANSWER
Answered 2021-May-11 at 15:54Thanks for reporting such a tricky issue, in a so detailed and clear way. It helped me to identify an issue in the code of Threebox. This issue has been resolved adding a new attribute to tb.loadObj
that now accepts clone: false
. It's already available in the code repo, and it will be published as npm module v2.2.4 soon. In the meantime you can use the bundle file from github.
Your function addBike
would look like this now:
QUESTION
I´ve been trying to enable tooltips on some imported 3D models, but it isnt working.
I already enabled tooltips in threbox, and I enabled tooltips in the options for the 3d element, as shown below.
...ANSWER
Answered 2021-Jan-10 at 09:44EDIT I downloaded the page you shared in the chat, and I found many different issues and mistakes in your code.
1. You're using the wrong property to enable the selection of 3D objects, you use enableSelectingFeatures: true, //change this to false to disable fill-extrusion features selection
, that is for Mapbox fill-extrusions features as said in the comment, but not for 3D models and objects, you have to use enableSelectingObjects: true
. Only adding this, your problem with the tooltips on mouse over will be solved.
QUESTION
Im doing a project using threebox js and trying to get the shadow of 3D models imported. Following the documentation https://github.com/jscastro76/threebox/blob/master/docs/Threebox.md#threebox-methods When i create a object i change the property to TRUE (code below).
...ANSWER
Answered 2021-Jan-09 at 23:06The issue you are facing with the bus stop model from sketchfab is that it has embedded its own lighting below the ground level that is breaking the shadows from the scene in threebox.
That's what produces an issue with the shadow when the model is loaded in threebox. I have loaded all your models in threebox with no issues and showing a tooltip, including the bus stop.
If you definitely want to use that bus stop model, you will need to modify it with Threejs editor and remove the light point and then export it again.
QUESTION
I am working on a React project, In that I have to perform Increment operation and I am writing
That's logic in a store, but I don't now how to stop it's Increment after 6.
So someone please help me how to write logic to stop Incrementing after 6, its initial value
Is 1. When I am clicking the plus icon it has to Increment but it has to stop Incrementing
after number 6. For this project I am using React-Redux.
This is Buttontypes.js
...ANSWER
Answered 2020-Apr-10 at 10:08try this for your reducer :
QUESTION
I'd like to load 3D terrain onto my mapbox map, like Peter's example, however I'm hoping to find a much simpler implementation. My idea is to use mapbox's data event to get each loaded tile and simply load a three.js mesh above it.. but I need to figure out how to calculate each tile's lng/lat in order for this to work.
The data event does return a tile object (for each loaded tile) with lots of information, however, I am completely new to geospatial data and would appreciate any hints on how to get the coordinates. My guess is to use the tiles posMatrix property (a float32 array) to convert it but I'm really just grasping at straws here :)
Below are the libraries I'm using: - React - Threebox - MapboxGL
Thanks
...ANSWER
Answered 2018-May-09 at 06:08Try https://github.com/mapbox/tilebelt. Specifically tilebelt.tileToBBOX will give you the lng/lat bounds of an z/y/x tile.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install threebox
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page