这里我试图在单击按钮时捕获每个图像的元素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>
我已经分道扬琴来演示解决方案:https://jsfiddle.net/mmalex/o0k2fu8t/
如何测试:
这个想法是:
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];
}