<!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; ???????????width: 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>
threejs学习笔记03---网格
原文地址：http://www.cnblogs.com/Webyangbowen/p/8058861.html