- 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);
}
}