將three.js渲染結(jié)果保存下來，本質(zhì)上就是保存three.js對應(yīng)canvas畫布上的內(nèi)容。所以這個(gè)問題其實(shí)就是將canvas畫布保存為一個(gè)圖片。而獲取canvas畫布上的內(nèi)容可以通過toDataURL()去獲取。不過three.js是對webgl進(jìn)行封裝的，獲取canvas上的webgl內(nèi)容，除了執(zhí)行toDataURL()外，還要在獲取webgl上下文的時(shí)候配置preserveDrawingBuffer參數(shù)。
1、Cavnas方法.toDataURL()
Canvas畫布通過.toDataURL()方法可以獲取畫布上的像素信息。canvas.toDataURL("image/png");表示以png格式獲取像素?cái)?shù)據(jù)，可以直接賦值給超鏈接元素a的.herf屬性下載到本地
var canvas = renderer.domElement;//獲取canvas對象
link.href = canvas.toDataURL("image/png");
1.1、以不同的格式獲取像素信息
canvas.toDataURL("image/png");
canvas.toDataURL("image/jpeg");
canvas.toDataURL("image/bmp");
2、WebGL渲染器設(shè)置
var renderer = new THREE.WebGLRenderer({
// 如果想保存three.js canvas畫布上的信息，注意設(shè)置preserveDrawingBuffer
preserveDrawingBuffer: true,
});
3、 超鏈接元素a下載文件
瀏覽器通過超鏈接元素a可以把數(shù)據(jù)保存到文件中并下載到本地。
<button type="button" name="button" onclick="saveFile()">下載</button>
<script>
//保存webgl內(nèi)容
function saveFile() {
// 創(chuàng)建一個(gè)超鏈接元素，用來下載保存數(shù)據(jù)的文件
var link = document.createElement('a');
// 通過超鏈接herf屬性，設(shè)置要保存到文件中的數(shù)據(jù)
var canvas = renderer.domElement;//獲取canvas對象
link.href = canvas.toDataURL("image/png");
link.download = 'threejs.png'; //下載文件名
link.click(); //js代碼觸發(fā)超鏈接元素a的鼠標(biāo)點(diǎn)擊事件，開始下載文件到本地
}
</script>
4、完整源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js中文網(wǎng)：http://www.webgl3d.cn/</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隱藏body窗口區(qū)域滾動(dòng)條 */
}
</style>
<!--引入three.js三維引擎-->
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
<!-- 引入threejs擴(kuò)展控件OrbitControls.js -->
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div style="position: absolute;top:0px;left:0px;">
<button type="button" name="button" onclick="saveFile()">下載</button>
</div>
<script>
/**
* 創(chuàng)建場景對象Scene
*/
var scene = new THREE.Scene();
/**
* 創(chuàng)建網(wǎng)格模型
*/
var geometry = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個(gè)立方體幾何對象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材質(zhì)對象Material
var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh
scene.add(mesh); //網(wǎng)格模型添加到場景中
/**
* 光源設(shè)置
*/
//點(diǎn)光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //點(diǎn)光源位置
scene.add(point); //點(diǎn)光源添加到場景中
//環(huán)境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
/**
* 相機(jī)設(shè)置
*/
var width = window.innerWidth; //窗口寬度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口寬高比
var s = 150; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
//創(chuàng)建相機(jī)對象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //設(shè)置相機(jī)位置
camera.lookAt(scene.position); //設(shè)置相機(jī)方向(指向的場景對象)
/**
* 創(chuàng)建渲染器對象
*/
var renderer = new THREE.WebGLRenderer({
// 如果想保存three.js canvas畫布上的信息，注意設(shè)置preserveDrawingBuffer
preserveDrawingBuffer: true,
});
renderer.setSize(width, height); //設(shè)置渲染區(qū)域尺寸
renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
// 渲染函數(shù)
function render() {
renderer.render(scene, camera); //執(zhí)行渲染操作
requestAnimationFrame(render); //請求再次執(zhí)行渲染函數(shù)render，渲染下一幀
}
render();
//創(chuàng)建控件對象 相機(jī)對象camera作為參數(shù) 控件可以監(jiān)聽鼠標(biāo)的變化，改變相機(jī)對象的屬性
var controls = new THREE.OrbitControls(camera, renderer.domElement);
//保存webgl內(nèi)容
function saveFile() {
// 創(chuàng)建一個(gè)超鏈接元素，用來下載保存數(shù)據(jù)的文件
var link = document.createElement('a');
// 通過超鏈接herf屬性，設(shè)置要保存到文件中的數(shù)據(jù)
var canvas = renderer.domElement;//獲取canvas對象
link.href = canvas.toDataURL("image/png");
link.download = 'threejs.png'; //下載文件名
link.click(); //js代碼觸發(fā)超鏈接元素a的鼠標(biāo)點(diǎn)擊事件，開始下載文件到本地
}
</script>
</body>
</html>
