用three.js绘制一个旋转的正方体
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="../js/three.js"></script>
</head>
<body>
<script>
// 三大组件 场景scene 相机camera 渲染器renderer
var scene=new THREE.Scene();//创建场景
var camera=new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,1000);//创建相机 透视投影(参数含义 ,视角,宽高比,近平面和远平面到摄像机的距离)
var renderer=new THREE.WebGLRenderer();//创建渲染器
//设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//添加物体到场景中
var geometry=new THREE.CubeGeometry(1,1,1);
var material=new THREE.MeshBasicMaterial({color:0x3e0500});
var cube=new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z=5;
function render() {
requestAnimationFrame(render);
cube.rotaion+=0.1
cube.rotation.y+=0.1;
renderer.render(scene,camera,false);
}
render();
</script>
</body>
</html>