help - htm5js

xhtml html5 html java-script css

Some Mathematical Symbols Supported by HTML

Char Number Entity Description
∀ ∀ FOR ALL
∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ THERE EXISTS
∅ ∅ EMPTY SETS
∇ ∇ NABLA
∈ ∈ ELEMENT OF
∉ ∉ NOT AN ELEMENT OF
∋ ∋ CONTAINS AS MEMBER
∏ ∏ N-ARY PRODUCT
∑ ∑ N-ARY SUMMATION

 

Older browsers may not support all the HTML5 entities in the table below.
Chrome and Opera have good support, and IE 11+ and Firefox 35+ support all the entities.

Char Dec Hex Entity Name
8592 2190 ← LEFTWARDS ARROW
8593 2191 ↑ UPWARDS ARROW
8594 2192 → RIGHTWARDS ARROW
8595 2193 ↓ DOWNWARDS ARROW
8596 2194 ↔ LEFT RIGHT ARROW
8597 2195   UP DOWN ARROW
8598 2196   NORTH WEST ARROW
8599 2197   NORTH EAST ARROW
8600 2198   SOUTH EAST ARROW
8601 2199   SOUTH WEST ARROW
8602 219A   LEFTWARDS ARROW WITH STROKE
8603 219B   RIGHTWARDS ARROW WITH STROKE
8604 219C   LEFTWARDS WAVE ARROW
8605 219D   RIGHTWARDS WAVE ARROW
8606 219E   LEFTWARDS TWO HEADED ARROW
8607 219F   UPWARDS TWO HEADED ARROW
8608 21A0   RIGHTWARDS TWO HEADED ARROW
8609 21A1   DOWNWARDS TWO HEADED ARROW
8610 21A2   LEFTWARDS ARROW WITH TAIL
8611 21A3   RIGHTWARDS ARROW WITH TAIL
8612 21A4   LEFTWARDS ARROW FROM BAR
8613 21A5   UPWARDS ARROW FROM BAR
8614 21A6   RIGHTWARDS ARROW FROM BAR
8615 21A7   DOWNWARDS ARROW FROM BAR
8616 21A8   UP DOWN ARROW WITH BASE
8617 21A9   LEFTWARDS ARROW WITH HOOK
8618 21AA   RIGHTWARDS ARROW WITH HOOK
8619 21AB   LEFTWARDS ARROW WITH LOOP
8620 21AC   RIGHTWARDS ARROW WITH LOOP
8621 21AD   LEFT RIGHT WAVE ARROW
8622 21AE   LEFT RIGHT ARROW WITH STROKE
8623 21AF   DOWNWARDS ZIGZAG ARROW
8624 21B0   UPWARDS ARROW WITH TIP LEFTWARDS
8625 21B1   UPWARDS ARROW WITH TIP RIGHTWARDS
8626 21B2   DOWNWARDS ARROW WITH TIP LEFTWARDS
8627 21B3   DOWNWARDS ARROW WITH TIP RIGHTWARDS
8628 21B4   RIGHTWARDS ARROW WITH CORNER DOWNWARDS
8629 21B5 ↵ DOWNWARDS ARROW WITH CORNER LEFTWARDS
8630 21B6   ANTICLOCKWISE TOP SEMICIRCLE ARROW
8631 21B7   CLOCKWISE TOP SEMICIRCLE ARROW
8632 21B8   NORTH WEST ARROW TO LONG BAR
8633 21B9   LEFTWARDS ARROW TO BAR OVER RIGHTWARDS ARROW TO BAR
8634 21BA   ANTICLOCKWISE OPEN CIRCLE ARROW
8635 21BB   CLOCKWISE OPEN CIRCLE ARROW
8636 21BC   LEFTWARDS HARPOON WITH BARB UPWARDS
8637 21BD   LEFTWARDS HARPOON WITH BARB DOWNWARDS
8638 21BE   UPWARDS HARPOON WITH BARB RIGHTWARDS
8639 21BF   UPWARDS HARPOON WITH BARB LEFTWARDS
8640 21C0   RIGHTWARDS HARPOON WITH BARB UPWARDS
8641 21C1   RIGHTWARDS HARPOON WITH BARB DOWNWARDS
8642 21C2   DOWNWARDS HARPOON WITH BARB RIGHTWARDS
8643 21C3   DOWNWARDS HARPOON WITH BARB LEFTWARDS
8644 21C4   RIGHTWARDS ARROW OVER LEFTWARDS ARROW
8645 21C5   UPWARDS ARROW LEFTWARDS OF DOWNWARDS ARROW
8646 21C6   LEFTWARDS ARROW OVER RIGHTWARDS ARROW
8647 21C7   LEFTWARDS PAIRED ARROWS
8648 21C8   UPWARDS PAIRED ARROWS
8649 21C9   RIGHTWARDS PAIRED ARROWS
8650 21CA   DOWNWARDS PAIRED ARROWS
8651 21CB   LEFTWARDS HARPOON OVER RIGHTWARDS HARPOON
8652 21CC   RIGHTWARDS HARPOON OVER LEFTWARDS HARPOON
8653 21CD   LEFTWARDS DOUBLE ARROW WITH STROKE
8654 21CE   LEFT RIGHT DOUBLE ARROW WITH STROKE
8655 21CF   RIGHTWARDS DOUBLE ARROW WITH STROKE
8656 21D0 ⇐ LEFTWARDS DOUBLE ARROW
8657 21D1 ⇑ UPWARDS DOUBLE ARROW
8658 21D2 ⇒ RIGHTWARDS DOUBLE ARROW
8659 21D3 ⇓ DOWNWARDS DOUBLE ARROW
8660 21D4 ⇔ LEFT RIGHT DOUBLE ARROW
8661 21D5   UP DOWN DOUBLE ARROW
8662 21D6   NORTH WEST DOUBLE ARROW
8663 21D7   NORTH EAST DOUBLE ARROW
8664 21D8   SOUTH EAST DOUBLE ARROW
8665 21D9   SOUTH WEST DOUBLE ARROW
8666 21DA   LEFTWARDS TRIPLE ARROW
8667 21DB   RIGHTWARDS TRIPLE ARROW
8668 21DC   LEFTWARDS SQUIGGLE ARROW
8669 21DD   RIGHTWARDS SQUIGGLE ARROW
8670 21DE   UPWARDS ARROW WITH DOUBLE STROKE
8671 21DF   DOWNWARDS ARROW WITH DOUBLE STROKE
8672 21E0   LEFTWARDS DASHED ARROW
8673 21E1   UPWARDS DASHED ARROW
8674 21E2   RIGHTWARDS DASHED ARROW
8675 21E3   DOWNWARDS DASHED ARROW
8676 21E4   LEFTWARDS ARROW TO BAR
8677 21E5   RIGHTWARDS ARROW TO BAR
8678 21E6   LEFTWARDS WHITE ARROW
8679 21E7   UPWARDS WHITE ARROW
8680 21E8   RIGHTWARDS WHITE ARROW
8681 21E9   DOWNWARDS WHITE ARROW
8682 21EA   UPWARDS WHITE ARROW FROM BAR
8683 21EB   UPWARDS WHITE ARROW ON PEDESTAL
8684 21EC   UPWARDS WHITE ARROW ON PEDESTAL WITH HORIZONTAL BAR
8685 21ED   UPWARDS WHITE ARROW ON PEDESTAL WITH VERTICAL BAR
8686 21EE   UPWARDS WHITE DOUBLE ARROW
8687 21EF   UPWARDS WHITE DOUBLE ARROW ON PEDESTAL
8688 21F0   RIGHTWARDS WHITE ARROW FROM WALL
8689 21F1   NORTH WEST ARROW TO CORNER
8690 21F2   SOUTH EAST ARROW TO CORNER
8691 21F3   UP DOWN WHITE ARROW
8692 21F4   RIGHT ARROW WITH SMALL CIRCLE
8693 21F5   DOWNWARDS ARROW LEFTWARDS OF UPWARDS ARROW
8694 21F6   THREE RIGHTWARDS ARROWS
8695 21F7   LEFTWARDS ARROW WITH VERTICAL STROKE
8696 21F8   RIGHTWARDS ARROW WITH VERTICAL STROKE
8697 21F9   LEFT RIGHT ARROW WITH VERTICAL STROKE
8698 21FA   LEFTWARDS ARROW WITH DOUBLE VERTICAL STROKE
8699 21FB   RIGHTWARDS ARROW WITH DOUBLE VERTICAL STROKE
8700 21FC   LEFT RIGHT ARROW WITH DOUBLE VERTICAL STROKE
8701 21FD   LEFTWARDS OPEN-HEADED ARROW
8702 21FE   RIGHTWARDS OPEN-HEADED ARROW
8703 21FF   LEFT RIGHT OPEN-HEADED ARROW

 

Older browsers may not support all the HTML5 entities in the table below.

Char Dec Hex Entity Name
8352 20A0   EURO-CURRENCY SIGN
8353 20A1   COLON SIGN
8354 20A2   CRUZEIRO SIGN
8355 20A3   FRENCH FRANC SIGN
8356 20A4   LIRA SIGN
8357 20A5   MILL SIGN
8358 20A6   NAIRA SIGN
8359 20A7   PESETA SIGN
8360 20A8   RUPEE SIGN
8361 20A9   WON SIGN
8362 20AA   NEW SHEQEL SIGN
8363 20AB   DONG SIGN
8364 20AC € EURO SIGN
8365 20AD   KIP SIGN
8366 20AE   TUGRIK SIGN
8367 20AF   DRACHMA SIGN
8368 20B0   GERMAN PENNY SYMBOL
8369 20B1   PESO SIGN
8370 20B2   GUARANI SIGN
8371 20B3   AUSTRAL SIGN
8372 20B4   HRYVNIA SIGN
8373 20B5   CEDI SIGN
8374 20B6   LIVRE TOURNOIS SIGN
8375 20B7   SPESMILO SIGN
8376 20B8   TENGE SIGN
8377 20B9   INDIAN RUPEE SIGN
8378 20BA   TURKISH LIRA SIGN
8379 20BB   NORDIC MARK SIGN
8380 20BC   MANAT SIGN
8381 20BD   RUBLE SIGN
8382 20BE   LARI SIGN
8383 20BF   BITCOIN SIGN

Some Greek Letters Supported by HTML

Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA

Some Other Entities Supported by HTML

Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € EURO SIGN
™ ™ TRADEMARK
← ← LEFTWARDS ARROW
↑ ↑ UPWARDS ARROW
→ → RIGHTWARDS ARROW
↓ ↓ DOWNWARDS ARROW
♠ ♠ BLACK SPADE SUIT
♣ ♣ BLACK CLUB SUIT
♥ ♥ BLACK HEART SUIT
♦ ♦ BLACK DIAMOND SUIT

 

 

Char Dec Hex Entity Name
9728 2600   BLACK SUN WITH RAYS
9729 2601   CLOUD
9730 2602   UMBRELLA
9731 2603   SNOWMAN
9732 2604   COMET
9733 2605   BLACK STAR
9734 2606   WHITE STAR
9735 2607   LIGHTNING
9736 2608   THUNDERSTORM
9737 2609   SUN
9738 260A   ASCENDING NODE
9739 260B   DESCENDING NODE
9740 260C   CONJUNCTION
9741 260D   OPPOSITION
9742 260E   BLACK TELEPHONE
9743 260F   WHITE TELEPHONE
9744 2610   BALLOT BOX
9745 2611   BALLOT BOX WITH CHECK
9746 2612   BALLOT BOX WITH X
9747 2613   SALTIRE
9748 2614   UMBRELLA WITH RAIN DROPS
9749 2615   HOT BEVERAGE
9750 2616   WHITE SHOGI PIECE
9751 2617   BLACK SHOGI PIECE
9752 2618   SHAMROCK
9753 2619   REVERSED ROTATED FLORAL HEART BULLET
9754 261A   BLACK LEFT POINTING INDEX
9755 261B   BLACK RIGHT POINTING INDEX
9756 261C   WHITE LEFT POINTING INDEX
9757 261D   WHITE UP POINTING INDEX
9758 261E   WHITE RIGHT POINTING INDEX
9759 261F   WHITE DOWN POINTING INDEX
9760 2620   SKULL AND CROSSBONES
9761 2621   CAUTION SIGN
9762 2622   RADIOACTIVE SIGN
9763 2623   BIOHAZARD SIGN
9764 2624   CADUCEUS
9765 2625   ANKH
9766 2626   ORTHODOX CROSS
9767 2627   CHI RHO
9768 2628   CROSS OF LORRAINE
9769 2629   CROSS OF JERUSALEM
9770 262A   STAR AND CRESCENT
9771 262B   FARSI SYMBOL
9772 262C   KHANDA
9773 262D   HAMMER AND SICKLE
9774 262E   PEACE SYMBOL
9775 262F   YIN YANG
9776 2630   TRIGRAM FOR HEAVEN
9777 2631   TRIGRAM FOR LAKE
9778 2632   TRIGRAM FOR FIRE
9779 2633   TRIGRAM FOR THUNDER
9780 2634   TRIGRAM FOR WIND
9781 2635   TRIGRAM FOR WATER
9782 2636   TRIGRAM FOR MOUNTAIN
9783 2637   TRIGRAM FOR EARTH
9784 2638   WHEEL OF DHARMA
9785 2639   WHITE FROWNING FACE
9786 263A   WHITE SMILING FACE
9787 263B   BLACK SMILING FACE
9788 263C   WHITE SUN WITH RAYS
9789 263D   FIRST QUARTER MOON
9790 263E   LAST QUARTER MOON
9791 263F   MERCURY
9792 2640   FEMALE SIGN
9793 2641   EARTH
9794 2642   MALE SIGN
9795 2643   JUPITER
9796 2644   SATURN
9797 2645   URANUS
9798 2646   NEPTUNE
9799 2647   PLUTO
9800 2648   ARIES
9801 2649   TAURUS
9802 264A   GEMINI
9803 264B   CANCER
9804 264C   LEO
9805 264D   VIRGO
9806 264E   LIBRA
9807 264F   SCORPIUS
9808 2650   SAGITTARIUS
9809 2651   CAPRICORN
9810 2652   AQUARIUS
9811 2653   PISCES
9812 2654   WHITE CHESS KING
9813 2655   WHITE CHESS QUEEN
9814 2656   WHITE CHESS ROOK
9815 2657   WHITE CHESS BISHOP
9816 2658   WHITE CHESS KNIGHT
9817 2659   WHITE CHESS PAWN
9818 265A   BLACK CHESS KING
9819 265B   BLACK CHESS QUEEN
9820 265C   BLACK CHESS ROOK
9821 265D   BLACK CHESS BISHOP
9822 265E   BLACK CHESS KNIGHT
9823 265F   BLACK CHESS PAWN
9824 2660 ♠ BLACK SPADE SUIT
9825 2661   WHITE HEART SUIT
9826 2662   WHITE DIAMOND SUIT
9827 2663 ♣ BLACK CLUB SUIT
9828 2664   WHITE SPADE SUIT
9829 2665 ♥ BLACK HEART SUIT
9830 2666 ♦ BLACK DIAMOND SUIT
9831 2667   WHITE CLUB SUIT
9832 2668   HOT SPRINGS
9833 2669   QUARTER NOTE
9834 266A   EIGHTH NOTE
9835 266B   BEAMED EIGHTH NOTES
9836 266C   BEAMED SIXTEENTH NOTES
9837 266D   MUSIC FLAT SIGN
9838 266E   MUSIC NATURAL SIGN
9839 266F   MUSIC SHARP SIGN
9840 2670   WEST SYRIAC CROSSTry it
9841 2671   EAST SYRIAC CROSSTry it
9842 2672   UNIVERSAL RECYCLING SYMBOLTry it
9843 2673   RECYCLING SYMBOL FOR TYPE-1 PLASTICSTry it
9844 2674   RECYCLING SYMBOL FOR TYPE-2 PLASTICSTry it
9845 2675   RECYCLING SYMBOL FOR TYPE-3 PLASTICSTry it
9846 2676   RECYCLING SYMBOL FOR TYPE-4 PLASTICSTry it
9847 2677   RECYCLING SYMBOL FOR TYPE-5 PLASTICSTry it
9848 2678   RECYCLING SYMBOL FOR TYPE-6 PLASTICSTry it
9849 2679   RECYCLING SYMBOL FOR TYPE-7 PLASTICSTry it
9850 267A   RECYCLING SYMBOL FOR GENERIC MATERIALSTry it
9851 267B   BLACK UNIVERSAL RECYCLING SYMBOLTry it
9852 267C   RECYCLED PAPER SYMBOLTry it
9853 267D   PARTIALLY-RECYCLED PAPER SYMBOLTry it
9854 267E   PERMANENT PAPER SIGNTry it
9855 267F   WHEELCHAIR SYMBOLTry it
9856 2680   DIE FACE-1Try it
9857 2681   DIE FACE-2Try it
9858 2682   DIE FACE-3Try it
9859 2683   DIE FACE-4Try it
9860 2684   DIE FACE-5Try it
9861 2685   DIE FACE-6Try it
9862 2686   WHITE CIRCLE WITH DOT RIGHTTry it
9863 2687   WHITE CIRCLE WITH TWO DOTSTry it
9864 2688   BLACK CIRCLE WITH WHITE DOT RIGHTTry it
9865 2689   BLACK CIRCLE WITH TWO WHITE DOTSTry it
9866 268A   MONOGRAM FOR YANGTry it
9867 268B   MONOGRAM FOR YINTry it
9868 268C   DIGRAM FOR GREATER YANGTry it
9869 268D   DIGRAM FOR LESSER YINTry it
9870 268E   DIGRAM FOR LESSER YANGTry it
9871 268F   DIGRAM FOR GREATER YINTry it
9872 2690   WHITE FLAGTry it
9873 2691   BLACK FLAGTry it
9874 2692   HAMMER AND PICKTry it
9875 2693   ANCHORTry it
9876 2694   CROSSED SWORDSTry it
9877 2695   STAFF OF AESCULAPIUSTry it
9878 2696   SCALESTry it
9879 2697   ALEMBICTry it
9880 2698   FLOWERTry it
9881 2699   GEARTry it
9882 269A   STAFF OF HERMESTry it
9883 269B   ATOM SYMBOLTry it
9884 269C   FLEUR-DE-LISTry it
9885 269D   OUTLINED WHITE STARTry it
9886 269E   THREE LINES CONVERGING RIGHTTry it
9887 269F   THREE LINES CONVERGING LEFTTry it
9888 26A0   WARNING SIGNTry it
9889 26A1   HIGH VOLTAGE SIGNTry it
9890 26A2   DOUBLED FEMALE SIGNTry it
9891 26A3   DOUBLED MALE SIGNTry it
9892 26A4   INTERLOCKED FEMALE AND MALE SIGNTry it
9893 26A5   MALE AND FEMALE SIGNTry it
9894 26A6   MALE WITH STROKE SIGNTry it
9895 26A7   MALE WITH STROKE AND MALE AND FEMALE SIGNTry it
9896 26A8   VERTICAL MALE WITH STROKE SIGNTry it
9897 26A9   HORIZONTAL MALE WITH STROKE SIGNTry it
9898 26AA   MEDIUM WHITE CIRCLETry it
9899 26AB   MEDIUM BLACK CIRCLETry it
9900 26AC   MEDIUM SMALL WHITE CIRCLETry it
9901 26AD   MARRIAGE SYMBOLTry it
9902 26AE   DIVORCE SYMBOLTry it
9903 26AF   UNMARRIED PARTNERSHIP SYMBOLTry it
9904 26B0   COFFINTry it
9905 26B1   FUNERAL URNTry it
9906 26B2   NEUTERTry it
9907 26B3   CERESTry it
9908 26B4   PALLASTry it
9909 26B5   JUNOTry it
9910 26B6   VESTATry it
9911 26B7   CHIRONTry it
9912 26B8   BLACK MOON LILITHTry it
9913 26B9   SEXTILETry it
9914 26BA   SEMISEXTILETry it
9915 26BB   QUINCUNXTry it
9916 26BC   SESQUIQUADRATETry it
9917 26BD   SOCCER BALLTry it
9918 26BE   BASEBALLTry it
9919 26BF   SQUARED KEYTry it
9920 26C0   WHITE DRAUGHTS MANTry it
9921 26C1   WHITE DRAUGHTS KINGTry it
9922 26C2   BLACK DRAUGHTS MANTry it
9923 26C3   BLACK DRAUGHTS KINGTry it
9924 26C4   SNOWMAN WITHOUT SNOWTry it
9925 26C5   SUN BEHIND CLOUDTry it
9926 26C6   RAINTry it
9927 26C7   BLACK SNOWMANTry it
9928 26C8   THUNDER CLOUD AND RAINTry it
9929 26C9   TURNED WHITE SHOGI PIECETry it
9930 26CA   TURNED BLACK SHOGI PIECETry it
9931 26CB   WHITE DIAMOND IN SQUARETry it
9932 26CC   CROSSING LANESTry it
9933 26CD   DISABLED CARTry it
9934 26CE   OPHIUCHUSTry it
9935 26CF   PICKTry it
9936 26D0   CAR SLIDINGTry it
9937 26D1   HELMET WITH WHITE CROSSTry it
9938 26D2   CIRCLED CROSSING LANESTry it
9939 26D3   CHAINSTry it
9940 26D4   NO ENTRYTry it
9941 26D5   ALTERNATE ONE-WAY LEFT WAY TRAFFICTry it
9942 26D6   BLACK TWO-WAY LEFT WAY TRAFFICTry it
9943 26D7   WHITE TWO-WAY LEFT WAY TRAFFICTry it
9944 26D8   BLACK LEFT LANE MERGETry it
9945 26D9   WHITE LEFT LANE MERGETry it
9946 26DA   DRIVE SLOW SIGNTry it
9947 26DB   HEAVY WHITE DOWN-POINTING TRIANGLETry it
9948 26DC   LEFT CLOSED ENTRYTry it
9949 26DD   SQUARED SALTIRETry it
9950 26DE   FALLING DIAGONAL IN WHITE CIRCLE IN BLACK SQUARETry it
9951 26DF   BLACK TRUCKTry it
9952 26E0   RESTRICTED LEFT ENTRY-1Try it
9953 26E1   RESTRICTED LEFT ENTRY-2Try it
9954 26E2   ASTRONOMICAL SYMBOL FOR URANUSTry it
9955 26E3   HEAVY CIRCLE WITH STROKE AND TWO DOTS ABOVETry it
9956 26E4   PENTAGRAMTry it
9957 26E5   RIGHT-HANDED INTERLACED PENTAGRAMTry it
9958 26E6   LEFT-HANDED INTERLACED PENTAGRAMTry it
9959 26E7   INVERTED PENTAGRAMTry it
9960 26E8   BLACK CROSS ON SHIELDTry it
9961 26E9   SHINTO SHRINETry it
9962 26EA   CHURCHTry it
9963 26EB   CASTLETry it
9964 26EC   HISTORIC SITETry it
9965 26ED   GEAR WITHOUT HUBTry it
9966 26EE   GEAR WITH HANDLESTry it
9967 26EF   MAP SYMBOL FOR LIGHTHOUSETry it
9968 26F0   MOUNTAINTry it
9969 26F1   UMBRELLA ON GROUNDTry it
9970 26F2   FOUNTAINTry it
9971 26F3   FLAG IN HOLETry it
9972 26F4   FERRYTry it
9973 26F5   SAILBOATTry it
9974 26F6   SQUARE FOUR CORNERSTry it
9975 26F7   SKIERTry it
9976 26F8   ICE SKATETry it
9977 26F9   PERSON WITH BALLTry it
9978 26FA   TENTTry it
9979 26FB   JAPANESE BANK SYMBOLTry it
9980 26FC   HEADSTONE GRAVEYARD SYMBOLTry it
9981 26FD   FUEL PUMPTry it
9982 26FE   CUP ON BLACK SQUARETry it
9983 26FF   WHITE FLAG WITH HORIZONTAL MIDDLE BLACK STRIPETry it

hello code and json or ldap

 

   <style type="text/css">
        .plantas3d{
            position:fixed;
            z-index: -1;
            top:0%;
            left:0%;
            width: 100%;
            height: 100%;
        /*background-color: #111;*/
    }
    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
            position:fixed;
    }
    </style>

    <script>
//<div class="plantas3d">
//    <canvas id="renderCanvas" touch-action="none"></canvas>
//</div>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
        const scene = new BABYLON.Scene(engine); 
//          BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");
        // Light
        const light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(-2, 0, 0), scene);
            // Camera
        const camera = new BABYLON.ArcRotateCamera("Camera", -1.57, 1.0, 200, new BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas);
            //Creation of a sphere (name of the sphere, segments, diameter, scene)
            var sphere = BABYLON.Mesh.CreateSphere("sphere", 100.0, 100.0, scene);
            sphere.position = new BABYLON.Vector3(0, 0, 0);
            sphere.rotation.x = Math.PI;
            //Add material to sphere
            var groundMaterial = new BABYLON.StandardMaterial("mat", scene);
        groundMaterial.diffuseTexture = new BABYLON.Texture("/templates/smart/gl/on/earthmap1k.jpg", scene);
        groundMaterial.specularTexture = new BABYLON.Texture("/templates/smart/gl/on/earthspec1k.jpg", scene);
        groundMaterial.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/earthbump1k.jpg", scene);
        groundMaterial.invertNormalMapX = true;
        groundMaterial.invertNormalMapY = true;
        sphere.material = groundMaterial;

            //Creation of atmosphere (name of the sphere, segments, diameter, scene)
            var patmosphere = BABYLON.Mesh.CreateSphere("patmosphere", 105.0, 105.0, scene);
            patmosphere.position = new BABYLON.Vector3(0, 0, 0);
            patmosphere.rotation.x = Math.PI;
            var patmosphereS = new BABYLON.StandardMaterial("patmosphereS", scene);
        patmosphereS.diffuseColor = new BABYLON.Color3(0.4, 0.5, 0.3);
        //patmosphereS.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
        patmosphereS.opacityTexture = new BABYLON.Texture("/templates/smart/gl/on/clouda.png", scene);
        //patmosphere.diffuseTexture.hasAlpha = true;
        patmosphereS.alpha = 0.7;


            //Creation of atmosphere (name of the sphere, segments, diameter, scene)
            var atmosphere = BABYLON.Mesh.CreateSphere("atmosphere", 110.0, 110.0, scene);
            atmosphere.position = new BABYLON.Vector3(0, 0, 0);
            atmosphere.rotation.x = Math.PI;
       
            var atmosphereS = new BABYLON.StandardMaterial("atmosphereS", scene);
        atmosphereS.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);
        //atmosphereS.bumpTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
        atmosphereS.opacityTexture = new BABYLON.Texture("/templates/smart/gl/on/clouda.png", scene);
        //atmosphereS.diffuseTexture.hasAlpha = true;
        atmosphereS.invertNormalMapX = true;
        atmosphereS.invertNormalMapY = true;
        atmosphereS.alpha = 0.9;

//myMaterial.diffuseTexture.hasAlpha = true;
//materialSphere1.wireframe = true;

//        atmosphereS.diffuseTexture = new BABYLON.Texture("/templates/smart/gl/on/lyod.jpg", scene);
//atmosphereS.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
//atmosphereS.emissiveColor = new BABYLON.Color3(1, 1, 1);
//atmosphereS.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
        //atmosphereS.invertNormalMapX = true;
        //atmosphereS.invertNormalMapY = true;
        atmosphere.material = atmosphereS;






        var skybox = BABYLON.Mesh.CreateBox("skyBox", 400.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/templates/smart/gl/on/starbox2", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;


            // Animations - rotate earth
            var alpha = 0;
            scene.beforeRender = function () {
                sphere.rotation.y = alpha;
                atmosphere.rotation.y = alpha;
                alpha -= 0.0015;
            };
            return scene;
        };
        const scene = createScene(); //Call the createScene function
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });
        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

source code help

 

Demo with just material:

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;   
            var materialforbox = new BABYLON.StandardMaterial("texture1", scene);
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);   
            box.material = materialforbox;
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

 

Demo with transparency:

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>

   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);
            scene.clearColor = new BABYLON.Color3(0, 1, 0);
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
            camera.attachControl(canvas, true);
            
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
            var materialforbox = new 
            BABYLON.StandardMaterial("texture1", scene);
            
            var box = BABYLON.Mesh.CreateBox("box", '3', scene);	
            box.material  = materialforbox;
            materialforbox.alpha = 0.3; // value of 0.3 is applied fro transparency
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>


More: www.tutorialspoint.com/babylonjs/

 

log in

Authorization

register

Login details
about me
specify the city where you live
your name to display on the site
Spam protection