0

我正在尝试在three.js 中创建一个具有同心圆纹理的扁平环，例如土星环。无论我在图像中放置什么，除了从中心辐射的线条（如自行车车轮）外，我无法做任何事情。似乎纹理以与 CircleGeometry 截然不同的方式应用于 RingGeometry。

我可以轻松地将同心圆纹理应用到 CircleGeometry，但是我需要一个环（中间有一个孔）。有没有人知道让戒指上的纹理做其他事情而不是辐射的方法？

我没有在 Three.js 文档中找到方法，也没有在网络上找到方法来做我想做的事，因为似乎很少有人使用戒指......

谢谢

4

2 回答 2

1

去这里http://jsfiddle.net/theo/VsWb9/ 并替换

geometry = new THREE.CubeGeometry(200, 200, 200);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);

和

geometry    = new THREE.TorusGeometry( 100, .5 , 50 ,50); 
material    = new THREE.MeshNormalMaterial(); 
mesh    = new THREE.Mesh( geometry, material );

如果您想将戒指颜色更改为黑色，例如更改

material    = new THREE.MeshNormalMaterial();

至

material    = new THREE.MeshBasicMaterial({color:0x000});

将该数组输入参数中的任何其他材质更改粘贴到构造函数 THREE.MeshBasicMaterial({ arguments here })

于 2013-06-20T17:01:19.393 回答
0

我发现这是为了制作几何图形。它创建了一个由 theataSegmens 三角形组成的磁盘

this.RingGeometry = function ( innerRadius, outerRadius, thetaSegments) {

        THREE.Geometry.call( this )

        innerRadius = innerRadius || 0
        outerRadius = outerRadius || 50
        thetaSegments   = thetaSegments || 8
        innerRadius*=Obj.Size*100;
        outerRadius*=Obj.Size*100;

        var normal  = new THREE.Vector3( 0, 0, 1 )

        for(var i = 0; i < thetaSegments; i++ ){
            var angleLo = (i / thetaSegments) *Math.PI*2
            var angleHi = ((i+1) / thetaSegments) *Math.PI*2

            var vertex1 = new THREE.Vector3(innerRadius * Math.cos(angleLo), innerRadius * Math.sin(angleLo), 0);
            var vertex2 = new THREE.Vector3(outerRadius * Math.cos(angleLo), outerRadius * Math.sin(angleLo), 0);
            var vertex3 = new THREE.Vector3(innerRadius * Math.cos(angleHi), innerRadius * Math.sin(angleHi), 0);
            var vertex4 = new THREE.Vector3(outerRadius * Math.cos(angleHi), outerRadius * Math.sin(angleHi), 0);

            this.vertices.push( vertex1 );
            this.vertices.push( vertex2 );
            this.vertices.push( vertex3 );
            this.vertices.push( vertex4 );


            var vertexIdx   = i * 4;

            // Create the first triangle
            var face = new THREE.Face3(vertexIdx + 0, vertexIdx + 1, vertexIdx + 2, normal);
            var uvs = []

            var uv = new THREE.Vector2(0, 0)
            uvs.push(uv)
            var uv = new THREE.Vector2(1, 0)
            uvs.push(uv)
            var uv = new THREE.Vector2(0, 1)
            uvs.push(uv)

            this.faces.push(face);
            this.faceVertexUvs[0].push(uvs);

            // Create the second triangle
            var face = new THREE.Face3(vertexIdx + 2, vertexIdx + 1, vertexIdx + 3, normal);
            var uvs = []

            var uv = new THREE.Vector2(0, 1)
            uvs.push(uv)
            var uv = new THREE.Vector2(1, 0)
            uvs.push(uv)
            var uv = new THREE.Vector2(1, 1)
            uvs.push(uv)

            this.faces.push(face);
            this.faceVertexUvs[0].push(uvs);
    }

    //this.computeCentroids();
    //this.computeFaceNormals();

    this.boundingSphere = new THREE.Sphere( new THREE.Vector3(), outerRadius );

};
this.RingGeometry.prototype = Object.create( THREE.Geometry.prototype );

上面的行对于让它工作很重要。这是如何设置戒指材质的建议。假设您有两张可用于 alphamap 和实际戒指的图片（只是一个方形部分）。

var ringMaterial = new THREE.MeshPhongMaterial( 
            {           
                    map: SaturnRingColor,       
                    alphaMap:SaturnRingPattern,
                    color: 0xffffff, 
                    specular: 0x555555, 
                    shininess: 3,
                    emissive:10,
                    side: THREE.DoubleSide,
                    castshadow:true,
                    transparent : true,
                    opacity     : 0.9,
            } );


        this.ringMesh = new THREE.Mesh( this.RingGeometry , RingMaterial );
于 2015-11-25T11:41:35.927 回答