该文章参考了网上的一些教程写的，原文链接Three.js Canvas 画布上局部渲染 剪裁方法 .setScissor() 和视口方法 .setViewport() - 文章教程 - 文江博客 (wenjiangs.com)three.js的学习资源太少了，官网的教程api写的也是很模糊不清...
1、剪裁方法 setScissor()
剪裁方法.setScissor()通过四个参数 (x, y, width, height) 定义一个矩形区域，这个矩形区域称为剪裁区域或剪裁框。
- x:剪裁框相对canvas画布左侧像素。默认值：0。
- y:剪裁框相对canvas画布顶部像素。默认值：0。
- width:剪裁框区域宽度。默认值：canvas画布的宽度。
- height:剪裁框区域高度。默认值：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>
// 场景、渲染器等初始化的操作
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剪裁测试功能，如果不开启，.setScissor方法设置的范围不起作用
renderer.setScissorTest(true)
// 渲染函数
function render() {
// 距离画布左侧50，顶部100 渲染区域宽高度都是画布宽高的三分之一
renderer.setScissor(100, 200, window.innerWidth / 3, window.innerHeight / 3);
// setViewport方法设置的视口变换区域和剪裁方法setScissor设置的渲染区域保持一致
// setScissor方法设置的是render影响范围
// setViewport方法影响的是图形变换
renderer.setViewport(100, 200, window.innerWidth / 3, window.innerHeight / 3)
// 设置setScissor方法定义的渲染区域的背景颜色
renderer.setClearColor(0xffffff, 1)
renderer.render(scene, camera);
mesh.rotateY(0.01);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
2、同理，可以对多个区域进行剪裁
剪裁方法 .setScissor() 设置两个剪裁区域是互不影响
// 场景、渲染器等初始化的操作
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剪裁测试功能，如果不开启，.setScissor方法设置的范围不起作用
renderer.setScissorTest(true)
// 渲染函数
function render() {
renderer.setScissor(50, 100, 100, 50);
renderer.setViewport(50, 100, 100, 50)
// 设置setScissor方法定义的渲染区域的背景颜色
renderer.setClearColor(0xffffff, 1)
renderer.render(scene, camera);
// 同理，可以设置多个剪裁的区域部分
renderer.setScissor(300, 100, 100, 50);
renderer.setViewport(300, 100, 100, 50)
// 设置setScissor方法定义的渲染区域的背景颜色
renderer.setClearColor(0xffff00, 1)
renderer.render(scene, camera);
mesh.rotateY(0.01);
requestAnimationFrame(render);
}
render();
3、setScissor()方法和setViewport()的区别
功能上划分：
- setScissor()是属于剪裁方法
- setViewport()是属于视口方法
剪裁方法setScissor()定义的是Threejs渲染结果像素覆盖影响的范围，剪裁方法setScissor()并不影响Threejs场景中模型的平移缩放变换。
视口方法setViewport()影响Threejs场景中模型的平移缩放变换。
4、setScissorTest() 方法的作用
Threejs渲染器的剪裁测试方法setScissorTest()用于开启WebGL剪裁区域功能，如果不开启，setScissor方法设置的范围不起作用该方法封装了原生WebGL的代码enable( gl.SCISSOR_TEST );和disable( gl.SCISSOR_TEST );
renderer.setScissorTest(true); //开启剪裁测试功能，等价于原生的WebGL：enable(gl.SCISSOR_TEST )
