<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
}
#WebGL-output{
}
</style>
<script src="js/three.js"></script>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/dat.gui.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
</head>
<body>
<div id="WebGL-output">
</div>
<script>
$(function() {
var scene = new THREE.Scene();//场景
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机
var renderer = new THREE.WebGLRenderer();//渲染器
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
//创建一个坐标轴对象
var axes = new THREE.AxisHelper( 20 );
scene.add(axes);
// 正方形
var cubeGeometry = new THREE.CubeGeometry(10,10,0);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x=0;
cube.position.y=0;
cube.position.z=0;
scene.add(cube);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.up.x = 0;//相机以哪个方向为上方
camera.up.y = 1;//默认
camera.up.z = 0;
camera.lookAt(scene.position);
//两条直线 line2逐渐增长
var geometry = new THREE.Geometry();//声明一个空几何体对象
var geometry1 = new THREE.Geometry();
var vertices=[ new THREE.Vector3(4,4,0),
new THREE.Vector3(-4,4,0),
new THREE.Vector3(-4,-4,0),
new THREE.Vector3(4,-4,0)
];
var vertices1=[
new THREE.Vector3(4,4,0),
new THREE.Vector3(4,4,0),
new THREE.Vector3(-4,4,0),
new THREE.Vector3(-4,-4,0)
];
var materia=new THREE.LineBasicMaterial({
color:0xff0000
});
var materia1=new THREE.LineBasicMaterial({
color:0x000000
});
geometry.vertices=vertices; //顶点坐标添加到geometry对象
geometry1.vertices=vertices1;
var line=new THREE.Line(geometry,materia);//线条模型对象
var line1=new THREE.Line(geometry1,materia1);
scene.add(line);//线条对象添加到场景中
scene.add(line1);
$("#WebGL-output").append(renderer.domElement);
render();
function render() {
if(vertices[0].x<=-4&&vertices[1].y>=-4){
vertices[0].y -= 0.05;
vertices[1].y -= 0.05;
vertices1[2].y -= 0.05;
}else if(vertices[0].x>=-4){
vertices[0].x -= 0.05;
vertices1[1].x -= 0.05;
}
line.geometry.verticesNeedUpdate=true;//加上这个就行了
line1.geometry.verticesNeedUpdate=true;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
})
</script>
</body>
</html>
