文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从P5.js中立方体的每个面中提取纹理

问如何从P5.js中立方体的每个面中提取纹理
EN

Stack Overflow用户

提问于 2022-04-25 15:48:28

回答 1查看 125关注 0票数 1

我一直在用perlin噪音做一些P5.js的工作。我已经做了一个立方体与perlin噪声纹理到处都是。但我的问题是:我能分开每张脸的纹理吗？

你可能想知道我为什么需要这个。我需要做一个立体地图，所以我需要每个脸的纹理，并建立图像。

我想我会用图像把这件事弄清楚。

这是我的立方体。

我要做这样的事

现在我给你看我的代码

function setup() {

    createCanvas(500,500, WEBGL);
    angleMode(DEGREES)
    noiseDetail(1)
    
    //noLoop();
}

function draw() {

    background(30);
    noStroke();

    translate(0,0, -width)

    rotateX(frameCount * 3)
    rotateY(frameCount * 3)
    

    translate(-width/2, -height/2, -width/2);

    let space = width / 20;
    let indexX = 0;

    for (let x = 0; x < width; x += space) {

        let indexY = 0;
        for(let y = 0; y < height; y += space) {

            let indexZ = 0
            for (let z = 0; z < width; z += space) {
                
                push();

                let h = noise(indexX, indexY, indexZ) * 255;

                fill(h);

                translate(x,y,z)

                box(space);

                pop();

                indexZ += 0.1;
            }

        indexY += 0.1;
        
     }
     indexX += 0.1; 
    }

    
}

javascript

p5.js

perlin-noise

回答 1

Stack Overflow用户

发布于 2022-04-26 03:09:12

无论何时计算h，都应该将其与indexX、indexY、indexZ (或x、y、z )一起保存？我不确定哪个变量表示代码中每个像素在数组中的位置。你可能会得到这样的结果：

const myArray =
[
  {
    h: 123123,
    indexX: 234,
    indexY: 345,
    indexZ: 456,
  },
  ...
]

现在，您有了关于您希望在每个位置放置什么h的信息，您只需要了解如何将立方体表面上的每个点映射到像您所链接的二维地图上。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72002268

复制

相似问题

问如何从P5.js中立方体的每个面中提取纹理
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从P5.js中立方体的每个面中提取纹理EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从P5.js中立方体的每个面中提取纹理
EN