第二节点线面

最新推荐文章于 2024-09-26 09:40:55 发布

转载最新推荐文章于 2024-09-26 09:40:55 发布 · 513 阅读

文章标签：

#three.js #前端 #3D #JavaScript

three.js 专栏收录该内容

6 篇文章

订阅专栏

从webgl中文网学习：http://www.hewebgl.com/article/getarticle/56

<!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;  //定义宽度，为canvas框的可见区宽度
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({ antialias: true });  //定义渲染器对象，（{锯齿效果:true}）
                renderer.setSize(width, height);  //设定渲染器大小（宽，高）
                document.getElementById('canvas-frame').appendChild(renderer.domElement);  //创建容器对象，即画布，放入canvas中
                renderer.setClearColor(0xFFFFFF, 1.0);  //设定渲染器背景颜色（颜色，透明度）
            }
            //相机
            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); //透视投影相机（视角，宽高比，近，远）
                camera.position.x = 0;   //相机的位置 x,y,z
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;  //相机以z=1轴为相机的上方，如果不设置，默认为y
                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);  //定义方向光，即无限光、平行光(颜色12,强度)
                light.position.set(100, 100, 200);  //设定灯光位置(x,y,z)
                scene.add(light);   //加入场景
            }
            //多维数据集
            var cube;
            function initObject() {


                var geometry = new THREE.Geometry(); //定义几何体
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );  //定义线条基本材质（{顶点颜色:true}）
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );  //定义两个颜色


                // 线的材质可以由2点的颜色决定
                var p1 = new THREE.Vector3( -100, 0, 100 );    //定义两个点的位置(x,y,z)
                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>

替换代码中‘//多维数据集’部分，即为网格：

            //多维数据集
            var cube;
            function initObject() {
                var geometry = new THREE.Geometry();  //定义几何体
                geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );  //定义两个点（x,y,z），加入geometry的vertices集
                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;  //定义线条line在z轴的位置
                    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;  //旋转90度
                    scene.add( line );
                }
            }