Question

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

我可以很容易地将同心圆纹理应用到CircleGeometry，但是一个环（中间有一个洞）就是我真正需要的。是否有人意识到在环上有纹理的方法除了辐射之外还做其他什么？

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

谢谢

Answer 1

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});

将该数组输入参数中的任何其他材质更改粘贴到构造函数中 function THREE.MeshBasicMaterial（{参数在这里}）

Answer 2

我发现这是为了制作几何体。它创建了一个theataSeegmens三角形的光盘

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 );

以上一行对于让它发挥作用非常重要。这是一个消息如何设置环材料。假设你有两张图片（只是一个sqare部分），可以用于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 );

RingGeometry上的同心圆纹理

2 个答案: