該文章參考了網(wǎng)上的一些教程寫的，原文鏈接Three.js Canvas 畫布上局部渲染 剪裁方法 .setScissor() 和視口方法 .setViewport() - 文章教程 - 文江博客 (wenjiangs.com)three.js的學(xué)習(xí)資源太少了，官網(wǎng)的教程api寫的也是很模糊不清...
1、剪裁方法 setScissor()
剪裁方法.setScissor()通過(guò)四個(gè)參數(shù) (x, y, width, height) 定義一個(gè)矩形區(qū)域，這個(gè)矩形區(qū)域稱為剪裁區(qū)域或剪裁框。
- x:剪裁框相對(duì)canvas畫布左側(cè)像素。默認(rèn)值：0。
- y:剪裁框相對(duì)canvas畫布頂部像素。默認(rèn)值：0。
- width:剪裁框區(qū)域?qū)挾?。默認(rèn)值：canvas畫布的寬度。
- height:剪裁框區(qū)域高度。默認(rèn)值：canvas畫布的高度。
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="./js/three.js-master/build/three.js"></script>
<script>
// 場(chǎng)景、渲染器等初始化的操作
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var mesh = new THREE.Mesh(geometry, material);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//開啟WebGL剪裁測(cè)試功能，如果不開啟，.setScissor方法設(shè)置的范圍不起作用
renderer.setScissorTest(true)
// 渲染函數(shù)
function render() {
// 距離畫布左側(cè)50，頂部100 渲染區(qū)域?qū)捀叨榷际钱嫴紝捀叩娜种? renderer.setScissor(100, 200, window.innerWidth / 3, window.innerHeight / 3);
// setViewport方法設(shè)置的視口變換區(qū)域和剪裁方法setScissor設(shè)置的渲染區(qū)域保持一致
// setScissor方法設(shè)置的是render影響范圍
// setViewport方法影響的是圖形變換
renderer.setViewport(100, 200, window.innerWidth / 3, window.innerHeight / 3)
// 設(shè)置setScissor方法定義的渲染區(qū)域的背景顏色
renderer.setClearColor(0xffffff, 1)
renderer.render(scene, camera);
mesh.rotateY(0.01);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
2、同理，可以對(duì)多個(gè)區(qū)域進(jìn)行剪裁
剪裁方法 .setScissor() 設(shè)置兩個(gè)剪裁區(qū)域是互不影響
// 場(chǎng)景、渲染器等初始化的操作
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var geometry = new THREE.BoxBufferGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
var mesh = new THREE.Mesh(geometry, material);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//開啟WebGL剪裁測(cè)試功能，如果不開啟，.setScissor方法設(shè)置的范圍不起作用
renderer.setScissorTest(true)
// 渲染函數(shù)
function render() {
renderer.setScissor(50, 100, 100, 50);
renderer.setViewport(50, 100, 100, 50)
// 設(shè)置setScissor方法定義的渲染區(qū)域的背景顏色
renderer.setClearColor(0xffffff, 1)
renderer.render(scene, camera);
// 同理，可以設(shè)置多個(gè)剪裁的區(qū)域部分
renderer.setScissor(300, 100, 100, 50);
renderer.setViewport(300, 100, 100, 50)
// 設(shè)置setScissor方法定義的渲染區(qū)域的背景顏色
renderer.setClearColor(0xffff00, 1)
renderer.render(scene, camera);
mesh.rotateY(0.01);
requestAnimationFrame(render);
}
render();
3、setScissor()方法和setViewport()的區(qū)別
功能上劃分：
- setScissor()是屬于剪裁方法
- setViewport()是屬于視口方法
剪裁方法setScissor()定義的是Threejs渲染結(jié)果像素覆蓋影響的范圍，剪裁方法setScissor()并不影響Threejs場(chǎng)景中模型的平移縮放變換。
視口方法setViewport()影響Threejs場(chǎng)景中模型的平移縮放變換。
4、setScissorTest() 方法的作用
Threejs渲染器的剪裁測(cè)試方法setScissorTest()用于開啟WebGL剪裁區(qū)域功能，如果不開啟，setScissor方法設(shè)置的范圍不起作用該方法封裝了原生WebGL的代碼enable( gl.SCISSOR_TEST );和disable( gl.SCISSOR_TEST );
renderer.setScissorTest(true); //開啟剪裁測(cè)試功能，等價(jià)于原生的WebGL：enable(gl.SCISSOR_TEST )
