微信小游戏中three.js离屏画布的示例代码

让我们来详细讲解在微信小游戏中使用three.js的离屏画布的方法。

什么是离屏画布

在传统canvas绘制中，通常将其绘制在页面中的某个元素之上，从而展示出来。而把canvas绘制在另一个离屏的canvas上，也就是不将其展示在页面上，而是在后台进行绘制，我们称之为离屏画布。

在three.js中，离屏画布通常被称为渲染目标（RenderTarget）。它们可以在内存中被创建，以实现很多高级特效，比如阴影、全局照明等。

在微信小游戏中使用three.js，也可以使用离屏画布。

如何创建离屏画布

在three.js中，创建一个离屏画布需要以下步骤：

首先创建一个新的WebGL渲染器实例。

let renderer = new THREE.WebGLRenderer();

设置渲染器的尺寸，即设置渲染目标的尺寸。

let width = 256, height = 256;

renderer.setClearColor(0xffffff);
renderer.setSize(width, height);

创建一个新的RenderTarget实例，并指定其尺寸和清除颜色。

let renderTarget = new THREE.WebGLRenderTarget(width, height, {
    format: THREE.RGBAFormat,
    stencilBuffer: false,
    depthBuffer: true,
    depthWrite: true,
    depthTest: true
});

renderTarget.clearColor = new THREE.Color(0xffffff);
renderTarget.clearDepth = 1;

在需要进行渲染操作时，将场景和相机渲染到这个RenderTarget上。

let camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
let scene = new THREE.Scene();

renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

完成以上步骤，我们就可以创建渲染目标了。可以根据需要自己构建场景和相机。

离屏画布在微信小游戏中使用

在微信小游戏中，我们需要将离屏画布绑定到微信小游戏提供的canvas中展示出来。具体步骤如下：

将渲染器实例的输出canvas设置为一个隐藏的离屏canvas。

let canvasOffscreen = wx.createCanvas(); // 创建离屏canvas
canvasOffscreen.width = width;
canvasOffscreen.height = height;

let renderer = new THREE.WebGLRenderer({canvas: canvasOffscreen});
renderer.setClearColor(0xffffff);
renderer.setSize(width, height);

创建一个展示离屏画布的canvas，并绑定事件。

const query = wx.createSelectorQuery();
query.select('#canvas').fields({node: true, size: true})
    .exec((res) => {
        const canvas = res[0].node;
        const width = res[0].width;
        const height = res[0].height;

        const context = canvas.getContext('webgl', {antialias: true});

        renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
        renderer.setSize(width, height);

        function render() {
            canvas.requestAnimationFrame(render);
            renderer.render(scene, camera);

            const image = canvasOffscreen.createImage();
            context.drawImage(image, 0, 0);
        }

        render();
    });

在上面的代码中，我们首先通过创建微信小游戏提供的canvas，并获取其上下文context，然后在渲染时，将离屏画布渲染出来，再通过调用canvasOffscreen.createImage()获取离屏画布的图片，并将其绘制到微信小游戏的canvas上。

示例说明

示例一

下面我们来看一个简单的示例。在这个示例中，我们会创建一个旋转的立方体，然后将其绘制到离屏画布上，并最终展示到微信小游戏提供的canvas中。

let width = 256, height = 256;

let renderer = new THREE.WebGLRenderer({ canvas: canvasOffscreen });
renderer.setClearColor(0xffffff);
renderer.setSize(width, height);

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.z = 5;

let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshNormalMaterial();
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

let clock = new THREE.Clock();

function render() {
    renderer.render(scene, camera);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    const image = canvasOffscreen.createImage();
    context.drawImage(image, 0, 0);

    requestAnimationFrame(render);
}

render();

在这个示例中，我们首先创建一个WebGLRenderer实例，并指定为使用我们自己创建的离屏canvas。然后创建一个场景和相机，以及一个旋转的立方体。每一帧渲染时，都要进行一次渲染操作，将场景和相机渲染到离屏画布上，然后再将离屏画布绑定的图片绘制到微信小游戏提供的canvas上。

示例二

在这个示例中，我们会创建一个简单的球体模型，然后将其绘制到离屏画布上。与上面的示例不同的是，这里使用了RenderPass和ShaderPass来对场景进行后期处理，实现了一些精美特效。

let width = 256, height = 256;

let renderer = new THREE.WebGLRenderer({ canvas: canvasOffscreen });
renderer.setClearColor(0xffffff);
renderer.setSize(width, height);

let scene = new THREE.Scene();

let camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.z = 5;

let geometry = new THREE.SphereGeometry(1, 32, 32);
let material = new THREE.MeshPhongMaterial({color: 0xffffff});

let mesh = new THREE.Mesh(geometry, material);
mesh.position.y = 1;
scene.add(mesh);

let light = new THREE.PointLight(0xffffff, 1, 10, 2);
light.position.set(0, 3, -5);
scene.add(light);

let ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

let composer = new THREE.EffectComposer(renderer, renderTarget);

let renderScene = new THREE.RenderPass(scene, camera);
composer.addPass(renderScene);

let bloomPass = new THREE.BloomPass(1.5, 25, 4, 256);
composer.addPass(bloomPass);

let filmPass = new THREE.FilmPass(0.1, 0.5, 2048, false);
composer.addPass(filmPass);

let clock = new THREE.Clock();

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.setRenderTarget(renderTarget);
    renderer.render(scene, camera);

    composer.render(0.1);

    const image = canvasOffscreen.createImage();
    context.drawImage(image, 0, 0);

    requestAnimationFrame(render);
}

render();

在这个示例中，我们首先创建一个WebGLRenderer实例，并指定为使用我们自己创建的离屏canvas。然后创建一个球体模型，点光源和环境光。在之后的渲染处理中，我们使用了EffectComposer、RenderPass、BloomPass和FilmPass来对场景进行后期处理，从而实现了灵动的效果。