webgl 入门

下载 three.js 库文件 git clone github.com/mrdoob/thre…

第一个three.js文件_WebGL三维场景 body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ }

/**

• 创建拉伸网格模型 */ var shape = new THREE.Shape(); /*四条直线绘制一个矩形轮廓/ shape.moveTo(0,0);//起点 shape.lineTo(0,100);//第2点 shape.lineTo(100,100);//第3点 shape.lineTo(100,0);//第4点 shape.lineTo(0,0);//第5点

/**创建轮廓的扫描轨迹(3D样条曲线)*/ // var curve = new THREE.SplineCurve3([ // new THREE.Vector3( -10, -50, -50 ), // new THREE.Vector3( 10, 0, 0 ), // new THREE.Vector3( 8, 50, 50 ), // new THREE.Vector3( -5, 0, 100) // ]);

var geometry = new THREE.ExtrudeGeometry(//拉伸造型 shape,//二维轮廓 //拉伸参数 { amount:120,//拉伸长度 // extrudePath:curve,//选择扫描轨迹 bevelEnabled:false//无倒角 } );

var material=new THREE.PointsMaterial({
color:0x0000ff,
size:5.0//点对象像素尺寸

});//材质对象 var mesh=new THREE.Points(geometry,material);//点模型对象

//var tomesh =new THREE.mesh(geometry,material); //scene.add(mesh);//点模型添加到场景中 //scene.add(tomesh);

/**

• 创建旋转网格模型 */ var points = [ new THREE.Vector2(50,60), new THREE.Vector2(25,0), new THREE.Vector2(50,-60) ]; var geometry = new THREE.LatheGeometry(points,30); var material=new THREE.MeshPhongMaterial({ color:0x0000ff,//三角面颜色 side:THREE.DoubleSide//两面可见 });//材质对象 material.wireframe = true;//线条模式渲染(查看细分数) var mesh=new THREE.Mesh(geometry,material);//旋转网格模型对象 scene.add(mesh);//旋转网格模型添加到场景中

// 输出stl文件 // var exput=new THREE.OBJExporter(); // exput.parse(geometry); // //exput.parsemesh

// var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry // var material = new THREE.MeshLambertMaterial({ // color: 0x0000ff // }); //材质对象Material // var mesh_1 = new THREE.Mesh(geometry, material); //网格模型对象Mesh // scene.add(mesh_1); //网格模型添加到场景中

const exporter = new THREE.STLExporter();

// second argument is a list of options const data = exporter.parse( mesh, { binary: true } );

const link = document.createElement( 'a' ); function save( blob, filename ) {

	if ( link.href ) {

		URL.revokeObjectURL( link.href );

	}

	link.href = URL.createObjectURL( blob );
	link.download = filename || 'data.json';
	link.dispatchEvent( new MouseEvent( 'click' ) );

}

function saveString( text, filename ) {

save( new Blob( [ text ], { type: 'text/plain' } ), filename );

}

saveString(data,"r.stl");

/**
 * 光源设置
 */
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
// console.log(scene)
// console.log(scene.children)
/**
 * 相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作   指定场景、相机作为参数
renderer.render(scene, camera);