用three.js绘制一个坐标系

最新推荐文章于 2024-04-22 22:13:59 发布

a123132123

最新推荐文章于 2024-04-22 22:13:59 发布

阅读量560

点赞数

原文链接：http://www.cnblogs.com/hzStudy/p/7712642.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/three.js"></script>
</head>
<body οnlοad="main()">
<script>
    function initTHREE(){
        width = window.innerWidth;
        height = window.innerHeight;
        renderer = new THREE.WebGLRenderer({
            antialias:true  //是否为抗锯齿
        });
        renderer.setSize(width,height);
        renderer.setClearColor(0xFFFFFF,1.0);
        document.body.appendChild(renderer.domElement);
    }
    function initCamera(){
        camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
        camera.position.z = 15;
        camera.position.x = 3;//将相机的位置往右边挪5个单位
    }
    function initScene(){
        scene = new THREE.Scene();
    }
    function initGeometry(){
        var geometry = new THREE.CubeGeometry(2,2,2);
        var materail = new THREE.MeshBasicMaterial({color:0xff0000});
         cube = new THREE.Mesh(geometry,materail);
        //在网页上显示坐标系，其中坐标系的长度为6
        var axisHelper =new THREE.AxisHelper(6);
       /* scene.add(cube);*/         //-------
        //将坐标系加入到场景中                  |--->这个两个注释掉的主要原因是因为下面要演示将坐标系和我们的几何体绑定的例子
        /*scene.add(axisHelper);*/   //-------

        var object = new THREE.Object3D();//声明一个3d对象
        object.add(axisHelper);            //将坐标系加入到对象中
        object.add(cube);                   //将几何实体加入到对象中
        //得到一个绑定了实体和坐标系的对象，然后将它加入到场景当中
        scene.add(object);

    }
    function main(){
        initTHREE();
        initCamera();
        initScene();
        initGeometry();
        render();

    }
    function render(){
        requestAnimationFrame(render);
        cube.rotation.y += 0.01;//0.01是弧度值
        renderer.render(scene,camera);
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/hzStudy/p/7712642.html

a123132123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用three.js绘制一个坐标系

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../js/three.js"></script></head...
复制链接

扫一扫