如何在THREE.PerspectiveCamera中捕获THREE.Scene的图像？

Question

我当时在网上寻找，但没有发现太多。我基本上是在寻找可以在按下按钮时渲染图像的相机功能。

请注意，我有2个THREE.PerspectiveCamera（主要和次要）。主摄像机是我用于OrbitControls的摄像机。第二个用于捕获图像。

这就是我声明Three.PerspectiveCamera的方式：

include

更新：

camera_RT = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, -100, -1000);
camera_RT.position.set( //Set 2nd camera's position according to its parent
   camera_RT.position.x, 
   camera_RT.position.y, 
   camera_RT_Holder.position.z
);
camera_RT.updateMatrixWorld(); //Update camera's Matrix Wolrd (location in the scene)

//Add the Camera to the camera Holder (parent objects)
camera_RT_Holder.add(camera_RT); 

//Create 2nd Camera Helper (View volume)
camera_RT_Helper = new THREE.CameraHelper( camera_RT ); //Create camera helper
scene_Main.add( camera_RT_Helper );//Add the camera helper to the scene

Answer 1

这里是拍摄屏幕截图的示例。

要更改从哪个相机拍摄屏幕快照，只需更改发送到renderer.render（）函数的相机即可。
在此示例中，我只有一台摄像机。

var camera, scene, renderer, mesh, material;

init();
animate();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer({
        antialias: true,
        //preserveDrawingBuffer: true
    });
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // add Screenshot listener
    document.getElementById("shot").addEventListener('click', takeScreenshot);

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

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

function takeScreenshot() {

    // open in new window like this
    //
/*
    var w = window.open('', '');
    w.document.title = "Screenshot";
    //w.document.body.style.backgroundColor = "red";
    var img = new Image();
    // Without 'preserveDrawingBuffer' set to true, we must render now
    renderer.render(scene, camera);
    img.src = renderer.domElement.toDataURL();
    w.document.body.appendChild(img);  
*/
/*
    // download file like this.
    //
    var a = document.createElement('a');
    // Without 'preserveDrawingBuffer' set to true, we must render now
    renderer.render(scene, camera);
    a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
    a.download = 'canvas.png'
    a.click();
*/
    

    // New version of file download using toBlob.
    // toBlob should be faster than toDataUrl.
    // But maybe not because also calling createOjectURL.
    // I dunno....
    //
    renderer.render(scene, camera);
    renderer.domElement.toBlob(function(blob){
    	var a = document.createElement('a');
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = 'canvas.png';
      a.click();
    }, 'image/png', 1.0);

    
}

function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}
#shot {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 5px;
}

<script src="https://rawgit.com/mrdoob/three.js/r102/build/three.min.js"></script>
<button id="shot">Take Screenshot</button>

Answer 2

在按钮上单击以使用toDataURL（）方法从相机捕获图像。 imageData = renderer.domElement.toDataURL（）;

渲染器的DOM元素是画布。请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL，了解更多详细信息