关于three.js修改直线页面没显示问题 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            margin: 0;

        }
        #WebGL-output{

        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/dat.gui.js"></script>
    <script type="text/javascript" src="js/stats.js"></script>
</head>
<body>
    <div id="WebGL-output">
    </div>
<script>
    $(function() {

        var scene = new THREE.Scene();//场景
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机
        var renderer = new THREE.WebGLRenderer();//渲染器
        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);

        //创建一个坐标轴对象
        var axes = new THREE.AxisHelper( 20 );
        scene.add(axes);

        // 正方形
        var cubeGeometry = new THREE.CubeGeometry(10,10,0);
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x=0;
        cube.position.y=0;
        cube.position.z=0;
        scene.add(cube);

        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.up.x = 0;//相机以哪个方向为上方
        camera.up.y = 1;//默认
        camera.up.z = 0;
        camera.lookAt(scene.position);

        //两条直线 line2逐渐增长
        var geometry = new THREE.Geometry();//声明一个空几何体对象
        var geometry1 = new THREE.Geometry();
        var vertices=[  new THREE.Vector3(4,4,0),
                        new THREE.Vector3(-4,4,0),
                        new THREE.Vector3(-4,-4,0),
                        new THREE.Vector3(4,-4,0)
        ];
        var vertices1=[
            new THREE.Vector3(4,4,0),
            new THREE.Vector3(4,4,0),
            new THREE.Vector3(-4,4,0),
            new THREE.Vector3(-4,-4,0)
        ];
        var materia=new THREE.LineBasicMaterial({
            color:0xff0000
        });
        var materia1=new THREE.LineBasicMaterial({
            color:0x000000
        });
        geometry.vertices=vertices; //顶点坐标添加到geometry对象
        geometry1.vertices=vertices1;
        var line=new THREE.Line(geometry,materia);//线条模型对象
        var line1=new THREE.Line(geometry1,materia1);
        scene.add(line);//线条对象添加到场景中
        scene.add(line1);


        $("#WebGL-output").append(renderer.domElement);
        render();
        function render() {
            if(vertices[0].x<=-4&&vertices[1].y>=-4){
                vertices[0].y -= 0.05;
                vertices[1].y -= 0.05;
                vertices1[2].y -= 0.05;
            }else if(vertices[0].x>=-4){
                vertices[0].x -= 0.05;
                vertices1[1].x -= 0.05;
            }

            line.geometry.verticesNeedUpdate=true;//加上这个就行了
            line1.geometry.verticesNeedUpdate=true;
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
    })
</script>

</body>
</html>

 

posted @ 2017-07-18 15:15  huangbohang  阅读(680)  评论(0)    收藏  举报