threejs(一) 点,线,网格

最新推荐文章于 2024-08-13 17:20:41 发布

明天去哪

最新推荐文章于 2024-08-13 17:20:41 发布

阅读量3.8k

点赞数

本文链接：https://blog.csdn.net/u014451076/article/details/51477033

版权

js框架专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ps:本系列会通过例子,来学习three.js

入门(一个简单的程序)

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
<script>
    //场景
    var scene = new THREE.Scene();
    //相机
    //PerspectiveCamera 透视相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    //渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    //添加物体到场景中
    var geometry = new THREE.CubeGeometry(1,1,1);
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var cube = new THREE.Mesh(geometry, material); scene.add(cube);
    //这个参数设置相机的远近
    camera.position.z = 5;
    //实时渲染
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        // render( scene, camera, renderTarget, forceClear )
        // renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
        // forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。
        renderer.render(scene, camera);
    }
    render();
</script>
</body>
</html>

封装在函数里(效果是一条线)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Three框架</title>
    <script src="js/three.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }

    </style>
    <script>
        var renderer;
        function initThree() {
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas-frame').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;
        function initScene() {
            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() {

            //grometry中有个vertices变量,可以存放点
            var geometry = new THREE.Geometry();
            // LineBasicMaterial( parameters )
            // Parameters是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是：
            // Color：线条的颜色，用16进制来表示，默认的颜色是白色。
            // Linewidth：线条的宽度，默认时候1个单位宽度。
            // Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
            // Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
            // VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。（如果关于插值不是很明白，可以QQ问我，QQ在前言中你一定能够找到，嘿嘿，虽然没有明确写出）。
            // Fog：定义材质的颜色是否受全局雾效的影响。
            var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
            var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

            // 线的材质可以由2点的颜色决定
            var p1 = new THREE.Vector3( -100, 0, 100 );
            var p2 = new THREE.Vector3(  100, 0, -100 );
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push( color1, color2 );

            var line = new THREE.Line( geometry, material, THREE.LinePieces );
            //把这条线加入场景中
            scene.add(line);
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }

    </script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

网格

threejs采用右手系

绘制网格
注意,这里的camera视点是在(0,1000,0)

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

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

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

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

            }
        }