Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/459.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Three.js-网格、三角形和Lambert材质_Javascript_Opengl Es_Three.js - Fatal编程技术网

Javascript Three.js-网格、三角形和Lambert材质

Javascript Three.js-网格、三角形和Lambert材质,javascript,opengl-es,three.js,Javascript,Opengl Es,Three.js,我有一个做星星的函数,现在我们开始: function CreateStar( radius, thickness, isWireframe, starColor) { // material var starMaterial = new THREE.MeshLambertMaterial({ color: starColor, wireframe: isWirefr

我有一个做星星的函数,现在我们开始:

function CreateStar( radius, thickness, isWireframe, starColor) {

            // material
            var starMaterial = new THREE.MeshLambertMaterial({
                    color: starColor,
                    wireframe: isWireframe,
                    shading: THREE.FlatShading
                  });

            // array for vertices
            var vertices = [];
            // set "zero" vertex for thickness
            vertices.push( new THREE.Vector3(0, 0, thickness) );

            // calculate a vertex and a pit for a half of a ray... 5 times for each 72 degrees
            var deg = Math.PI / 180; // for me it's easier to work with degrees rather than radians
            var maxR, minR; 
            maxR = radius; // radius for a vertex
            var  x4Rad = maxR * Math.cos( - 72 * deg );
            minR = x4Rad/Math.cos( - 36 * deg ); // radius for a pit
            var firstVertex;

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

                // vertex
                var vertX = maxR * Math.cos( (90 + (72 * i)) * deg );
                var vertY = maxR * Math.sin( (90 + (72 * i)) * deg );
                if ( i == 0 ) firstVertex = new THREE.Vector3( vertX, vertY, 0 );
                vertices.push( new THREE.Vector3( vertX, vertY, 0 ));

                // pit
                var pitX = minR * Math.cos( (126 + (72 * i)) * deg );
                var pitY = minR * Math.sin( (126 + (72 * i)) * deg );
                vertices.push( new THREE.Vector3( pitX, pitY, 0 ));
            }
            vertices.push( firstVertex ); // add the first vertex again to close the contour of the star

            var holes = []; // no holes in our contour
            var triangles, star;
            var geometry = new THREE.Geometry();

            geometry.vertices = vertices;
            triangles = THREE.Shape.Utils.triangulateShape( vertices, holes ); // triangulation

            for ( var j = 0; j < triangles.length; j++ ){
                geometry.faces.push( new THREE.Face3( triangles[j][0], triangles[j][1], triangles[j][2] ));
            } 

            star = new THREE.Mesh( geometry, starMaterial );
            //star = new THREE.Mesh( new THREE.CubeGeometry(200,200,200), starMaterial);
            return star;
}
函数CreateStar(半径、厚度、isWireframe、starColor){
//材料
var starMaterial=新的三种材料({
颜色:星色,
线框:是线框,
明暗处理:3.5倍明暗处理
});
//顶点数组
var顶点=[];
//为厚度设置“零”顶点
push(新的3.Vector3(0,0,厚度));
//计算半条光线的顶点和凹坑…每72度计算5次
var deg=Math.PI/180;//对我来说,使用度比使用弧度更容易
var-maxR,minR;
maxR=radius;//顶点的半径
var x4Rad=最大值*数学系数(-72*deg);
minR=x4Rad/Math.cos(-36*deg);//坑的半径
var第一顶点;
对于(变量i=0;i<5;i++){
//顶点
var vertX=maxR*数学cos((90+(72*i))*deg);
var vertY=maxR*数学sin((90+(72*i))*deg);
如果(i==0)firstVertex=new-THREE.Vector3(vertX,vertY,0);
push(新的3.Vector3(vertX,vertY,0));
//坑
var pitX=minR*数学cos((126+(72*i))*deg);
变量=最小值*数学sin((126+(72*i))*deg);
push(新的3.Vector3(pitX,怜悯,0));
}
顶点。推(firstVertex);//再次添加第一个顶点以闭合恒星的轮廓
var holes=[];//轮廓中没有孔
三角形,星形;
var geometry=new THREE.geometry();
几何体。顶点=顶点;
三角形=三个.Shape.Utils.triangulateShape(顶点、孔);//三角剖分
对于(var j=0;j
我的问题是,当我从这个函数返回一个立方体(在这段代码中注释)并添加到场景中时,我得到的正是一个具有正确阴影的立方体,这取决于定向光源的位置,但是,当我返回一个星形并将其添加到场景中时,我得到。。。陛下只是一颗没有颜色的黑星(它是黑色的),没有阴影。。。没有什么。那么,为什么我可以将材质应用于立方体,但不能将其应用于恒星

有人能解释一下我出了什么问题吗


Three.js r68

也许你只需要重新计算法线。 尝试:


朋友,你让我度过了一个美好的夜晚!它的工作)非常感谢!
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    star = new THREE.Mesh( geometry, starMaterial );