Three.js学习

最新推荐文章于 2023-08-12 10:29:31 发布

cainiao0314

最新推荐文章于 2023-08-12 10:29:31 发布

阅读量229

点赞数

分类专栏： web前端文章标签： webgl canvas three-js

本文链接：https://blog.csdn.net/cainiao0314/article/details/75546596

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>