学习three.js过程中的事例记录下来，方便后期复习
学习资料来源：http://www.hewebgl.com/
示例1.
初步了解简单API
场景（scene）、相机（camera）和渲染器（renderer）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.js"></script>
</head>
<body>
</body>
<script>
/*创建场景*/
var scene = new THREE.Scene()
/*打印场景位置*/
console.log(scene.position)
/*创建相机*/
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10)
/*打印相机位置*/
console.log(camera.position)
/*创建渲染器*/
var renderer = new THREE.WebGLRenderer();
/*设置渲染器尺寸*/
renderer.setSize(window.innerWidth, window.innerHeight)
/*设置渲染器清除颜色*/
renderer.setClearColor('#FFFFFF')
/*将渲染器添加到body中*/
document.body.appendChild(renderer.domElement);
/*生成几何体 盒子模型（*/
var geometry = new THREE.CubeGeometry(2, 2, 2);
/*生成材质*/
//var material = new THREE.MeshBasicMaterial({color: 0xff0000})//基础网孔材料
var material = new THREE.MeshNormalMaterial()//法向量网孔材料
/*几何体和材质结合*/
var cube = new THREE.Mesh(geometry, material)
//*将结合体添加到场景*/
scene.add(cube)
/*对象将被添加到原点处，即座标点(0,0,0)，这将导致相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些*/
camera.position.z = 5
/*打印相机位置*/
console.log(camera.position)
function render() {
/*启动定时器*/
requestAnimationFrame(render);
/*结合体旋转*/
cube.rotation.y += 0.01;
cube.rotation.x += 0.01;
/*渲染*/
renderer.render(scene, camera)
}
render()
</script>
</html>
效果图：
