Threejs-line线条

最新推荐文章于 2023-01-30 13:43:47 发布

dk8600

最新推荐文章于 2023-01-30 13:43:47 发布

阅读量1.2k

点赞数

原文链接：http://www.cnblogs.com/sunbey/p/6593286.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>threejs-line</title>
    <script src="script/three.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script>
    var mycanvas = document.getElementById('mycanvas');

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 700;
    var renderer = new THREE.WebGLRenderer({
        canvas: mycanvas,
        antialias: true
    });
    renderer.setSize( window.innerWidth, window.innerHeight )

    var geometry = new THREE.Geometry();
    geometry.vertices.push(
        new THREE.Vector3( 0, -200, 0 ),
        new THREE.Vector3( 0, 200, 0 )
    );

    var material = new THREE.LineBasicMaterial({
        color: 0xffff00
    });

    for(var i = 0; i<=20; i++){
        var line = new THREE.Line( geometry, material );
        line.position.x = 20 * i;
        scene.add(line);

        var line = new THREE.Line( geometry, material );
        line.position.x = 200;
        line.position.y = 20 * i - 200;
        line.rotation.z = 90 * Math.PI / 180;
        scene.add(line);
    }


    function render(){
        scene.rotation.x += .01
        scene.rotation.y += .01
        scene.rotation.z += .01
        renderer.render(scene, camera);
        requestAnimationFrame(render)
    }

    render();

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

转载于:https://www.cnblogs.com/sunbey/p/6593286.html

dk8600

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Threejs-line线条

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
复制链接

扫一扫