Is this still alive?

[jscastro76]

Hi @peterqliu! First of all, thanks for this repo! Is this repo still alive? I started months ago a project with Mapbox and Three.js. After many scars dealing with the low compatibility between both, I decided to use Threebox as a starting point and honestly, it was a real difference and inflection point to boost productivity in the project. It's fair to say that our scope was by far beyond Threebox examples and functionalities, and we also faced many issues with Threebox current version, including that it wasn't updated with Three.js latest versions.

In appreciation of all the work and time this initial repo saved us, I would love to contribute to it with all the new features we have implemented, such as:

• Update to Three.js v114
• Support for multiple format objects (FBX, GLTF, Collada, ...)
• Support for CSS2DLabels supporting rich HTML controls
• Support for Objects3D bounding box and floor projection
• Support for built-in Raycaster in loaded Objects
• Support for built-in MouseOver/Mouseout, Selected, Drag&Drop, Drag&Rotate, Wireframe in loadedObjects including events.
• Support for GeoJson standard format import and export in different layers.
• Support for Objects3D embedded animations

Apart from those features, we can add samples for multi-layer, multi-floor, Mapbox buttons, default 3D models gallery, models shadow.

If there's interest on adding these features and samples, we could work on a pull request. Best Regards, Jesus

[Akluvis]

Hi, I'd like to see these updates. Is there a way to get a copy to try out?

[jscastro76]

Thanks @Akluvis and the other ones who reacted to my post, I was waiting for @peterqliu to agree on a pull request. I have created a new fork, but honestly I think this would be the place to upload it as it's the original project. Let's wait for @peterqliu to reply and if he's not interested on continuing, I'll upload it to other repo

[KonstantinEletskiy]

@jscastro76 i'd like to see updates ! I tried a lot making shadows with mapbox, but failed - really waiting this update from you ! Thank you for sharing !

[jscastro76]

@jscastro76 i'd like to see updates ! I tried a lot making shadows with mapbox, but failed - really waiting this update from you ! Thank you for sharing !

I haven't received any reply from @peterqliu, looks he's not able to continue the project or he's not interested on the update. The only way that I have found to project shadows in Mapbox is creating a plane (in my case the floor) that receives the shadows from the light sources, and also to prepare the objects loaded to receive shadows in their meshes.

[KonstantinEletskiy]

@jscastro76 i'd like to see updates ! I tried a lot making shadows with mapbox, but failed - really waiting this update from you ! Thank you for sharing !

I haven't received any reply from @peterqliu, looks he's not able to continue the project or he's interested not on the update. The only way that I have found to project shadows in Mapbox is creating a plane (in my case the floor) that receives the shadows from the light sources, and also to prepare the objects loaded to receive shadows in their meshes.

Yes, it will be very interesting to see. I tried shadow map

As i understood you did something like https://threejs.org/examples/?q=shadow#webgl_shadow_contact ?

[jscastro76]

Yes, it will be very interesting to see. I tried shadow map

As i understood you did something like https://threejs.org/examples/?q=shadow#webgl_shadow_contact ?

Exactly, there are no shadows unless an object cast shadows and another object receives the shadow. I've prepared a fork to upload if this isn't definitely alive (I couldn't find a way to connect with @peterqliu beyond writing here), we are finishing a new major release which also includes a few more features.

[adelchamas96]

hello @jscastro76 thanks for your work i used the gltf loader to load a scene in mapbox using threebox but the problem the gltf is comming on top of 3d buildings provided by mapbox-gl heres a link for the problem. hope you can solve with this issue, thanks

[peterqliu]

@jscastro76 sorry for missing this thread! thanks for all the thought and effort you've put into this. I've been heads down on other projects recently and haven't been able to do regular contributions here, so feel free to fork. Down the road when I have more bandwidth, I may merge some of that progress back here.

[jack-beilby]

Hi @jscastro76 Were you able to share any of your work on this as yet? We have been struggling for a while without success to get things working - so it would be a great help! Looking forward to any updates. Thanks

[adelchamas96]

Hi @jscastro76 Were you able to share any of your work on this as yet? We have been struggling for a while without success to get things working - so it would be a great help! Looking forward to any updates. Thanks

hey i managed to make raycast to work with mapbox without threebox. this my code :

import {MercatorCoordinate} from 'mapbox-gl';
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

export default (building) => {
  const modelOrigin = building.coordinates;
  const modelAltitude = 0;
  const modelRotate = building.rotation;

  const modelAsMercatorCoordinate = MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude);

  const modelTransform = {
    translateX: modelAsMercatorCoordinate.x,
    translateY: modelAsMercatorCoordinate.y,
    translateZ: modelAsMercatorCoordinate.z,
    rotateX: modelRotate[0],
    rotateY: modelRotate[1],
    rotateZ: modelRotate[2],
    scale: building.scale
  };
  return {
    id: `building-3d-${building.id}`,
    building: building.id,
    type: 'custom',
    renderingMode: '3d',
    long: building.coordinates[0],
    onAdd: function (map, gl) {
      this.camera = new THREE.PerspectiveCamera(28, window.innerWidth / window.innerHeight, 0.1, 1e6);
      this.scene = new THREE.Scene();
      this.raycaster = new THREE.Raycaster();
      this.raycaster.near = -1;
      this.raycaster.far = 1e6;
      let ambientLight = new THREE.AmbientLight(0x404040, building.ambientLight);
      // directionalLight.position.set(-350, -200, 100).normalize();
      this.scene.add(ambientLight);
      let loader = new GLTFLoader();
      loader.load(
        building.url,
        function (gltf) {
          this.scene.add(gltf.scene);
        }.bind(this)
      );
      this.map = map;

      this.renderer = new THREE.WebGLRenderer({
        canvas: map.getCanvas(),
        context: gl,
        antialias: true
      });
      if (map.Layers3d.length > 0 && map.Layers3d.find((b) => b.long === building.coordinates[0])) {
        map.Layers3d = map.Layers3d.filter((b) => b.long !== building.coordinates[0]);
      }
      map.Layers3d.push(this);
      this.renderer.autoClear = false;
    },
    render: function (gl, matrix) {
      let rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
      let rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
      let rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
      const scale = new THREE.Matrix4().makeScale(modelTransform.scale, -modelTransform.scale, modelTransform.scale);
      const rotation = new THREE.Matrix4().multiplyMatrices(rotationX, rotationY, rotationZ);
      let l = new THREE.Matrix4()
        .multiplyMatrices(scale, rotation)
        .setPosition(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ);

      this.camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix).multiply(l);
      this.renderer.state.reset();
      this.renderer.render(this.scene, this.camera);
      this.map.triggerRepaint();
    },
    raycast({point}) {
      if (this.scene.visible) {
        var mouse = new THREE.Vector2();
        // // scale mouse pixel position to a percentage of the screen's width and height
        mouse.x = (point.x / this.map.transform.width) * 2 - 1;
        mouse.y = 1 - (point.y / this.map.transform.height) * 2;

        const camInverseProjection = new THREE.Matrix4().getInverse(this.camera.projectionMatrix);
        const cameraPosition = new THREE.Vector3().applyMatrix4(camInverseProjection);
        const mousePosition = new THREE.Vector3(mouse.x, mouse.y, 1).applyMatrix4(camInverseProjection);
        const viewDirection = mousePosition.clone().sub(cameraPosition).normalize();

        this.raycaster.set(cameraPosition, viewDirection);

        // calculate objects intersecting the picking ray
        var intersects = this.raycaster.intersectObjects(this.scene.children, true);
        if (intersects.length) {
          return this.building;
        } else {
          return null;
        }
      }
      return null;
    }
  };
};

[jscastro76]

Hi @jscastro76 Were you able to share any of your work on this as yet? We have been struggling for a while without success to get things working - so it would be a great help! Looking forward to any updates. Thanks

Hi @jack-beilby, I have created a fork as suggested by @peterqliu, I'll post it here as soon as it's ready with all the updates in the coming days.

[jscastro76]

@jack-beilby, @Akluvis, @KonstantinEletskiy, @adelchamas96 the code is already uploaded to Threebox Fork.

I will continue uploading the updated examples for all the new features and updating the documentation with all the new methods, properties and events, but the src folder is uploaded.

I strongly recommend you to check the updates in the doc around the new params for 3D objects loading Documentation

[jscastro76]

@jack-beilby, @Akluvis, @KonstantinEletskiy, @adelchamas96, @gismatthew, @adevin, @AmeliaWang93, @1994Sunshine, @joedjc, @bFlood, @akiosTerr, @peterpolman, @MagicBYang, @dyakovlev, @hehuasa I have uploaded my latest version to this Threebox fork. Including all the features below (some more added since the thread started):

• Update to Three.js v114.
• Update to Mapbox v1.10.0.
• All the examples updated, and one more example added with new features.
• Support for multiple format objects (FBX, GLTF/GLB, Collada + OBJ/MTL).
• Support for CSS2DLabels supporting rich HTML controls through a new LabelManager.
• Support for tooltips/title browser-like.
• Support for Objects3D bounding box and floor projection.
• Support for built-in Raycaster in loaded Objects3D and fill-extrusions together.
• Support for built-in MouseOver/Mouseout, Selected, Drag&Drop, Drag&Rotate, Wireframe in loadedObjects including events.
• Support for GeoJson standard features format import and export in different layers.
• Support for Objects3D embedded animations, and combined animations on AnimationManager (i.e. translate + embedded).
• Support for multi-floor design of spaces.
• Support for Non-AABB Non Axes Aligned Bounding Box and real model size.
• Support for wireframing on Objects3D, removing them from the raycast.
• Support for setLayerZoomRange and setLayoutProperty on Custom Layers (not available in Mapbox).
• Support for full dispose of Mapbox, Three and Threebox resources.
• Optimization of Camera perspective to have Raycast with pixel-precision level.
• Adjusted positioning for Objects3D to set center and rotation axes by config.

I have also added a new example integrating many of them soldieranimation.html

In the next days/weeks, I'll continue updating with new samples, improvements and features.

Feedback and issues are always welcome. I'll try to reply to them as soon as possible, specially if they are bugs to correct.

Thanks @peterqliu for all the work. As said, happy to merge the fork if you have time available in the future.

Jscastro

[likeswinds]

Look forward to adding post effects，like this https://threejs.org/examples/#webgl_postprocessing_unreal_bloom

[jscastro76]

Look forward to adding post effects，like this https://threejs.org/examples/#webgl_postprocessing_unreal_bloom

Hi @likeswinds, you're invited to open it as an issue at the fork and I'll label it as new feature. I'm already thinking on how to add postprocessing effects, I need my objects to be highlighted for my project. I was able to include OutlineEffect but the result was not what I was expecting, especially for 3D models, and I'm also concerned about the performance because it requires also a postprocessing. Anyway I'll give it a try again.

[jscastro76]

Look forward to adding post effects，like this https://threejs.org/examples/#webgl_postprocessing_unreal_bloom

Hi again @likeswinds. I already have a branch with BloomEffect... Honestly I don't see it very useful as it turns the map to black... but opens the door for other shaders and effects. It required to import 9 more modules, which increases a lot the size and also impacts the performance... but it works!! :)

[jscastro76]

@jscastro76 i'd like to see updates ! I tried a lot making shadows with mapbox, but failed - really waiting this update from you ! Thank you for sharing !

@KonstantinEletskiy I uploaded days ago the v.2.0.5 to my Threebox fork that includes built-in shadows support and real sunlight among many other new features.

Enjoy!

[jscastro76]

Updated version v2.0.8. in this fork, including an important performance optimization for thousands of objects.

Among many other features, enhancements and bugs resolved, and available in npm to install as a package

npm i threebox-plugin