Как прикрепить снимок сцены three.js к изображению и восстановить его по клику - PullRequest
Новая
       57

Как прикрепить снимок сцены three.js к изображению и восстановить его по клику

0 голосов
/ 27 февраля 2019

Здесь я пытаюсь захватить идентификатор элемента каждого изображения при нажатии кнопки.Скажем, для каждого снимка я должен захватить идентификатор для каждого изображения.Я могу распечатать изображение на консоли, но я застрял в создании идентификатора для каждого изображения. Спасибо заранее.Вот такая скрипка https://jsfiddle.net/bg17oja3/1/

<!DOCTYPE html>
<html>
<head>
    <title>Snapshot Three JS</title>
</head>

<body>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
    <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
    <script type="text/javascript">
        var camera, scene, renderer;
        var mesh;
        var strDownloadMime = "image/octet-stream";

        init();
        animate();

        function init() {

            var saveLink = document.createElement('div');
            saveLink.style.position = 'absolute';
            saveLink.style.top = '10px';
            saveLink.style.width = '100%';
            saveLink.style.background = '#FFFFFF';
            saveLink.style.textAlign = 'center';
            saveLink.innerHTML =
                '<button href="#" id="clickButton">Save Frame</button>';
            document.body.appendChild(saveLink);
            // document.getElementById("saveLink").addEventListener('click', saveAsImage);
            renderer = new THREE.WebGLRenderer({
                preserveDrawingBuffer: true,
                captureId
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            //

            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 400;

            scene = new THREE.Scene();

            var geometry = new THREE.BoxGeometry(200, 200, 200);

            var captureId = document.getElementById('image');
            // var renderer = new Three.WebGLRenderer({captureId});


            var material = new THREE.MeshBasicMaterial({
                color: 0x00ff00
            });

            mesh = new THREE.Mesh(geometry, material);
            scene.add(mesh);
            console.log(captureId);


            window.addEventListener('resize', onWindowResize, false);

            document.getElementById('clickButton').addEventListener('click', buttonClick);

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

        }

        function animate() {

            requestAnimationFrame(animate);

            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;

            renderer.render(scene, camera);

        }

        function buttonClick() {
            renderer.render(scene, camera);
            document.getElementById('image').src = renderer.domElement.toDataURL();
            console.log(image);

        }

    </script>
    <style type="text/css">
        html,
        body {
            padding: 0px;
            margin: 0px;
        }

        canvas {
            width: 100%;
            height: 100%
        }

        #clickButton {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
            cursor: pointer;
        }

        #image {
            position: absolute;
            top: 10px;
            right: 10px;
            max-width: 150px;
            width: 150px;
            height: 90px;
            z-index: 3;
            border: 1px solid #fff;
        }
    </style>
    <img id="image" src="" />

</body>

1 Ответ

0 голосов
/ 27 февраля 2019

Я разбудил вашу скрипку, чтобы продемонстрировать решение: https://jsfiddle.net/mmalex/o0k2fu8t/

Как проверить это:

  1. Сделайте снимок,
  2. Нажмите на изображение, чтобы вернуться в сериализованную сцену.

Идея такова:

  1. сериализовать всю сцену, когда вы делаете скриншот,
  2. установить атрибут данных на изображении,
  3. десериализовать сцену из атрибута данных изображения, когда вам это нужно. 
function buttonClick()
{
    renderer.render(scene, camera);

    let imageEl = document.getElementById('image');
    imageEl.src = renderer.domElement.toDataURL();

    // convert scene to json format
    let sceneJson = scene.toJSON();

    // don't forget to make it text
    let sceneJsonText = JSON.stringify(sceneJson);

    // set serialized scene to image data-scene attribute
    imageEl.setAttribute('data-scene', sceneJsonText);
}

function imageClick()
{
    let imageEl = document.getElementById('image');

    // access serialized scene on image click
    var sceneJsonText = imageEl.getAttribute('data-scene');

    // parse it into json object
    let sceneJson = JSON.parse(sceneJsonText)

    // convert json object into THREE.Scene
    var loader = new THREE.ObjectLoader();
    scene = loader.parse(sceneJson);

    // don't forget to update referenced, as deserialized scene will stop rotation if you don't do that
    mesh = scene.children[0];
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...