# ShangShou Treasure 3D Web App **URL:** \ **Category:** Demos and projects\ **Created:** [March 31, 2019, 5:58am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250 "2019-03-31T05:58:51Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [March 31, 2019, 5:58am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/1 "2019-03-31T05:58:51Z")
Hello, everyone~ This is the latest project I have made with BabylonJS: **ShangShou Treasure 3D** Here is the link to the demo site: [http://www.shangshouculture.com/](http://www.shangshouculture.com/) **The client** ShangShou (/ʃaŋˈʃəʊ/, meaning “Hands-On” in Chinese) Culture is an Oriental lifestyle product and service provider based in Beijing. **The project** ShangShou Treasure 3D is a series of mini-web-apps to showcase merchandise with modern WebGL technology. This is the first episode of the series and more will come every month throughout this year, each having different contents and themes. Ecommerce-related parts of the site have been reducted in this demo version to focus on the core technology - BabylonJS. **The Design** The client wants to achieve a fusion of modern 3D and traditional Chinese aesthetics, drawing inspiration mainly from the Song Dynasty(960 - 1279) era artworks. ![shangshouforumpic](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/928bdc639c8d8abe5dcc03097022ffe96892eaaa.jpeg) Utilizing photogrammetry and BabylonJS PBR system, a soft blend of photorealism and Oriental simplicity has been achieved. To accommodate users who are not familiar with 3D navigation, the control interaction has been simplified to the bare-minimum: drag to rotate, pinch to zoom and click the icons to focus on different items. All assets are optimized for mobile platforms, which is the main target platform. A device similar to or more performant than iphone 6 is adviced. **A Few More Words** This is the beginning of my exploration into the possibilities of BabylonJS, and none of it would have been possible without the AMAZING community of BabylonJS. Huge thanks to all the patient and kind people who have helped me with my noob questions.😁 If you have any suggestions or questions, please let me know. Cheers! **Edit 04/06/2019** It seems like something went wrong with the DNS provider and the link is problematic. We are trying to fix it. For the time being, please visit via: [https://shangshouculture.github.io/](https://shangshouculture.github.io/) If you are still redirected to the old url, please clear your browser cache. Thanks! **Edit 04/08/2019** DNS back to normal. The original link should work fine now. ---
**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\ **Post date:** [March 31, 2019, 7:47am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/2 "2019-03-31T07:47:56Z")
nice effect for load and Perfect Culture behind the models 😃 ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 31, 2019, 9:20pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/3 "2019-03-31T21:20:01Z")
This is fantastic and you deserve to be on our homepage Do you mind doing a PR here? > (screenshot must be a 800x500 image) ---
**Author:** ![withADoveInOneHand](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/withadoveinonehand/32/1243_2.png) [@withADoveInOneHand](https://forum.babylonjs.com/u/withADoveInOneHand)\ **Post date:** [March 31, 2019, 9:36pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/4 "2019-03-31T21:36:12Z")
Really clean I love it. ---
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [March 31, 2019, 11:13pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/5 "2019-03-31T23:13:02Z")
Thanks guys for your kind words. @Deltakosh, absolutely. It will be an honor. ---
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [April 1, 2019, 1:09am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/6 "2019-04-01T01:09:06Z")
@Deltakosh I have made a PR to add the demo. I’m really clumsy with github, please let me know if there are any mistakes. Thanks! ---
**Author:** ![satguru](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@satguru](https://forum.babylonjs.com/u/satguru)\ **Post date:** [April 1, 2019, 1:39am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/7 "2019-04-01T01:39:33Z")
Elegant ! ---
**Author:** ![Vinc3r](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vinc3r/32/25340_2.png) [@Vinc3r](https://forum.babylonjs.com/u/Vinc3r)\ **Post date:** [April 1, 2019, 7:58am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/8 "2019-04-01T07:58:24Z")
I love the design, color scheme & atmosphere, very nice job! One thing: when I show objects `Info` all works fine on Chrome & Edge, but my FPS drops a lot on Firefox. ---
**Author:** ![BlueMagnificent](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bluemagnificent/32/1425_2.png) [@BlueMagnificent](https://forum.babylonjs.com/u/BlueMagnificent)\ **Post date:** [April 1, 2019, 8:23am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/9 "2019-04-01T08:23:32Z")
Nice and elegant ---
**Author:** ![NRA](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nra/32/25376_2.png) [@NRA](https://forum.babylonjs.com/u/NRA)\ **Post date:** [April 1, 2019, 11:26am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/10 "2019-04-01T11:26:24Z")
@hcmetal Nice job, congrats! ---
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [April 1, 2019, 11:53am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/11 "2019-04-01T11:53:39Z")
Thanks for all the kind comments! @Vinc3r, thanks for the heads up. You are very thorough. 👍 Some mac users also reported the same issue on safari. I think it is mainly caused by the dynamic texture tags linked to the mesh, showing dimensions. I haven’t had the time to dive into it, maybe it is rather cpu dependent. ---
**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\ **Post date:** [April 4, 2019, 8:27pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/12 "2019-04-04T20:27:44Z")
Beautiful work and damn it loads fast! ---
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [April 5, 2019, 12:16am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/13 "2019-04-05T00:16:57Z")
Thanks @inteja! Assets are optimized for mobile access. The model + texture files are about 3.1MB in size. ---
**Author:** ![zeser](https://avatars.discourse-cdn.com/v4/letter/z/839c29/32.png) [@zeser](https://forum.babylonjs.com/u/zeser)\ **Post date:** [September 6, 2019, 5:20pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/14 "2019-09-06T17:20:38Z")
@hcmetal Hi, beautiful job! Can you say some guidelines of how did you make it? ---
**Author:** ![hcmetal](https://avatars.discourse-cdn.com/v4/letter/h/3be4f8/32.png) [@hcmetal](https://forum.babylonjs.com/u/hcmetal)\ **Post date:** [September 27, 2019, 6:46am UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/15 "2019-09-27T06:46:52Z")
Hi, zeser, thanks for checking out my project. The basic workflow is: - Photogrammetry for model input; - Houdini for model optimization and output; - Babylon js for 3d; - React for the whole app. If you are interested in any particular part of the process, I am happy to discuss the details with you. Saddly, real life has caught up with me and more episodes of this series are on pause for now, but not all hope is lost. 😀 ---
**Author:** ![zeser](https://avatars.discourse-cdn.com/v4/letter/z/839c29/32.png) [@zeser](https://forum.babylonjs.com/u/zeser)\ **Post date:** [November 20, 2020, 10:41pm UTC](https://forum.babylonjs.com/t/shangshou-treasure-3d-web-app/2250/16 "2020-11-20T22:41:20Z")
Hi, thanks for your answer. I have a problem; every time that you select a model, the app reloads the models again and accumulating the size. I am using Promise and loadAssetsContainer with react hooks. Any idea why? Thanks