<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="../static/three.js-master/build/three.js"></script>
<script>
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize( window.innerWidth, window.innerHeight ); // 設定渲染器的寬度和高度
document.body.appendChild( renderer.domElement );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 ); // 透視錄影機
camera.position.set( 0, 0, 100 ); // 設定坐标
camera.lookAt( 0, 0, 0 );
var scene = new THREE.Scene(); // 場景
// 上面是錄影機 下面是材料
//create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial( { color: 0x0000ff } ); // 定義線條的材料,接收字典類型的參數
var geometry = new THREE.Geometry(); // 聲明一個幾何體geometry
geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
var line = new THREE.Line( geometry, material ); // 根據材料建立線條
scene.add( line ); // 将線條添加到場景内
renderer.render( scene, camera ); // 渲染器将場景和錄影機及線條渲染出來