卜若的代码笔记-webgl系列-第五章：使用threejs库画出一个万花筒

最新推荐文章于 2023-12-04 15:02:53 发布

卜若

最新推荐文章于 2023-12-04 15:02:53 发布

阅读量211

点赞数

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.csdn.net/qq_37080133/article/details/100671876

版权

webgl 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1 效果展示

2 代码

2.1 上下文

<!DOCTYPE html>
<html>
<head>
    <title></title>
<!--    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"></script>-->

    <script src="../ThreeJSLib/three.js"></script>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <style>canvas { width: 100%; height: 100% }</style>
<!--    <script src="Treedemo.js"></script>-->
    <script src="WebglManager.js"></script>
    <script src="ThreeDemoForDrawLine.js"></script>
    <script src="stats.js"></script>

</head>
<body>

<div id="Stats-output"></div>

<div id="ca" style="width: 300px;height: 300px;
margin-top: 100px;
background: #aa5500">

</div>
<script>
    var stats = new Stats();
    //设置统计模式
    stats.setMode(0); // 0: fps, 1: ms
    //统计信息显示在左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    //将统计对象添加到对应的<div>元素中
    document.getElementById("Stats-output").appendChild(stats.domElement);
    animate();

    function animate() {

        stats.begin();

        stats.end();

        requestAnimationFrame(animate);

    }


</script>
<script>

    demo(document.getElementById("ca"));


</script>
</body>
</html>

2.2 WebglManager.js代码



var op;
var opView;

function create(div) {

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,1, 0.1, 500);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(300, 300);
    renderer.setClearColor(Color(255,239 ,213).ox, 1.0);
    div.appendChild(renderer.domElement);

    var View  = {};
    View.scene = scene;
    View.camera = camera;
    View. renderer = renderer;
    this.opView = View;
    return View;
}

function Color(r,g,b) {

    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;

    color.ox = (color.r << 16) | (color.g << 8) | color.b;

    return color;
}
function Vector3(x,y,z) {

    var vector3 = {};
    vector3.x = x;
    vector3.y = y;
    vector3.z = z;

    return vector3;
}

function frame() {

    if (op!= null){

        op();
    }

    opView.renderer.render(opView.scene,opView.camera);
    requestAnimationFrame(frame);
}

2.3 ThreeDemoForDrawLine.js代码：


var vector3List =  new Array();
var lineList = new Array();
function addPoint(point) {


    vector3List.push(point);

    return vector3List;
}
var preLine;
function DrawLine(pointList,Color) {
    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial( { vertexColors: true } );
    var line = null;
    var color = new THREE.Color(Color.ox );
    //geometry.colors.push(color,color);
    var index =0;
    lineList.length = 0;
    for(var i =0;i<pointList.length -1;i++){

            geometry = new THREE.Geometry();
            var point = new THREE.Vector3( pointList[i].x, pointList[i].y,  pointList[i].z );
            geometry.vertices.push(point);
            geometry.colors.push(color);
            point = new THREE.Vector3(pointList[i+1].x, pointList[i+1].y,  pointList[i+1].z);
            geometry.vertices.push(point);
            geometry.colors.push(color);
            line = new THREE.LineSegments( geometry, material);
            preLine = line;
            lineList.push(line);
      }
    return lineList;
}


function demo(div) {
    var View = create(div);
    var th = 0;
    var r = 0;

    View.camera.position.z = 100;

    var index = 0;
    var up = false;

    for(var i =0;i<250;i++){

        th += 1;
        r += 0.1;
        var x = r*Math.cos(th);
        var y = r*Math.sin(th);
        addPoint(Vector3(x,y,0));
        DrawLine(vector3List,Color(120,120,120));
    }

    op = function(){



        View.renderer.render(opView.scene,opView.camera);

       if (up == false){
           index++;
           View.scene.add(lineList[index]);

           if(index>=240){

               up = true;
           }

       }else {

           View.scene.remove(lineList[index]);
           index--;
            if(index<=0){

                up = false;
            }
       }



    }
    frame();

    console.info("render over");
}

2.3 stats.js代码：这个是Three.js里面的辅助代码

卜若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卜若的代码笔记-webgl系列-第五章：使用threejs库画出一个万花筒

1 效果展示2 代码2.1 上下文<!DOCTYPE html><html><head> <title></title><!-- <script src="https://raw.github.com/mrdoob/three.js/master/build/three.js">&l...
复制链接

扫一扫

专栏目录