<script type="module">

import * as THREE from 'https://unpkg.com/three/build/three.module.js';

var renderer;

var camera;

var scene ;

var material;

InitRender();

Initcamera();

InitScene();

StartDraw();//以后只要在這里修改執(zhí)行代碼

function Initcamera()

{

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );

camera.position.set( 0, 0, 100 );

camera.lookAt( 0, 0, 0 );

}

function InitScene()

{

? ?scene = new THREE.Scene();

? ?material = new THREE.LineBasicMaterial( { color: 0x00ffff } );

}

function InitRender()

{

renderer = new THREE.WebGLRenderer();

renderer.setSize( 1024,700);

document.body.appendChild( renderer.domElement );

}

function StartDraw()

{

for(var j=0;j<8;j++)

{

var points = [];

points[j]=[];

for(var i=-2500;i<2500;i++)

{

? points[j].push( new THREE.Vector3( i/5, Math.sin(i)+j*10-30,0 ) );

}

var geometry=[];

geometry[j] = new THREE.BufferGeometry().setFromPoints( points[j]);

var line =[];

line[j]= new THREE.Line( geometry[j], material );

scene.add( line[j] );

}

renderer.render( scene, camera );

}

</script>

THREE.PerspectiveCamera( 45, 1.0, 1, 500 );

• 第一個參數是視野角度（FOV）。視野角度就是無論在什么時候，你所能在顯示器上看到的場景的范圍，它的單位是角度(與弧度區(qū)分開)。

• 第二個參數是長寬比（aspect ratio）。 也就是你用一個物體的寬除以它的高的值。比如說，當你在一個寬屏電視上播放老電影時，可以看到圖像仿佛是被壓扁的。

• 接下來的兩個參數是近截面（near）和遠截面（far）。 當物體某些部分比攝像機的遠截面遠或者比近截面近的時候，該這些部分將不會被渲染到場景中。