尝试创建具有多种颜色的类似对象的标志

时间:2019-07-08 07:44:08

标签: javascript three.js

我正在尝试创建一个看起来像标志的对象,该标志带有水平和垂直延伸的黑白条纹,就像比赛结束时的终点线。

我需要一种方法来为我的标志着色(因此,内部矩形填充有黑色和白色),这是一个CubeGeometry,看起来像下面的图片,我无法弄清楚如何用多种颜色为该标志着色它类似于终点线标志(在许多赛车游戏中很常见)

这是标志的代码

Flag = function(){
    this.body = new THREE.Group();

    var polegeom = new THREE.CylinderGeometry(0.5, 0.5, 50, 20, 1);
    this.pole = new THREE.Mesh(polegeom, pinkMat);
    this.pole.position.x = +30;
    this.pole.position.y = +20;
    this.pole.position.z = -50;
    this.pole.castShadow = false;
    this.body.add(this.pole);

    var planegeom = new THREE.CubeGeometry(20, 10, 0.5, 10, 10);
    this.flag = new THREE.Mesh(planegeom, flagMat);
    this.flag.position.x = 10;
    this.flag.position.y = 20;
    this.flag.position.z = 0;
    this.pole.add(this.flag);
}
function createFlag() {
    var pole = new Flag();
    scene.add(pole.body);
}
window.addEventListener('load', init, false);

function loop(){
    render();
    requestAnimationFrame(loop);
}

function init(event) {
    initScreenAnd3D();
    createLights();
    createFlag();
    loop();
}

编辑:
找到了一种解决方案的方法,

var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );

var floorMaterial = new THREE.MeshBasicMaterial( 
        { map: floorTexture, side: THREE.DoubleSide} 
    );

this.flag = new THREE.Mesh(planegeom, floorMaterial);
this.pole.add(this.flag);

0 个答案:

没有答案