threeJs(1)

首先，引入threejs，版本问题需要注意，这里使用的是r69的
在样式表中设置

<style>
body{
    magrin:0;
    overflow:hidden;
}
</style>

基本渲染开始：

<div id="webgl"></div>

	<script type="text/javascript">
		function init(){

		}
		window.onload=init;
	</script>

---

first demo:

<div id="webgl"></div>
	<script type="text/javascript">
		function init(){
			var scene = new THREE.Scene();  //create a scene
			var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera

			var renderer = new THREE.WebGLRenderer(); // 渲染器对象,场景
			renderer.setClearColorHex(0xeeeeee);  //设置场景颜色
			renderer.setSize(window.innerWidth,window.innerHeight); //设置场景大小

			var axes = new THREE.AxisHelper(20);// 坐标轴
			scene.add(axes); //添加坐标轴到场景

			var planeGeometry = new THREE.PlaneGeometry(60,20); //创建平面几何
			var planeMaterial = new THREE.MeshBasicMaterial({color:0x53ff53}); //创建材料
			var plane = new THREE.Mesh(planeGeometry,planeMaterial); //合并到网格对象中
			plane.rotation.x = - 0.5 * Math.PI;//设置平面位置
			plane.position.x = 15;
			plane.position.y = 0;
			plane.position.z = 0;
			scene.add(plane);

			var cubeGeometry = new THREE.BoxGeometry(4,4,4); //创建立方体
			var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});//创建材料
			var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
			cube.position.x = -4;
			cube.position.y = 3;
			cube.position.z =0;
			scene.add(cube);

			var sphereGeometry = new THREE.SphereGeometry(4,20,20); //创建球体
			var sphereMaterial = new THREE.MeshBasicMaterial({color:0x00ffff,wireframe:true});
			var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
			sphere.position.x = 20;
			sphere.position.y = 4;
			sphere.position.z = 2;
			scene.add(sphere);

			camera.position.x = -30; //摄像机位置
			camera.position.y = 40;
			camera.position.z = 30;
			camera.lookAt(scene.position); //指向场景的中心

			document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
			renderer.render(scene,camera); //使用指定摄像机渲染场景


		}
		window.onload=init;
	</script>

---

添加材质和灯光，阴影

材质：
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});//创建材料,换了一种材料！！！MeshBasicMaterial

var sphereMaterial = new THREE.MeshPhongMaterial({color:0x7777ff}); //又换了一种材料

灯光：
var spotLight = new THREE.SpotLight(0xffffff); //增加光源
			spotLight.position.set(-40,60,-10);
			scene.add(spotLight);


renderer.setClearColor(new THREE.Color(0xeeeeee,1.0));
			renderer.setSize(window.innerWidth,window.innerHeight);
			renderer.shadowMapEnabled = true; //开启阴影

			plane.receiveShadow = true; //接收阴影
			cube.castShadow = true; //投射阴影
			sphere.castShadow = true;

			spotLight.castShadow = true;//产生阴影的光源

---

左上角的监控

需要引入<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js" integrity="sha256-+1GQIedPpXiBLJ/UvD5WPPkL6LBQinbFrp1xcz5ECy8=" crossorigin="anonymous"></script>

定义一个div用来放置<div id="stats"></div>

在开始初始化的时候就进行监控
function init(){
			var stats = initStats();

			var scene = new THREE.Scene();  //create a scene
			var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera
******

定义 initStats方法
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').appendChild(stats.domElement);
			return stats;

		}

---

动画效果：

代码放在init方法中
var step = 0;
			function renderScene(){
				stats.update();//通知stats对象画面何时被重新渲染

				cube.rotation.x += 0.02;
				cube.rotation.y += 0.02;
				cube.rotation.z += 0.02;

				step +=0.04;
				sphere.position.x = 20+(10 * (Math.cos(step)));
				sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));
				
				requestAnimationFrame(renderScene);
				renderer.render(scene,camera);
			}
			document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
			// renderer.render(scene,camera); //使用指定摄像机渲染场景
			renderScene();

---

dat.gui.js
google一个大佬开发的一个dat.gui.js动态改变变量

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js" integrity="sha256-NFmsoybQWpufW0NQt1wvxTVt49lqjvjyfFjvk9SCRl4=" crossorigin="anonymous"></script>
var controls = new function(){ //定义一个JavaScript对象，该对象将保存希望通过dat.GUI改变的属性
			this.rotationSpeed = 0.02;
			this.bouncingSpeed = 0.03;
		};
		var gui = new dat.GUI();
		gui.add(controls,'rotationSpeed',0,0.5); //将JavaScript对象传递给data.GUI对象，并设置取值范围
		gui.add(controls,'bouncingSpeed',0,0.5);


...............
var step = 0;
			function renderScene(){
				stats.update();//通知stats对象画面何时被重新渲染

				cube.rotation.x += controls.rotationSpeed;
				cube.rotation.y += controls.rotationSpeed;
				cube.rotation.z += controls.rotationSpeed;

				step +=controls.bouncingSpeed;
				sphere.position.x = 20+(10 * (Math.cos(step)));
				sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));
				
				requestAnimationFrame(renderScene);
				renderer.render(scene,camera);
			}
document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
			// renderer.render(scene,camera); //使用指定摄像机渲染场景
			renderScene();

响应式：
当画面渲染好的时候，如果缩小浏览器的屏幕大小，画面并不会自适应的减小

需要将camera，scene,renderer 放在全局变量中，一开始都是init方法里面的局部变量，所以外界并不能访问	var scene,camera,renderer;
window.addEventListener('resize',onresize,false);
		function onresize(){
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth,window.innerHeight);
		}

---

综上所述的最后demo:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.js" integrity="sha256-+1GQIedPpXiBLJ/UvD5WPPkL6LBQinbFrp1xcz5ECy8=" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js" integrity="sha256-NFmsoybQWpufW0NQt1wvxTVt49lqjvjyfFjvk9SCRl4=" crossorigin="anonymous"></script>
	<style>
		body{
			margin: 0;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="webgl"></div>
	<div id="stats"></div>
	<script type="text/javascript">
		var scene,camera,renderer;
		function init(){
			var stats = initStats();

			scene = new THREE.Scene();  //create a scene
			camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //create a camera

			renderer = new THREE.WebGLRenderer(); // 渲染器对象,场景
			renderer.setClearColorHex(0xeeeeee);  //设置场景颜色
			renderer.setSize(window.innerWidth,window.innerHeight); //设置场景大小

			var axes = new THREE.AxisHelper(20);// 坐标轴
			scene.add(axes); //添加坐标轴到场景

			var planeGeometry = new THREE.PlaneGeometry(60,20); //创建平面几何
			var planeMaterial = new THREE.MeshLambertMaterial({color:0xffffff}); //创建材料,换了一种材料！！！
			var plane = new THREE.Mesh(planeGeometry,planeMaterial); //合并到网格对象中
			plane.rotation.x = - 0.5 * Math.PI;//设置平面位置
			plane.position.x = 15;
			plane.position.y = 0;
			plane.position.z = 0;
			scene.add(plane);

			var cubeGeometry = new THREE.BoxGeometry(4,4,4); //创建立方体
			var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});//创建材料,换了一种材料！！！
			var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
			cube.position.x = -4;
			cube.position.y = 3;
			cube.position.z =0;
			scene.add(cube);

			var sphereGeometry = new THREE.SphereGeometry(4,20,20); //创建球体
			var sphereMaterial = new THREE.MeshPhongMaterial({color:0x7777ff}); //又换了一种材料
			var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
			sphere.position.x = 20;
			sphere.position.y = 0;
			sphere.position.z = 2;
			scene.add(sphere);

			var spotLight = new THREE.SpotLight(0xffffff); //增加光源
			spotLight.position.set(-40,60,-10);
			scene.add(spotLight);

			renderer.setClearColor(new THREE.Color(0xeeeeee,1.0));
			renderer.setSize(window.innerWidth,window.innerHeight);
			renderer.shadowMapEnabled = true; //开启阴影

			plane.receiveShadow = true; //接收阴影
			cube.castShadow = true; //投射阴影
			sphere.castShadow = true;

			spotLight.castShadow = true;//产生阴影的光源

			camera.position.x = -30; //摄像机位置
			camera.position.y = 40;
			camera.position.z = 30;
			camera.lookAt(scene.position); //指向场景的中心

			var step = 0;
			function renderScene(){
				stats.update();//通知stats对象画面何时被重新渲染

				cube.rotation.x += controls.rotationSpeed;
				cube.rotation.y += controls.rotationSpeed;
				cube.rotation.z += controls.rotationSpeed;

				step +=controls.bouncingSpeed;
				sphere.position.x = 20+(10 * (Math.cos(step)));
				sphere.position.y = 2 +(10 * Math.abs(Math.sin(step)));
				
				requestAnimationFrame(renderScene);
				renderer.render(scene,camera);
			}
			document.getElementById('webgl').appendChild(renderer.domElement); //添加到指定div中
			// renderer.render(scene,camera); //使用指定摄像机渲染场景
			renderScene();
		}

		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').appendChild(stats.domElement);
			return stats;

		}

		var controls = new function(){ //定义一个JavaScript对象，该对象将保存希望通过dat.GUI改变的属性
			this.rotationSpeed = 0.02;
			this.bouncingSpeed = 0.03;
		};
		var gui = new dat.GUI();
		gui.add(controls,'rotationSpeed',0,0.5); //将JavaScript对象传递给data.GUI对象，并设置取值范围
		gui.add(controls,'bouncingSpeed',0,0.5);


		window.onload=init;
		window.addEventListener('resize',onresize,false);
		function onresize(){
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth,window.innerHeight);
		}

	</script>
</body>
</html>