WEBGL-3-绘制SIN波形

<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();//以后只要在这里修改执行代码

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）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。

• 第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。

• 接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。