threebox | js plugin for Mapbox GL JS | Frontend Framework library

 by   peterqliu JavaScript Version: Current License: MIT

kandi X-RAY | threebox Summary

kandi X-RAY | threebox Summary

threebox is a JavaScript library typically used in User Interface, Frontend Framework, Three.js applications. threebox has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can install using 'npm i threeboxnpm' or download it from GitHub, npm.

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

            kandi-support Support

              threebox has a low active ecosystem.
              It has 424 star(s) with 167 fork(s). There are 39 watchers for this library.
              OutlinedDot
              It had no major release in the last 6 months.
              There are 43 open issues and 31 have been closed. On average issues are closed in 94 days. There are 9 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of threebox is current.

            kandi-Quality Quality

              threebox has no bugs reported.

            kandi-Security Security

              threebox has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

            kandi-License License

              threebox is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              threebox releases are not available. You will need to build from source code and install.
              Deployable package is available in npm.
              Installation instructions are available. Examples and code snippets are not available.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of threebox
            Get all kandi verified functions for this library.

            threebox Key Features

            No Key Features are available at this moment for threebox.

            threebox Examples and Code Snippets

            No Code Snippets are available at this moment for threebox.

            Community Discussions

            QUESTION

            threebox "projectToWorld" returns values exceeding canvas, how do I fix this? (with sample code)
            Asked 2021-Jun-12 at 22:39

            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.

            1. instantiating map
            ...

            ANSWER

            Answered 2021-Jun-12 at 22:39

            It'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))

            Source https://stackoverflow.com/questions/67864751

            QUESTION

            Threebox and Mapbox: Why are textures and shapes disappearing on consecutive instances of the same GLTF model?
            Asked 2021-May-11 at 15:54

            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.

            Two different (but similar) models, loaded twice. The first instance of each model renders correctly, the second instance does not

            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:54

            Thanks 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:

            Source https://stackoverflow.com/questions/67463155

            QUESTION

            Threebox Tooltip in 3D models
            Asked 2021-Jan-10 at 09:44

            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:44

            EDIT 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.

            Source https://stackoverflow.com/questions/65644945

            QUESTION

            Threebox CastShadow on 3D Model
            Asked 2021-Jan-10 at 01:30

            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:06

            The 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.

            Source https://stackoverflow.com/questions/65645905

            QUESTION

            How to write a function in reducer in React-Redux
            Asked 2020-Apr-10 at 10:53

            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:08

            try this for your reducer :

            Source https://stackoverflow.com/questions/61137889

            QUESTION

            Mapbox: Get loaded tile coordinates?
            Asked 2018-Sep-04 at 13:21

            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:08

            Try https://github.com/mapbox/tilebelt. Specifically tilebelt.tileToBBOX will give you the lng/lat bounds of an z/y/x tile.

            Source https://stackoverflow.com/questions/50245182

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install threebox

            Download the bundle from dist/threebox.js and add include it in a <script> tag on your page. Several introductory examples are here. To run them, create a config.js file with your Mapbox access token, alongside and in the format of the template.

            Support

            Build the library with npm run build, or npm run dev to rebuild continuously as you develop. Both commands will output a bundle in /dist/threebox.js. Tests live here -- run index.html and check the console for test results.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
            CLONE
          • HTTPS

            https://github.com/peterqliu/threebox.git

          • CLI

            gh repo clone peterqliu/threebox

          • sshUrl

            git@github.com:peterqliu/threebox.git

          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link