3D小游戏(three)-block增加纹理样式与彩色block

目录

block增加纹理样式

彩色Block开发

---

block增加纹理样式

1. src/block/cuboid.js

this.loader = new THREE.TextureLoader()

if (type =='color') {

var geometry = new THREE.BoxGeometry(size, this.height, size)

var material = new THREE.MeshPhongMaterial({

color: 0xffffff

})

this.instance = new THREE.Mesh(geometry, material)

}else if (type=='well') {

const geometry = new THREE.BoxGeometry(size, this.height, size)

const material = new THREE.MeshLambertMaterial({

map: this.loader.load('res/images/well.png')

})

//用的是faceVertexUv改变贴图位置

util.mapUv(280,428,geometry,1,0,0,280,148)//front

util.mapUv(280,428,geometry,2,0,148,280,428)//top

util.mapUv(280,428,geometry,4,0,0,280,148,true)//righ

this.instance = new THREE.Mesh( geometry, material )

}

1. util/index.js

//纹理贴图UV

mapUv (textureWidth, textureHeight, geometry, faceIdx, x1, y1, x2, y2, flag) {

var tileUvW = 1 / textureWidth;

var tileUvH = 1 / textureHeight;

if (geometry.faces[faceIdx] instanceof THREE.Face3) {

var UVs = geometry.faceVertexUvs[0][faceIdx * 2];

if (faceIdx == 4 && !flag) {

UVs[0].x = x1 * tileUvW;UVs[0].y = y1 * tileUvH;

UVs[2].x = x1 * tileUvW;UVs[2].y = y2 * tileUvH;

UVs[1].x = x2 * tileUvW;UVs[1].y = y1 * tileUvH;

} else {

UVs[0].x = x1 * tileUvW;UVs[0].y = y1 * tileUvH;

UVs[1].x = x1 * tileUvW;UVs[1].y = y2 * tileUvH;

UVs[2].x = x2 * tileUvW;UVs[2].y = y1 * tileUvH;

}

var UVs = geometry.faceVertexUvs[0][faceIdx * 2 + 1];

if (faceIdx == 4 && !flag) {

UVs[2].x = x1 * tileUvW;UVs[2].y = y2 * tileUvH;

UVs[1].x = x2 * tileUvW;UVs[1].y = y2 * tileUvH;

UVs[0].x = x2 * tileUvW;UVs[0].y = y1 * tileUvH;

} else {

UVs[0].x = x1 * tileUvW;UVs[0].y = y2 * tileUvH;

UVs[1].x = x2 * tileUvW;UVs[1].y = y2 * tileUvH;

UVs[2].x = x2 * tileUvW;UVs[2].y = y1 * tileUvH;

}

}

}

彩色Block开发

1. src/block/cuboid.js

import blockConf from '../../confs/block-conf'

if (type =='color') {

let currentColor

const seed = Math.floor(Math.random()*10)

switch (seed) {

case 0:

currentColor = blockConf.colors.orange

break;

case 1:

currentColor = blockConf.colors.orangeDark

break;

case 2:

currentColor = blockConf.colors.purple

break;

case 3:

currentColor = blockConf.colors.green

break;

case 4:

currentColor = blockConf.colors.blue

break;

case 5:

currentColor = blockConf.colors.yellow

break;

default:

currentColor = blockConf.colors.green

break;

}

const innerMaterial = new THREE.MeshLambertMaterial({color:blockConf.colors.whtie})

const outerMaterial = new THREE.MeshLambertMaterial({color:currentColor})

const innerHeight = 3

const outerHeight = (blockConf.height-innerHeight)/2

const innerGeometry = new THREE.BoxGeometry(size,innerHeight,size)

const outerGeometry = new THREE.BoxGeometry(size,outerHeight,size)

const topMesh = new THREE.Mesh(outerGeometry,outerMaterial)

topMesh.position.y = (innerHeight+outerHeight)/2

topMesh.receiveShadow = true

topMesh.castShadow = true

const middleMesh = new THREE.Mesh(innerGeometry,innerMaterial)

middleMesh.receiveShadow = true

middleMesh.castShadow = true

const bottomMesh = new THREE.Mesh(outerGeometry,outerMaterial)

bottomMesh.position.y = -(innerHeight+outerHeight)/2

bottomMesh.receiveShadow = true

bottomMesh.castShadow = true

const totalMesh = new THREE.Object3D()

totalMesh.add(topMesh)

totalMesh.add(middleMesh)

totalMesh.add(bottomMesh)

this.instance = totalMesh