<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#thecanvas {
width: 600px;
height: 600px;
}
</style>
<script src="http://localhost/20170629threejs/three.js-master/build/three.js"></script>
<script src="http://localhost/20170629threejs/three.js-master/examples/js/controls/OrbitControls.js"></script>
</head>
<body >
<div id="thecanvas"></div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
//var camera = new THREE.OrthographicCamera(-200,200,200, -200, 1, 1000);
camera.position.set(200, 200, 200);
camera.up.x = -1;
camera.up.y = 1;
camera.up.z = -1;
camera.lookAt({
x: 0,
y: 0,
z: 0
});
//拉伸网格模型
var shape = new THREE.Shape();
/**四条直线绘制一个矩形轮廓*/
shape.moveTo(-10,-10);//起点
shape.lineTo(-10,10);//第2点
shape.lineTo(10,10);//第3点
shape.lineTo(10,-10);//第4点
shape.lineTo(-10,-10);//第5点
/**创建轮廓的扫描轨迹(3D样条曲线)*/
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( 0, 0,0 ),
new THREE.Vector3( 0, 10,0 )
]);
var geometry = new THREE.ExtrudeGeometry(//拉伸造型
shape,//二维轮廓
//拉伸参数
{
bevelEnabled:false,//无倒角
extrudePath:curve,//选择扫描轨迹
steps:50//扫描方向细分数
}
);
//var textureLoader = new THREE.TextureLoader();
//var texture = textureLoader.load("./source/image/0001.jpg");//加载纹理贴图
var material=new THREE.MeshPhongMaterial({
color:0x008800,
//map:texture
});//材质对象
var mesharr=[];
for(var i=0;i<10;i++){
var rowmesharr=[];
for(var j=0;j<10;j++) {
var mesh = new THREE.Mesh(geometry, material);//扫描网格模型对象
scene.add(mesh);//扫描网格模型添加到场景中
mesh.translateX(-100 + 20 * i);
mesh.translateZ(-100 + 20 * j);
rowmesharr.push(mesh);
}
mesharr.push(rowmesharr);
}
var shape = new THREE.Shape();
shape.absarc(0,0,100, 0, 0.5*Math.PI);
var geometry1 = new THREE.ShapeGeometry(shape);
var material1=new THREE.LineBasicMaterial({color:0x0000ff});//材质对象
var line=new THREE.Line(geometry1,material1);//线模型对象
scene.add(line);//点模型添加到场景中
//立方体
var box=new THREE.PlaneGeometry(200,200);
//THREE.DoubleSide设置两面均显示
var boxmaterial=new THREE.MeshLambertMaterial({
color:0x008800,
side: THREE.DoubleSide
});
var boxmesh = new THREE.Mesh(box, boxmaterial);
boxmesh.rotateX(Math.PI/2);
scene.add(boxmesh);
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
//环境光
var ambient = new THREE.AmbientLight(0x004400);
scene.add(ambient);
//渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(600, 600);
renderer.setClearColor(0xffffff, 1);
document.getElementById("thecanvas").appendChild(renderer.domElement);
var i=0;
function init() {
renderer.render(scene, camera);
i=i+0.1;
for(var j=0;j<mesharr.length;j++) {
for(var z=0;z<mesharr[j].length;z++) {
var bs;
bs = 2 * Math.sin(i + 100 / j-100/z) + 2;
mesharr[j][z].scale.y = bs;
}
}
requestAnimationFrame(init);
}
init();
var controls = new THREE.OrbitControls(camera);//创建控件对象
//controls.addEventListener('change', init);
</script>
</body>
</html>
