HTREE.JS1.0 Hello three.js

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)