Three.js描绘点线面（含满天星空Demo）

最新推荐文章于 2024-08-19 10:03:04 发布

-老K-

最新推荐文章于 2024-08-19 10:03:04 发布

阅读量6.3k

点赞数 2

分类专栏： webGL 文章标签： three-js webgl 三维

本文链接：https://blog.csdn.net/laok_/article/details/76022178

版权

webGL 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1.点

在three.js中利用THREE.Vector3()是用来缺点点的位置的，它的三个参数分别是对应于三维坐标的x轴，y轴和z轴。PointsMaterial
来确定点的材质，最后是要使用THREE.Points( starsGeometry, starsMaterial )来创建这个点。

var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {//生成10000个点

    var star = new THREE.Vector3();
    star.x = THREE.Math.randFloatSpread( 2000 );//随机位置
    star.y = THREE.Math.randFloatSpread( 2000 );
    star.z = THREE.Math.randFloatSpread( 2000 );

    starsGeometry.vertices.push( star )；

}

var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )//设置材质的颜色

var starField = new THREE.Points( starsGeometry, starsMaterial );

scene.add( starField );

2.线

在three.js中如何来画一条线呢。我们知道两点确地一条直线。所以我们可以通过画两个点来缺点所要画的线。下面利用push将点设置在几何中，其中画了三个点，他们通过首尾相连的形式来描绘出两条线。

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

var line = new THREE.Line(geometry, material);

3.面

MeshBasicMaterial：用于以简单的阴影（平面或线框）方式绘制几何的材料。
MeshDepthMaterial：用于通过深度绘制几何的材料。深度是基于相机附近和远处的平面。白色最近，黑色最远。
MeshLambertMaterial：无光泽表面材质，无镜面高光。
MeshNormalMaterial：将法线矢量映射为RGB颜色的材质。
MeshPhongMaterial：光泽表面材质，镜面高光，反射。
MeshStandardMaterial：使用金属粗糙度工作流程的标准物理基础材料。
下面是一个利用三点来创建一个三角平面的列子

 var geometry2 = new THREE.Geometry(); //声明一个空几何体对象
    var p1 = new THREE.Vector3(0,0,0); //顶点1坐标
    var p2 = new THREE.Vector3(-80,0,0); //顶点2坐标
    var p3 = new THREE.Vector3(0,-80,0); //顶点3坐标
    geometry2.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
    var normal = new THREE.Vector3( 0, 0, 1 ); //三角面法向量
    var face = new THREE.Face3( 0, 1, 2, normal); //创建三角面
    geometry2.faces.push( face ); //三角面添加到几何体
    var material2=new THREE.MeshLambertMaterial({
        color:0x0000ff,//三角面颜色
        side:THREE.DoubleSide//两面可见
    });//材质对象
    var mesh=new THREE.Mesh(geometry2,material2);//网格模型对象
    scene.add(mesh);//网格模型添加到场景中

4.设置动画

通过设置改变相机的位置，来移动使整个场景动起来。

var T0 = new Date();//上次时间
function render() {
        var T1 = new Date();//本次时间
        var t = T1-T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene,camera);//执行渲染操作
        camera.rotateY(-0.0001*t);//让相机转动以此来实现整个场景的旋转
        camera.rotateX(0.00005*t);
        camera.rotateZ(0.00005*t);
    }
render();

5.详细代码展示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>the first three.js </title>
    <style>
        body { margin: 0;}
        canvas { width: 100%; height: 100%;}
    </style>
</head>
<body>
    <script src="../../three/js/three.js"></script><!--引入自己的three.js地址-->
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setClearColor(0x000000);
        document.body.appendChild( renderer.domElement ); 

        //添加光源 
        var point=new THREE.PointLight(0xffffff);
        point.position.set(0,0,100);//点光源位置
        scene.add(point);

        camera.position.z = 5;

        //绘制若干个点 
        var starsGeometry = new THREE.Geometry();
        for ( var i = 0; i < 10000; i ++ ) {

            var star = new THREE.Vector3();//创建点并在下面设置点的位置
            star.x = THREE.Math.randFloatSpread(2500 );
            star.y = THREE.Math.randFloatSpread(2000 );
            star.z = THREE.Math.randFloatSpread( 2500 );

            starsGeometry.vertices.push( star )
        }

        var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )
        var starField = new THREE.Points( starsGeometry, starsMaterial );
        scene.add( starField ); 

        //画线 
        for(var i = 0; i<100;i++) {
            var point = new THREE.Vector3(i,0,0);
            var point1 = new THREE.Vector3(0,i,0);
            var starsGeometry1 = new THREE.Geometry();
            var line = starsGeometry1.vertices.push(point,point1);
            var line1 = new THREE.Line(starsGeometry1, starsMaterial);
            scene.add(line1)
        }

        //创建一个三角平面
        var geometry2 = new THREE.Geometry();
        var p1 = new THREE.Vector3(0,0,0); 
        var p2 = new THREE.Vector3(-80,0,0); 
        var p3 = new THREE.Vector3(0,-80,0); 
        geometry2.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
        var normal = new THREE.Vector3( 0, 0, 1 ); //三角面法向量
        var face = new THREE.Face3( 0, 1, 2, normal); //创建三角面
        geometry2.faces.push( face ); //三角面添加到几何体
        var material2=new THREE.MeshLambertMaterial({
            color:0x0000ff,//三角面颜色
            side:THREE.DoubleSide//两面可见
        });//材质对象
        var mesh=new THREE.Mesh(geometry2,material2);//网格模型对象
        scene.add(mesh);//网格模型添加到场景中


        var T0 = new Date();//上次时间
        function render() {
                var T1 = new Date();//本次时间
                var t = T1-T0;//时间差
                T0 = T1;//把本次时间赋值给上次时间
                requestAnimationFrame(render);
                renderer.render(scene,camera);//执行渲染操作
                camera.rotateY(-0.0001*t);//让相机转动以此来实现整个场景的旋转
                camera.rotateX(0.00005*t);
                camera.rotateZ(0.00005*t);
            }
        render();

    </script>

</body>
</html>