ThreeJS学习之旅（三）_H5之家 - 中国HTML5教程资源分享第一站

ThreeJS学习之旅（三）

原创 2017年02月19日 17:02:22

标签：

639

编辑

删除

这一篇主要学习代码重构的方法以及ThreeJS中的一些对象属性的介绍和使用：

官方代码解析：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/Three.js" data-ke-src="js/Three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>
<script>
var renderer;//定义一个全局变量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);
//将创建的canvas元素(此处的canvas元素为three.js创建)添加到html文档中
document.getElementById('canvas-frame').appendChild(renderer.domElement);
//设置渲染器的清除色(设置canvas背景色(clearColor)和背景色透明度（clearAlpha） )
renderer.setClearColor(0xFFFFFF, 1.0);
}

//设置相机
var camera;//定义一个全局变量的camera
//初始化相机设置
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);//此处为设置透视投影的相机，默认情况下，相机的上方向为Y轴，右方向为X轴，沿着Z轴垂直朝里(视眼角:fov;纵横比:aspect；相机离视最近的距离:near;相机离视体积最远距离:far)
//设置相机的位置坐标
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
//设置相机的上为z轴方向
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
//设置视野的中心坐标
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}

//设置场景
var scene;//定义全局变量scene（场景：一个三维空间）

//场景初始化设置
function initScene() {
scene = new THREE.Scene();
}

//设置光源
var light;//声明全局变量

//初始化光源设置
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);//设置平行光(颜色，强度，方向)，需设置position，从(0,0,0)到这个position的向量即是平行光的方向。
light.position.set(100, 100, 200);//光源的向量，即光源的位置
scene.add(light);//追加光源到场景
}

//设置物体对象
var cube;//定义全局变量cube
//初始化对象设置
function initObject() {
//实例化对象
var geometry = new THREE.Geometry();
//材质
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors} );
//颜色
var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

// 线的材质可以由2点的颜色决定
var p1 = new THREE.Vector3( -100, 0, 100 );
var p2 = new THREE.Vector3( 100, 0, -100 );
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.colors.push( color1, color2 );
//绘制一条线
var line = new THREE.Line( geometry, material, THREE.LinePieces );
scene.add(line);
}
//定义渲染
function render()
{
renderer.clear();
renderer.render(scene, camera);
requestAnimationFrame(render);
}

//主执行函数
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
render();
}

</script>
</head>

<body>
<div></div>
</body>
</html>

three.js的一些基本知识总结：

three.js文档中渲染器的分支：
CanvasRenderer
DOMRenderer
SVGRenderer
WebGLRenderer
WebGLRendererTarget
WebGLRendererTargetCube
WebGLShaders

渲染器参数的介绍：
renderer = new THREE.WebGLRenderer({
antialias:true,// true/false表示是否开启反锯齿
precision:"highp",// highp/mediump/lowp 表示着色精度选择
alpha:true,// true/false 表示是否可以设置背景色透明
premultipliedAlpha:false,// true/false 表示是否可以设置像素深度（用来度量图像的分辨率）
stencil: false ，//false/true 表示是否使用模板字体或图案
preserveDrawingBuffer:true,// true/false 表示是否保存绘图缓冲
maxLights:1//最大灯光数
});

相机的介绍：

OpenGL中三维空间中的物体投影到二维空间的方式中存在透视投影和正投影两种相机。
透视投影：从视点开始越近的物体越大、远处的物体绘制的较小的一种方式
正投影：不管物体和视点的距离，都按统一的大小进行绘制

光源的介绍：