<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
margin: 0;
padding: 0;
}
div#canvas-frame {
border: none;
cursor: pointer;
100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body>
<div id="canvas-frame"></div>
<script src="js/three.js"></script>
<script>
//定义一些需要的变量
var renderer, camera, scene, light, object;
var width, height;
//初始化three
function initThree(){
width = document.getElementById('canvas-frame').clientWidth;
height=document.getElementById('canvas-frame').clientHeight;
renderer= new THREE.WebGLRenderer({
antialias:true
});
renderer.setSize(width,height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}
//定义相机
function initCamera(){
camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
camera.position.x=0;
camera.position.y=1000;
camera.position.z=0;
camera.up.x=0;
camera.up.y=0;
camera.up.z=1;
camera.lookAt({
x:0,
y:0,
z:0
});
}
//定义场景
function initScene(){
scene = new THREE.Scene();
}
//定义灯光
function initLight(){
light = new THREE.DirectionalLight(0xFF0000,1.0,0);
light.position.set(100,100,200);
scene.add(light);
}
var cube;
function initObject(){
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3(-500,0,0));
geometry.vertices.push( new THREE.Vector3(500,0,0));
for(var i = 0;i<=20;i++){
var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
line.position.z=(i*50)-500;
scene.add(line);
var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
}
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
window.onload = threeStart();
</script>
</body>
</html>