在 WEBGL canvas、p5 js 中使用可变字体

Question

我有一个 WEBGL canvas，我正在其中加载 3d 模型。我还有一个用 createP 创建的可变字体的文本。问题是我需要文本位于背景和 3d 模型之间。但是我只能在 canvas 前面有文字（在 3d 模型之上）。有什么办法可以实现吗？

Ps。使用 text() 创建文本不允许我具有可变权重值。

let kalameh;
var cnv;
let img;

function preload(){
    img = loadImage('assets/lines.png');
    kalameh = loadModel('kalameh.obj');  
}

function setup() {
    cnv = createCanvas(700, 700, WEBGL);
    var x = (windowWidth - width) / 2;
    var y = (windowHeight - height) / 2;
    cnv.position(x, y);

    wordA = createP('my text');
}

function draw() {
    background(220, 220, 220);

    wordA.style('font-size', '110px');
    wordA.style('font-weight', '200');
    wordA.style('font-stretch', '200%');
    wordA.style('align', 'center');
    wordA.position(40,25);

    image(img, -1*windowWidth/2, -1*windowHeight/2, windowWidth, windowHeight);

    translate (0,0,100);

    pointLight(255,255,255, -350,0,400);
    pointLight(255,255,255, 350,0,400);


    ambientMaterial(255);
    noStroke();


    scale (0.25);
    model(kalameh);

}

Answer 1

您可以创建两个草图（因此是两个画布）并分配 -1 和 1 的 z-index 属性，分别使它们成为前景草图和背景草图。然后，您可以将创建的段落元素夹在两个画布之间，方法是给它一个 0 的 z-index。然后，您可以通过在绘制循环开始时调用 clear() 使前景草图透明。

在下面的代码片段中，3D 对象在文本段落的前面，而 "background" 的白色方块在文本后面。

let testP;

new p5(function(p){
 
    p.setup = function() {
      const foregroundCanvas = p.createCanvas(400, 400, p.WEBGL);
      foregroundCanvas.id("foregroundSketch");
      foregroundCanvas.position(0, 0);
      p.normalMaterial();
      
      testP = p.createP("In front of background / behind object ")
      testP.position(95, 115);
      testP.id("sandwichedParagraph")
      p.angleMode(p.RADIANS)
    }
 
    p.draw = function() {
        p.clear();
        //drag to move the world.
        // p.orbitControl();
        p.push();
        let rotateAngle = p.sin(p.frameCount/50);
        p.rotateX(rotateAngle/2);
        p.rotateY(-rotateAngle);
        p.rotateZ(rotateAngle);
        p.box(200, 100, 40);
        p.pop();
    }
}, "foregroundSketch");



new p5(function(p){
 
    p.setup = function() {
      const backgroundCanvas = p.createCanvas(400, 400);
      // backgroundCanvas.parent("wrapper")
      backgroundCanvas.position(0, 0);
      backgroundCanvas.id("backgroundSketch")
      
      p.noStroke();
    }
    p.draw = function() {
        p.background(200);
        let shiftAmount = p.map(p.sin(p.frameCount/60), -1, 1, 80, 310);
        p.rect(shiftAmount, 120, 40, 40);
    }
}, "backgroundSketch");

html, body {
  margin: 0;
  padding: 0;
}

/* The sketch with the white square has z-index of -1 (background!) */
#backgroundSketch {
  z-index: -1;
  position: absolute;
}

/* The <p> has z-index of 0 (sandwiched between both sketches)*/
#sandwichedParagraph {
  z-index: 0;
  position: absolute;
}

/* The sketch with the object has z-index of 1 (foreground!)*/
#foregroundSketch {
  z-index: 1;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

在 WEBGL canvas、p5 js 中使用可变字体

Using variable font inside WEBGL canvas, p5 js

html

javascript

3d

webgl

p5.js