如何将three.js场景快照附加到图像,并在单击时恢复它

问题描述 投票:1回答:1

这里我试图在单击按钮时捕获每个图像的元素Id。对于每个图像快照,我必须为每个图像捕获一个id。我可以在控制台上打印图像,但我仍然坚持为每个图像创建id。谢谢你提前。这是小提琴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> 
three.js custom-data-attribute
1个回答
2
投票

我已经分道扬琴来演示解决方案: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];
}
© www.soinside.com 2019 - 2024. All rights reserved.