想学threejs/webgl 已经很久了，一直没有系统学习，今年的目标就是要把three学好，做个酷炫的效果出来检验自己的学习成果，去年学的flutter 做个音乐app，今年继续！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin:0;
}
canvas {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
</body>
<script src="./three.min.js"></script>
<script>
// 声明一个场景
var scene = new THREE.Scene();
// 声明一个相机
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.z = 5;
// 声明一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何物体
var geometry = new THREE.BoxGeometry(5,1,1);
// 使用材质上色
var material = new THREE.MeshLambertMaterial({color:'red'})
var cube = new THREE.Mesh(geometry, material);
// 再加个物体
var test1 = new THREE.BoxGeometry(1,2,2);
var test = new THREE.MeshLambertMaterial(({color:'blue'}))
var test3 = new THREE.Mesh(test1,test)
scene.add(cube);
scene.add(test3);
renderer.render( scene, camera );
// 添加光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10,10,300);
scene.add(spotLight);
function animate() {
// 设置立方体动画
cube.rotation.x += 0.005;
test3.rotation.x += 0.005;
cube.rotation.y += 0.01;
test3.rotation.y += 0.01;
// 通过渲染器，把相机和已经含有物体的场景渲染到屏幕上
renderer.render( scene, camera );
requestAnimationFrame( animate );
}
animate();
</script>
</html>
