1、测试页面：index.html
测试
2、代码实现：chapter2.1.js
步骤概述：初始化渲染器 > 初始化相机 > 初始化场景 > 建立几何图形并添加到场景中 > 渲染
function threeStart() { initThree(); initCamera(); initScene(); initObject(); renderer.clear(); renderer.render(scene, camera);}threeStart(); 初始化渲染器
var canvas = document.querySelector("canvas");canvas.width = window.innerWidth;canvas.height = window.innerHeight;var renderer;function initThree() { renderer = new THREE.WebGLRenderer({ canvas : canvas, antialias : true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff, 1);} 初始化相机
var camera;function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 1000; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt(0, 0, 0);} 初始化场景
var scene;function initScene () { scene = new THREE.Scene();} 生成几何图行并添加到场景中
var line;function initObject() { //定义两个顶点 var p1 = new THREE.Vector3(-100, -100, 0); var p2 = new THREE.Vector3(100, 100, 0); var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors }); geometry.vertices.push(p1); geometry.vertices.push(p2); var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); geometry.colors.push(color1, color2); line = new THREE.Line(geometry, material, THREE.LineSegments); scene.add(line);} 执行效果：
因为实例化材质的时候，用了vertexColors:THREE.VertexColors参数，因此直线的颜色是根据顶点的颜色渐变的。
3、直线进阶：网格线
var canvas = document.body.querySelector("canvas");canvas.width = window.innerWidth;canvas.height = window.innerHeight;var renderer;function initThree() { renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xFFF000, 1.0);}var camera;function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 1000; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt(0, 0, 0);}var scene;function initScene() { scene = new THREE.Scene();}var light;function initLight() { light = new THREE.DirectionalLight(0xFF0000, 1.0, 0); light.position.set(10, 10, 20); 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.y = (i * 50) - 500; scene.add(line); var line2 = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2})); line2.position.x = (i * 50) - 500; line2.rotation.z = 90 * Math.PI / 180; scene.add(line2); }}function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera);}threeStart(); 效果：
