How can we draw 3D bulding structure from existing image Jquery,Css?

问题

Please see this site it was made in flash: Can we do it by jquery css?

Go here

And click on any building marked with "Release" You will see one building on hover animation effect. That i want to develop using jquery and css Or you can suggest for development

回答1:

First you need to know there is nothing 3d here. These are pre-rendered images. You draw these highlighted areas in a software as different layer, photoshop for example.

enter image description here

Then you need create an area that can detect mouse hover. The old school image map html markup is one way to do this. You will draw a polygon that covers the same area as your highlight images.

enter image description here

The result will be something like this:

<map name="image-maps-2015-02-15-031753" id="ImageMapsCom-image-maps-2015-02-15-031753">
    <area alt="" href="#" title="" shape="poly" coords="52,99,101,49,172,21,267,21,317,93,302,127,268,63,194,73,129,89,74,115,49,132" style="outline:none;" target="_self" />
</map>

finally, you need a bit JS to do "if mouse hover the area, show the highlight image" . In the case you use jquery, mouseenter event on map is simple enough to do this;

$('map').on('mouseenter', function () { $('#highlight').show(); })

$('map').on('mouseleave', function () { $('#highlight').hide(); })

FULL DEMO: http://jsfiddle.net/pggyq4t8/2/ (hover the top floor)

回答2:

May 2020, in my answer on a similar Question, I showed the OP in my Answer how to use an SVG file instead and have much more control over the image overlay and use a CSS only solution (with <a> and some demo text showing on :hover). I also made the HTML page fully responsive for use on varying devices.

Posting the code snippet here only (go 'Full page' for a better look. Resize browser to test responsiveness):

/*
    Visit below answers on Stackoverflow for an explanation
    of the math used for responsive sizing of elements.

    https://stackoverflow.com/a/62033317/2015909
    https://stackoverflow.com/a/61867702/2015909
*/
/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }

/* responsive base font size using y = mx + b */
html    { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */
body    { font-size: 1rem }

[band]  { display: flex; flex-flow: column wrap; align-content: center }

[padded="1"], [padded="0"] [band*="padded"] {
/*
    responsive page padding
    and responsive band padding (same as responsive page padding, but at band level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'Band padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}

/* Making sure the image fits in any viewport, either portrait or landscape */
@media (orientation: portrait ) { #construction-site { height: auto; width: 100% } }
@media (orientation: landscape) { #construction-site { height: 100%; width: auto } }
</style>

<body padded="0">
<div id="construction-site" band="padded">
    <svg viewbox="0 0 1600 1200"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

        <style>
            .line       { stroke: Black; stroke-opacity: 0; stroke-width: 2px; cursor: pointer } 
            .polyline   { fill  : Red  ; fill-opacity  : 0 }
    
            .floor-text { fill: Black; stroke: none; fill-opacity: 0; cursor: default;
                          font-weight: bold; font-family: sans-serif;
                          /* responsive font using y = mx + b */
                          font-size: calc(-1vmin + 51.2px); /* (320,48)(1920,32) */
                        }

            .floor:hover>.line       { fill-opacity: .4; stroke-opacity: .8 }
            .floor:hover+.floor-text { fill-opacity: .7 }
        </style>

        <image href="https://i.imgur.com/0i4N0d3.jpg"/>

        <a id="top-floor" class="floor" rel="noopener" target="_blank" href="javascript:void(0)" title="top floor, click for details...">
            <polyline class="line polyline" 
                points="201.242,678.473 1121.43, 333.16 1370.24,
                        553.473 1387.74, 668.473 1127.49,
                        474.098 189.242, 753.473 202.242, 678.973"/>

            <line class="line" x1="1121.42" y1="333.472" x2="1127.45" y2="474.097"/>

        </a>
        <text class="floor-text" x="800" y="150" text-anchor="middle">top floor demo text</text>
    </svg>
</div>
</body>

来源：https://stackoverflow.com/questions/28493530/how-can-we-draw-3d-bulding-structure-from-existing-image-jquery-css

标签

jquery

css

three.js

WebGL