用three.js制作一个旋转的正方体
Posted 长大当个科学家
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用three.js制作一个旋转的正方体相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../js/three.js"></script>
<style>
canvas{
width:100% !important;
height: 100% !important;
}
</style>
</head>
<body>
</body>
<script>
//定义场景
var scene = new THREE.Scene();
/*
75：相当于相机的视角是75度，可以理解为人的上眼皮和下眼皮的夹角。此处是相机可以看到的景物的夹角
window.innerWidth/window.innerHeight：**面的纵横比，也就是宽高比，如果大于1，那么说明相机拍摄出的物体的宽度大于高度
1：相机最*能够拍摄到的位置
1000：相机最远能拍摄到的位置
*/
var camera =new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个几何体对象，这个几何体对象是矩形的（正方形是特殊的矩形），参数分别是该矩形的长宽高
var geometry = new THREE.CubeGeometry(2,2,2);
/*定义该几何体的材质，可以这样理解：geometry是我们定义的一个几何体，但这只是一个空架子，我们需要用材质来将这个架子填充起来，从而使
我们能够在网页上看到这个几何体实体。材质可以是颜色，纹理等等
*/
var material = new THREE.MeshBasicMaterial({color:0xff000});
//将几何体和材质联系起来，相当于将颜色这些东西粉刷到几何体上，就成为了一个我们肉眼可见的几何实体cube
var cube = new THREE.Mesh(geometry,material);
//将实体加入到场景当中
scene.add(cube);
//相机的坐标在z轴，相机默认的原点是在我们屏幕的中心
camera.position.z = 5;
function render(){
//循环调用render（）
requestAnimationFrame(render);
cube.rotation.x += 0.01;
renderer.render(scene,camera);
}
render();
</script>
</html>
以上是关于用three.js制作一个旋转的正方体的主要内容，如果未能解决你的问题，请参考以下文章