three.js提供了很多创建几何体对象的方法，如BoxGeometry，SphereGeometry等，当然也可以自己创建几何体如下面这段代码
var gemo=new THREE.Geometry()
//定义几何体的顶点
var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]
//定义顶点的连接顺序，顺时针为向光，逆时针为背光
var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]
gemo.vertices=vertices;
gemo.faces=face;
gemo.computeFaceNormals()
var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),
new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]
//定义两种材质混和
var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)
mesh.children.forEach((item)=>{
item.receiveShadow=true;
})
这样就创建了一个四面体，其中THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)是创建多种材质的网格对象，接下来我们还可以用dat.GUI控制它的各个顶点
var gui= new dat.GUI()
function contorls(x,y,z){
var con=new function(){
this.x=x
this.y=y
this.z=z
}
return con;
}
var con=[]
con.push(contorls(0,0,0))
con.push(contorls(0,0,6))
con.push(contorls(7,0,0))
con.push(contorls(0,8,0))
for(var i=0;i<4;i++){
var flod=gui.addFolder('vertices'+i);
flod.add(con[i],'x',-10,10)
flod.add(con[i],'y',-10,10)
flod.add(con[i],'z',-10,10)
}
function render(){
var vertices=[]
for(var i=0;i<4;i++){
vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))
}
mesh.children.forEach((item)=>{
item.geometry.vertices=vertices//更新顶点
item.geometry.verticesNeedUpdate=true;//设置顶点需要更新
item.geometry.computeFaceNormals()
})
renderer.render(scene,camera)
requestAnimationFrame(render)
}
render()最后我们还可以克隆出另一个几何体，完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
body{margin:auto;
overflow:hidden;
}
</style>
</head>
<script src="../learning-threejs/libs/three.js"></script>
<script src="../learning-threejs/libs/stats.js"></script>
<script src="../learning-threejs/libs/dat.gui.js"></script>
<script src="../learning-threejs/libs/ConvexGeometry.js"></script>
<script src="../learning-threejs/libs/ParametricGeometries.js"></script>
<body>
<div id="Webgl-output"></div>
<div id='stats'></div>
<script>
function init(){
var stats=new Stats()
var scene=new THREE.Scene();
var renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.setClearColor(new THREE.Color(0xffffff))
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var planeGeometry=new THREE.PlaneGeometry(50,50)
var planeMesh=new THREE.MeshLambertMaterial({color:0xffffff})
var plane=new THREE.Mesh(planeGeometry,planeMesh);
plane.rotation.x=-0.5*Math.PI
plane.position.set(-10,0,-10);
plane.receiveShadow=true;
renderer.ShadowMapEnabled=true;
scene.add(plane)
camera.position.set(15,30,35)
var spotLight=new THREE.SpotLight({color:0xffffff});
spotLight.position.set(-20,30,35)
scene.add(spotLight)
var gemo=new THREE.Geometry()
var Mesh=[new THREE.MeshLambertMaterial({color:0x44ff44,opacity:0.6,transparent:true}),
new THREE.MeshBasicMaterial({color:0x000000,wireframe:true})]
var mesh=new THREE.SceneUtils.createMultiMaterialObject(gemo,Mesh)
mesh.children.forEach((item)=>{
item.receiveShadow=true;
})
var gui= new dat.GUI()
function contorls(x,y,z){
var con=new function(){
this.x=x
this.y=y
this.z=z
}
return con;
}
var con=[]
con.push(contorls(0,0,0))
con.push(contorls(0,0,6))
con.push(contorls(7,0,0))
con.push(contorls(0,8,0))
for(var i=0;i<4;i++){
var flod=gui.addFolder('vertices'+i);
flod.add(con[i],'x',-10,10)
flod.add(con[i],'y',-10,10)
flod.add(con[i],'z',-10,10)
}
var vertices=[new THREE.Vector3(0,0,0),new THREE.Vector3(0,0,6),new THREE.Vector3(7,0,0),new THREE.Vector3(0,8,0)]
var face=[new THREE.Face3(0,1,2),new THREE.Face3(0,2,3),new THREE.Face3(0,1,3),new THREE.Face3(1,2,3)]
gemo.vertices=vertices;
gemo.faces=face;
gemo.computeFaceNormals()
function render(){
var vertices=[]
for(var i=0;i<4;i++){
vertices.push(new THREE.Vector3(con[i].x,con[i].y,con[i].z))
}
mesh.children.forEach((item)=>{
item.geometry.vertices=vertices
item.geometry.verticesNeedUpdate=true;
item.geometry.computeFaceNormals()
})
renderer.render(scene,camera)
requestAnimationFrame(render)
}
render()
gui.add(new function(){
this.clone=function(){ var gemo=mesh.children[0].geometry.clone()
var materials = [
new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
];
var clone=new THREE.SceneUtils.createMultiMaterialObject(gemo,materials)
clone.children.forEach(item=>{item.receiveShadow=true})
clone.name='clone'
scene.remove(scene.getObjectByName('clone'))//移除原先克隆的
clone.translateX(5)
clone.translateZ(9)
scene.add(clone)
}
},'clone')
scene.add(mesh)
var ambientLight=new THREE.AmbientLight(0x0c0c0c)
scene.add(ambientLight)
scene.add(camera)
camera.lookAt(scene.position)
renderer.render(scene,camera)
document.getElementById('Webgl-output').appendChild(renderer.domElement)
window.resize=function(){
camera.ascept=window.innerWidth/window.innerHeight;
renderer.setSize(window.innerWidth,window.innerHeight);
camera.updateProjectionMatrix()
renderer.render(scene,camera)
}
}
window.onload=init()
</script>
</body>
</html>其中mesh.children[0].geometry.clone是创建一个坐标，平面跟原来一样的几何体