码迷,mamicode.com
首页 > Web开发 > 详细

用three.js制作一个旋转的正方体

时间:2017-10-23 00:57:44      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:func   col   win   com   rip   child   asi   charset   高度   

<!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制作一个旋转的正方体

标签:func   col   win   com   rip   child   asi   charset   高度   

原文地址:http://www.cnblogs.com/hzStudy/p/7712621.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!