Three.js学习

来源：互联网发布：北京java程序员工资编辑：程序博客网时间：2024/05/16 14:54

Three.js学习

在js中学习到canvas的2d效果，通过学习WebGL，了解到three.js框架，实现3d效果，下面是我学习的一部分代码

<!DOCTYPE html><html lang="en"><head>    <title></title>    <meta charset="utf-8">    <script src="../js/three.js"></script>    <style>       #webgl{           width: 800px;           height: 600px;       }    </style></head><body onload="threeStart();">    <div id="webgl"></div><script>    var camera, scene, renderer;    var light;    var objict;    //1.    开始渲染    function initThree(){        width = document.getElementById('webgl').clientWidth;        height = document.getElementById('webgl').clientHeight;        renderer = new THREE.WebGLRenderer({antialias:true});//省成渲染器对象        renderer.setSize(width,height);        document.getElementById('webgl').appendChild(renderer.domElement);        renderer.setClearColorHex(0xFFFFFF,1.0); //设置渲染清除色    }    //设置相机    function initCamera(){        camera = new THREE.PerspectiveCamera(45,width/height,1,10000);        //设置相机的坐标位置        camera.position.x = 400;        camera.position.y = 0;        camera.position.z = 0;        //设置相机的上为Y轴方向        camera.up.x = 0;        camera.up.y = 1;        camera.up.z = 0;    }    //设置场景，所有的元素只有添加在场景中才可以生效    function initScene(){        scene = new THREE.Scene();    }    //设置光源    function initLight(){        light = new THREE.DirectionalLight(0x0000FF,1.0,0);        light.position.set(50,50,50);//光源的位置        scene.add(light);//将光源添加到场景    }    //设置物体 绘制四个立方体    var cube = Array();    function initObject(){        for(var i=0;i<4;i++){            cube[i]=new THREE.Mesh(new THREE.CubeGeometry(50,50,50),                    new THREE.MeshLambertMaterial({color:0x0000FF}));            scene.add(cube[i]);            cube[i].position.set(0,-120+80*i,0);        }    }    //旋转    var t = 0;    function loop(){        t++;        renderer.clear();        cube[0].rotation.set(0,t/100,0);        cube[1].rotation.set(t/100,0,0);        cube[2].rotation.set(0,0,t/100);        cube[3].rotation.set(0,t/100,0);//决定旋转的方向        camera.lookAt({x:0,y:0,z:0});        renderer.render(scene,camera);        window.requestAnimationFrame(loop);    }    //执行函数，要注意执行的顺序    function threeStart(){        initThree();        initCamera();        initScene();        initLight();        initObject();        loop();        renderer.clear();        renderer.render(scene,scene);    }</script></body></html>

展示效果为四个旋转的立方体

阅读全文

0 0