微信3d小游戏(three)-Bottle绘制(贴图)

最新推荐文章于 2022-09-20 16:12:32 发布

_Zou

最新推荐文章于 2022-09-20 16:12:32 发布

阅读量307

点赞数

分类专栏：微信小游戏文章标签： html5 es6 javascript canvas 小程序

zouzouzou

本文链接：https://blog.csdn.net/weixin_40676050/article/details/108696367

版权

微信小游戏专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Conf/bottle-conf.js

export default {

initPosition: {

x: -15,

y: 0,

z: 0

},

bodyWidth: 3.84

}

2.src/objects/bottles.js

import bottleConf from '../../confs/bottle-conf'

class Bottle {

constructor () {

}

init () {

this.loader = new THREE.TextureLoader()//纹理加载器

this.obj = new THREE.Object3D()

    this.obj.name = 'bottle'

this.obj.position.set(bottleConf.initPosition.x, bottleConf.initPosition.y + 30, bottleConf.initPosition.z)

this.bottle = new THREE.Object3D()

const texture = this.loader.load('/game/res/images/head.png')//THREE要game开头加载路径

const basicMaterial = new THREE.MeshBasicMaterial({ map: texture })

const headRadius = 2.1 * 0.72

    this.human = new THREE.Object3D()

    this.head = new THREE.Mesh(new THREE.OctahedronGeometry(headRadius * 1.4), basicMaterial)//头部菱形

this.head.castShadow = true

// this.head.rotateY(20)

var texture2 = this.loader.load('/game/res/images/bottom.png')

//底部

    this.bottom = new THREE.Mesh(new THREE.CylinderGeometry(0.88 * headRadius, 1.27 * headRadius, 2.68 * headRadius, 20), new THREE.MeshBasicMaterial({ map: texture2 }))

    this.bottom.rotation.y = 4.7

    this.bottom.castShadow = true

//中间部分

var middleGeometry = new THREE.CylinderGeometry(headRadius, 0.88 * headRadius, 1.2 * headRadius, 20)

var texture3 = this.loader.load('/game/res/images/top.png')

const middleMaterial = new THREE.MeshBasicMaterial({ map: texture3 })

const materials = [middleMaterial, basicMaterial]

const totalGeometry = new THREE.Geometry()

    middleGeometry.rotateY(4.7)

//     utils.merge(totalGeometry, middleGeometry, 0, [{ x: 0, y: this.bottom.position.y + 1.94 * headRadius, z: 0 }])

const topGeometry = new THREE.SphereGeometry(headRadius, 20, 20)

    topGeometry.scale(1, 0.54, 1)

//     utils.merge(totalGeometry, topGeometry, 1, [{ x: 0, y: this.bottom.position.y + 2.54 * headRadius, z: 0 }])

    this.middle = new THREE.Mesh(totalGeometry, materials)

    this.middle.castShadow = true

//加载模型

    this.body = new THREE.Object3D()

    this.body.add(this.bottom)

    this.body.add(this.middle)

    this.human.add(this.body)

this.head.position.y = 7.56

this.head.position.x = 0

this.head.position.z = 0

    this.human.add(this.head)

    this.bottle.add(this.human)

    this.bottle.position.y = 2.3

this.bottle.position.x = 0

this.bottle.position.z = 0

this.obj.add(this.bottle)

}

}

export default new Bottle()

3.src/pages.game-page.js

Init

this.bottle = bottle

this.bottle.init()

this.addBoottle()

addBoottle(){

this.scene.instance.add(this.bottle.obj)

}

4.libs/weap-adapter.js

在 document 的定义(742行左右)中添加 createElementNS，然后忽略掉 NameSpace 即可

createElementNS: function createElementNS(nameSpace, tagName) {

return this.createElement(tagName);

},

注：若用比较老的three.js还要添加ImagesBitmap

5.utils/index.js

merge (totalGeometry, geometry, index, positions) {

for (var i = 0, len = geometry.faces.length; i < len; ++i) {

geometry.faces[i].materialIndex = 0;

}

var mesh = new THREE.Mesh(geometry);

for (var i = 0, len = positions.length; i < len; ++i) {

mesh.position.set(positions[i].x, positions[i].y, positions[i].z);

mesh.updateMatrix();

totalGeometry.merge(mesh.geometry, mesh.matrix, index);

}

}