three.js多场景应用

var camera, renderer, controls;
var sceneLP, sceneLD, sceneRP, sceneRD;
var LPVector, LDVector, RPVector, RDVector;
var WIDTH, HEIGHT;

// 创建渲染器
function initRender() {
    WIDTH = window.innerWidth;
    HEIGHT = window.innerHeight;
    renderer = new THREE.WebGLRenderer({
        antialias: true,
    });
    renderer.setSize(WIDTH, HEIGHT);
    renderer.setPixelRatio(WIDTH / HEIGHT);
    //  setScissorTest 启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响。
    renderer.setScissorTest(true);
    document.getElementById('map1').appendChild(renderer.domElement);
}
//  创建场景
function initScene() {
    // 左上
    sceneLP = new THREE.Scene();
    sceneLP.background = new THREE.Color(0x000000);

    // 左下
    sceneLD = new THREE.Scene();
    sceneLD.background = new THREE.Color(0x000000);

    // 右上
    sceneRP = new THREE.Scene();
    sceneRP.background = new THREE.Color(0x000000);

    // 右下
    sceneRD = new THREE.Scene();
    sceneRD.background = new THREE.Color(0x000000);

}


//  创建相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(50, WIDTH / HEIGHT, 1, 10000);
    camera.position.set(0, 0, 50);
    camera.lookAt(0, 0, 0);
    // controls = new THREE.OrbitControls(camera);
}


//  创建灯光
function initLight() {
    //.clone()返回对象物体的克隆
    //  创建环境光 并克隆 分别放入左右场景
    var ambientL = new THREE.AmbientLight(0xffffff, 0.3);
    var ambientR = ambientL.clone();
    sceneLP.add(ambientL);
    sceneLD.add(ambientL);
    sceneRP.add(ambientR);
    sceneRD.add(ambientR);


    //  创建平行光 并克隆 分别放入左右场景
    var directionalL = new THREE.DirectionalLight(0xffffff);
    directionalL.position.set(0, 0, 1);
    var directionalR = directionalL.clone();
    sceneLP.add(directionalL);
    sceneLD.add(directionalL);
    sceneRP.add(directionalR);
    sceneRD.add(directionalR);
}


//  创建对象
function initObject() {
    //立方几何体
    var geometry = new THREE.BoxGeometry(5, 5, 5);
    var material = new THREE.MeshLambertMaterial({ color: 0x00ffff });
    var cube = new THREE.Mesh(geometry, material);
    cube.position.set(22, -10, 0);
    // 加入左边场景中
    sceneRD.add(cube)


    //二十面几何体
    var geometry = new THREE.IcosahedronGeometry(5);
    var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
    var cube = new THREE.Mesh(geometry, material);
    // 加入右边场景中
    cube.position.set(0, 0, 20);
    // console.log("222", THREE.VTKLoader)
    const loader = new THREE.VTKLoader();
    loader.load('assets/bunny.vtk', function (geometry) {
        geometry.center();
        geometry.computeVertexNormals();
        const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.scale.multiplyScalar(50);
        mesh.position.set(-22, -10, 0)
        sceneLD.add(mesh);
    });



}

function initThree() {
    initRender();
    initScene();
    initCamera();
    initLight();
    initVector();
    initObject();
    animation();
}


// 各区域初始化点坐标
function initVector() {
    LPVector = new THREE.Vector3(0, 0, 0);
    LDVector = new THREE.Vector3(-22, -10, 0);
    RPVector = new THREE.Vector3(1, 1, 0);
    RDVector = new THREE.Vector3(22, -10, 0);
}

function animation() {
    requestAnimationFrame(animation);
    //  setScissor 将剪裁区域设为(x, y)到(x + width, y + height) 
    renderer.setScissor(80, 50, window.innerWidth / 2.2, window.innerHeight / 2.2);
    renderer.render(sceneLD, camera);

    renderer.setScissor(window.innerWidth / 2, 50, window.innerWidth / 2.2, window.innerHeight / 2.2);
    renderer.render(sceneRD, camera);

    renderer.setScissor(80, window.innerHeight / 2 + 10, window.innerWidth / 2.2, window.innerHeight / 2.2);
    renderer.render(sceneLP, camera);

    renderer.setScissor(window.innerWidth / 2, window.innerHeight / 2 + 10, window.innerWidth / 2.2, window.innerHeight / 2.2);
    renderer.render(sceneRP, camera);

    // controls.update();
}
initThree()