補充：renderer.setClearColor可以改變背景顏色
//創建場景
var scene = new THREE.Scene();
var scene = new THREE.Scene();
//創建相機
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//創建渲染器
var renderer = new THREE.WebGLRenderer();
//設置背景顏色
renderer.setClearColor(0xffffff);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>畫一條線</title>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="three.min.js"></script>
<style type="text/css">
div#canvas-frame{
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: gray;
}
</style>
<script type="text/javascript">
var renderer;
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(0xfffffff,1.0);
}
var camera;
function initCam(){
camera = new THREE.PerspectiveCamera( 75,width/height,1,10000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 1000;
}
var scene;
function initScene(){
scene = new THREE.Scene();
}
var light;
function initLight(){
light = new THREE.DirectionalLight( 0xff0000, 1.0 );
light.position.set(100,100,200);
scene.add(light);
}
var cube;
function initObject(){
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({vertexColors:true});
/*參數是元組形式,如果默認不使用頂點顏色，則是白色
{vertexColors:false,color:0xff0000}可以使線條變成紅色
*/
var color1 = new THREE.Color(0x444444);
var color2 = new THREE.Color(0xff0000);
/*三維空間中的一個點由三個座標表示，如果不定義
p1和p2都爲零。下面的geometry，即幾何體，是由頂點構成的
這兒傳入兩個頂點，構成了一條線，如果傳入三個，可以構成
一個三角形
*/
var p1 = new THREE.Vector3(-300, 0, 0);
var p2 = new THREE.Vector3(300, 0, 0);
// var p3 = new THREE.Vector3(0, -100, 0);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
// geometry.vertices.push(p3);
geometry.colors.push(color1,color2);//對應p1和p2的顏色,中間點使用顏色插值
var line = new THREE.Line(geometry,material,THREE.LineSegments);
//lineSegments表示各個點連接的方式，這兒是分段。也可以使用其他參數。
scene.add(line);
}
function threeStart(){
initThree();
initCam();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene,camera);
}
</script>
</head>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
理解的都寫在註釋裏了，不理解的還在學習中。