Threejs开发笔记之一

开始

下载并引入一下类库
1.threejs库
2.JQuery库
3.代码资源

基础概念

坐标

scene（场景）

var scene = new THREE.Scene(); //实例化

camera（相机）

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;//位置
camera.lookAt(scene.position);//望向场景中央

rederer（渲染器）

var renderer = new THREE.WebGLRenderer(); 
//上面是实例化，渲染器有三种实现WebGL（推荐用的是GPU）Canvas，SVG
renderer.setClearColor(new THREE.Color(0xEEEEEE));//设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);//渲染的尺寸、

//如果场景中有动画就需要持续渲染
requestAnimationFrame(renderScene);
//renderScene为需要重复渲染的方法，也是写动画逻辑的地方
renderer.render(scene, camera);

几何体

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});//直接会渲染颜色上去，光源对其无效
//以下两种材质对光源才有反应(无阴影)
//MeshLambertMaterial
//MeshPhongMaterial
//如果需要添加阴影需要给光源加以下这句（光源产生阴影）
//spotLight.castShadow = true;
//几何体接收阴影(两个都得设，不光发出也得接收)
//cube.castShadow = true;


var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

//设置位置
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0;

//加入场景
scene.add(cube);

光源

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

辅助工具

//坐标工具（无需依赖其他类库）
var axes = new THREE.AxisHelper(20);
scene.add(axes);

//帧率工具
 <script  src="/libs/stats.js"></script>
  function initStats() {//初始化
      var stats = new Stats();

      stats.setMode(0); //参数说明 0: fps, 1: ms

      // 位置
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';

      //挂载
      document.getElementById("Stats-output").appendChild(stats.domElement);

       return stats;
}


//简化实验GUI工具（通过gui工具调整参数）
<script src="/libs/dat.gui.js"></script>
//参数
var controls = new function () {
            this.rotationSpeed = 0.02;
            this.bouncingSpeed = 0.03;
};
//实例化
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'bouncingSpeed', 0, 0.5);
//使用
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed;

总实例化

document.getElementById("WebGL-output").appendChild(renderer.domElement);

renderer.render(scene, camera);

奇葩ascii效果

document.getElementById("Stats-output").appendChild(stats.domElement);
改为
 var effect = new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(effect.domElement);

renderer.render(scene, camera);
  改为
effect.render(scene,camera);