Adicionar Efeito 3d em foto

Bom dia caros amigos.
Trabalho com moveis de escritorio e uma das fabricas que trabalho disponibiliza em seu site, fotos em 3d das cadeiras, queria incluir ela na descrição dos produtos, tentei incorporar porém a imagem ficou preta não carregou em 3d.
Estudando o site a biblioteca usada por eles foi a Panolens , ja até inclui ela mais ficou preto

Produto incluido

Bom dia!!

Sim, pelo que eu vi, utilizam o Plugin Panolens.js, mas analisando aqui, o que foi adicionado na Descrição do Produto, é apenas o elemento já trabalhado por ele, sem nenhum evento e nem nada do tipo.
O que pode-se fazer é adicionar o elemento antes da ação do Plugin dentro da Descrição do Produto:

<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"></div>

Após isso, adicione o código no painel:
Visual > Incluir código HTML (Tipo: HTML)

<style>
    /* Copiado da página de exemplo da marca enviada */
    .pano-container {
        height: 600px;
    }

    @media (max-width: 1199px) {
        .pano-container {
            height: 500px;
        }
    }

    @media (max-width: 767px) {
        .pano-container {
            height: 300px;
        }
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js"></script>
<script>
    //Copiado da página de exemplo da marca enviada
    $(document).ready(function() {
        var panorama = [];
        var viewer = [];

        $('.pano-container').each(function(index) {
            panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
            viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
            viewer[index].add(panorama[index]);
            viewer[index].addUpdateCallback(function() {
                viewer[index].panorama.rotation.y -= -0.001;
                viewer[index].OrbitControls.noZoom = true;
            });
        });
    });
</script>

Funcionaria também com o Tipo: JavaScript

//Os Scripts serão carregados somente nas páginas de produto em que o elemento tiver sido inserido
//Caso queira verificar a marca, é possível também: if($('[itemprop=brand] [itemprop=name]').attr('content') === 'PLAXMETAL')
if($('.pano-container').length) {
    $('head').append('<style>.pano-container{height: 600px;}@media (max-width: 1199px){.pano-container{height: 500px;}}@media (max-width: 767px){.pano-container{height: 300px;}}</style>');

    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js').done(function() {
        $.getScript('https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js').done(function() {
            //Copiado da página de exemplo da marca enviada
            var panorama = [];
            var viewer = [];

            $('.pano-container').each(function(index) {
                panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
                viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
                viewer[index].add(panorama[index]);
                viewer[index].addUpdateCallback(function() {
                    viewer[index].panorama.rotation.y -= -0.001;
                    viewer[index].OrbitControls.noZoom = true;
                });
            });
        });
    });
}

Espero ter ajudado, até mais!!

3 curtidas

cara voce como sempre me salvando. só tira uma duvida
Deu uma bugada kkkk
quando atualizo a pagina ele fica uma imagem manchada


igual a foto
porém quando clico em Inspecionar elemento no navegador ele carrega correto.

Ele ficou tambem com ess aborda preta tem como centralizar na caixa

Deve ser porque o HTML da Descrição do Produto que foi copiado do site deles não foi substituído pelo que eu passei na minha resposta, substitui e faz o teste.

1 curtida

desculpa produto errado to testando neste

ta assim

ta dando esses erros no console tbm

Access to XMLHttpRequest at ‘https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg’ from origin ‘https://www.evimero.com.br’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Tá o antigo aqui:

Você tem que pesquisar o produto (Produtos > Listar produtos), acessar ele, remover esse antigo, adicionar o novo e salvar.

1 curtida

Ja alterei esperando propagar, tem hora que demora.

Essa borda preta, é por causa de um espaço, que tá aqui:

<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"> </div>

Vê se é o editor que tá salvando dessa maneira, o correto é ficar sem espaço:

<div class="pano-container" data-image="https://cdn.awsli.com.br/1889/1889146/arquivos/premium-360.jpg"></div>

eu salvo sem o espaço,e o editor inseri novamente

o tenso é isso só carrega a imagem se eu inspeciono a pagina.

Sem problemas, faz um teste então, modifica o estilo e o Script, adicionando width: 100% ao .pano-container e $(this).html('') após a função each():
Visual > Incluir código HTML (Tipo: HTML)

<style>
    /* Copiado da página de exemplo da marca enviada */
    .pano-container {
        width: 100%;
        height: 600px;
    }

    @media (max-width: 1199px) {
        .pano-container {
            height: 500px;
        }
    }

    @media (max-width: 767px) {
        .pano-container {
            height: 300px;
        }
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js"></script>
<script>
    //Copiado da página de exemplo da marca enviada
    $(document).ready(function() {
        var panorama = [];
        var viewer = [];

        $('.pano-container').each(function(index) {
            $(this).html('');
            
            panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
            viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
            viewer[index].add(panorama[index]);
            viewer[index].addUpdateCallback(function() {
                viewer[index].panorama.rotation.y -= -0.001;
                viewer[index].OrbitControls.noZoom = true;
            });
        });
    });
</script>

Ou se quiser somente usando JS:

//Os Scripts serão carregados somente nas páginas de produto em que o elemento tiver sido inserido
//Caso queira verificar a marca, é possível também: if($('[itemprop=brand] [itemprop=name]').attr('content') === 'PLAXMETAL')
if($('.pano-container').length) {
    $('head').append('<style>.pano-container{width:100%;height:600px}@media (max-width:1199px){.pano-container{height:500px}}@media (max-width:767px){.pano-container{height:300px}}</style>');

    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js').done(function() {
        $.getScript('https://cdn.jsdelivr.net/npm/panolens@0.11.0/build/panolens.min.js').done(function() {
            //Copiado da página de exemplo da marca enviada
            var panorama = [];
            var viewer = [];

            $('.pano-container').each(function(index) {
                $(this).html('');

                panorama[index] = new PANOLENS.ImagePanorama($(this).data('image'));
                viewer[index] = new PANOLENS.Viewer({ container: $(this).get(0) });
                viewer[index].add(panorama[index]);
                viewer[index].addUpdateCallback(function() {
                    viewer[index].panorama.rotation.y -= -0.001;
                    viewer[index].OrbitControls.noZoom = true;
                });
            });
        });
    });
}

*Obs: Escolha somente um dos 2 acima.

2 curtidas

Java ou Css qual na usa opinião, é melhor? velocidade de execução, e eficacia.

Na minha opinião, carregar os Scripts via JS tem uma vantagem, que se eles não forem ser usados na página (não ter o elemento .pano-container), eles não vão ser carregados. Agora se carregá-los dentro do HTML, sempre vão ser carregados, independente do seu uso ou não.

1 curtida

Cometi um erro no Script acima, editei ele.

1 curtida


Deixei desta forma, e removi a que era com css

Acho que funcionou aqui, adiciona um produto no carrinho, para limpar e ver todas as modificações:

1 curtida

ou seja eu inserindo como eu fiz


ele só será carregado se tiver o elemento na pagina certo?

Exato, será carregado somente na página que você inserir o elemento na Descrição do Produto.