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

来源：互联网发布：720度全景制作软件编辑：程序博客网时间：2024/04/28 09:48

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>

阅读全文

0 0

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

1.点

2.线

3.面

4.设置动画

5.详细代码展示

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