dounai1306 / three.js

three.js demo
0 stars 0 forks source link

网格 #3

Open dounai1306 opened 7 years ago

dounai1306 commented 7 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Three</title>
<script src="https://cdn.bootcss.com/three.js/86/three.min.js"></script>
<style type="text/css">
</style>

</head>
<body>
<script>
    var renderer;
    var width = window.innerWidth;
    var height = window.innerHeight;
    function initThree() {
        renderer = new THREE.WebGLRenderer({
            antialias : true
        });
        renderer.setSize(width, height);
        document.body.appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
        camera.position.x = 0;
        camera.position.y = 1000;
        camera.position.z = 0;
        camera.up.x = 0;
        camera.up.y = 0;
        camera.up.z = 1;
        camera.lookAt({
            x : 0,
            y : 0,
            z : 0
        });
    }

    var scene = new THREE.Scene();

    var light;
    function initLight() {
        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
        light.position.set(100, 100, 200);
        scene.add(light);
    }

    var cube;
    function initObject() {
        var geometry = new THREE.Geometry();
        geometry.vertices.push( new THREE.Vector3( - 250, 0, 0 ) );
        geometry.vertices.push( new THREE.Vector3( 250, 0, 0 ) );

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

            var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x3498DB} ) );
            line.position.z = ( i * 50 ) - 250;
            scene.add( line );

            var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x3498DB} ) );
            line.position.x = ( i * 50 ) - 250;
            line.rotation.y = 90 * Math.PI / 180;
            scene.add( line );

        }
    }

    function threeStart() {
        initThree();
        initCamera();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }
    threeStart()
</script>
</body>
</html>

image

dounai1306 commented 7 years ago

image 要注意这几个值的计算