1、Hello Three.js程序
//定义场景scene相机camera和渲染器renderer
var scene = new THREE.Scene();//这是一个容器，用来保存并跟踪我们想要渲染的物体 想要渲染的球体和方块后面会添加到这个scene变量中
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//定义了我们将在渲染好的scene里面看到什么
var renderer = new THREE.WebGLRenderer();//负责计算指定相机角度下 浏览器中scene的样子 我们创建了一个WebGLRenderer对象 使用计算机上的显卡来渲染场景
renderer.setClearColorHex(0xEEEEEE);//将背景色设置成接近白色
renderer.setSize(window.innerWidth,window.innerHeight);//renderer 将scene渲染成和window宽高一样大小的尺寸
//添加了主要元素后 需要添加辅助的坐标轴和平面 球体等物质
var axes = new THREE.AxisHelper(20);//坐标轴对象
scene.add(axes);//将坐标轴添加到场景中
//添加平面 添加材质 设置平面的位置和角度
var planeGeometry = new THREE.PlaneGeometry(60,20);//改平面的宽60 高20
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//这个平面的外观 材质和透明度 设置成基本材质 颜色为灰色
var plane = new THREE.Mesh(planeGeometry,planeMaterial);//将形状和材料添加到一个名为plane 的网格对象Mesh中
plane.rotation.x = -0.5*Math.PI;//在添加到scene场景中之前 需要设置平面的位置和方向
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
//设置相机的位置和对准的点
camera.position.x = -40;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position);
//将renderer 的输出挂接到HTML页面框架的<div>元素
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);//渲染 后面会独立成一个函数
2、添加灯光效果
在场景里添加一个光源
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40,60,-10);//光源位置
spotLight.castShadow = true;//定义场景中的该光源可以产生阴影（并不是所有光源都能产生阴影）
scene.add(spotLight);
将材质改成对光源有效果的材质
MeshLambertMaterial和MeshPhongMaterial
接收阴影和投射阴影
plane.receiveShadow = true;
cube.castShadow = true;
告诉renderer我们需要阴影
renderer.shadowMapEnabled = true;
3、为场景添加动画的效果
写一个负责渲染的函数
原来是一句渲染的语句 现将其改成一个函数
renderer.render(scene,camera)
function render(){
requestAnimationFrame(render);//重新调用render函数，目的是让这个动画持续运行
renderer.render(scene,camera)
}
添加辅助库来检测出动画运行的帧数
引入辅助库
<script type="text/javascript" src="../libs/stats.js"></script>
添加<div>元素来显示统计图形
<div id = "Stats-output"></div>
初始化这个统计对象
function initStats(){
var stats = new Stats();
stats.setMode(0);//如果设置的是0则监测的是FPS 如果设置的是1 那么监测的是渲染时间
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
转动方块 弹跳球
在render()里添加旋转的属性
cube.rotation.x += 0.02;
cube.rotation.y += 0.02;
cube.rotation.z += 0.02;
在render()里添加弹跳属性
step += 0.04;//定义的是球的弹跳速度
sphere.position.x = 20+(10*(Math.cos(step)));
sphere.position.y = 2+(10*Math.abs(Math.sin(step)));
4、用简单的GUI来在运行时修改运动属性
添加dat.gui库
<script type="text/javascript" src="../libs/dat.gui.js"></script>
定义一个JavaScript 对象用来保存我们想要通过dat.GUI库修改哪些变量
var controls = new function(){
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03;
}
把对象传递给dat.GUI对象并定义这两个对象的取值范围
var gui = new dat.GUI();
gui.add(controls,'rotationSpeed',0,0.5);
gui.add(controls,'bouncingSpeed',0,0.5);
将原来的固定值改成gui 的属性即可
cube.rotation.x += controls.rotationSpeed;
5、创建有意思的三维渲染效果
添加AsciiEffect库
<script type="text/javascript" src="../libs/AsciiEffect.js"></script>
将document.getElementById("WebGL-output").appendChild(renderer.domElement);
改成ASCII效果,
var effect = new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(effect.domElement)
将render循环里面的renderer.render(scene,camera)替换成effect.render(scene,camera)
