# 内置几何体 

## HyperbolicHelicoidGeometry

双曲面螺旋几何体[HyperbolicHelicoidGeometry](https://vjmap.com/map3d/api/classes/HyperbolicHelicoidGeometry.html)

### 用法
```js
const geometry = new vjmap3d.HyperbolicHelicoidGeometry(128, 128);
let mat = new THREE.MeshStandardMaterial({
    color: "#ff0",
    side: THREE.DoubleSide
})
const mesh = new THREE.Mesh(geometry, mat);
app.scene.add(mesh);
```

### 示例
<mapFrame>
<pre>
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
// https://www.shadertoy.com/view/4dlfR7
let shader = `
#define NUM_PARTICLES 200.0
#define GLOW 0.5
vec3 Orb(vec2 uv, vec3 color, float radius, float offset)
{        
    vec2 position = vec2(sin(offset * (iTime+30.)),
                         cos(offset * (iTime+30.)));
    position *= sin((iTime ) - offset) * cos(offset);
    //offset = pModPolar(position,2.);
    radius = radius * offset;
    float dist = radius / distance(uv, position);
    return color * pow(dist, 1.0 / GLOW);
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 uv =  vec2(fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
    vec3 pixel = vec3(0.0, 0.0, 0.0);
   	vec3 color = vec3(0.0, 0.0, 0.0);
 	color.r = ((sin(((iTime)) * 0.55) + 1.5) * 0.4);
    color.g = ((sin(((iTime)) * 0.34) + 2.0) * 0.4);
    color.b = ((sin(((iTime)) * 0.31) + 4.5) * 0.3);
    float radius = 0.005;
    for	(float i = 0.0; i < NUM_PARTICLES; i++)
        pixel += Orb(uv, color, radius, i / NUM_PARTICLES);
    fragColor = mix(vec4(uv,0.8+0.5*sin(iTime),1.0), vec4(pixel, 1.0), 0.8);
}`
const geometry = new vjmap3d.HyperbolicHelicoidGeometry(128, 128);
let mat = new vjmap3d.ShadertoyMaterial(app, {
    shader: shader,
    side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, mat);
app.scene.add(mesh);
</pre>
</mapFrame>


## SphubeGeometry

圆角立方体 [SphubeGeometry](https://vjmap.com/map3d/api/classes/SphubeGeometry.html)

### 用法
```js
const geometry = new vjmap3d.SphubeGeometry(400, 400);
const material = new THREE.MeshStandardMaterial({
    color: "#f00"
});
const mesh = new THREE.Mesh(geometry, material);
app.scene.add(mesh);
```

### 示例

<mapFrame>
<pre>
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
const geometry = new vjmap3d.SphubeGeometry(400, 400);
const material = new THREE.MeshStandardMaterial({
    color: "#f00"
});
const mesh = new THREE.Mesh(geometry, material);
app.scene.add(mesh);
</pre>
</mapFrame>

## VariableTubeGeometry

变径管道 [VariableTubeGeometry](https://vjmap.com/map3d/api/classes/VariableTubeGeometry.html)

### 用法
```js
let curve = new THREE.CatmullRomCurve3(
    [
        [10, 20, 16],
        [15, 10, 20],
        [10, 0, 36],
        [46, 30, 20],
        [85, 60, 63],
        [92, 20, 67],
        [10, 60, 56]
    ].map(el => new THREE.Vector3(...el))
);
let radiusArr = [];
let valuesArr = [0, 10];
let mapValuesArr = [1, 1.5];
for (var a = 0; a < curve.getLength(); a++) {
    radiusArr.push([a, Math.random() * 20]);
}
const LUT = new Lut();
let geo = new vjmap3d.VariableTubeGeometry(
    curve,
    radiusArr,
    20,
    valuesArr,
    mapValuesArr,
    LUT
);
let materialData = new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
    vertexColors: true
});
let mesh = new THREE.Mesh(geo, materialData);
app.scene.add(mesh);
```

<mapFrame>
<pre>
import { Lut } from "three/examples/jsm/math/Lut.js";
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
let curve = new THREE.CatmullRomCurve3(
    [
        [10, 20, 16],
        [15, 10, 20],
        [10, 0, 36],
        [46, 30, 20],
        [85, 60, 63],
        [92, 20, 67],
        [10, 60, 56]
    ].map(el => new THREE.Vector3(...el))
);
let radiusArr = [];
let valuesArr = [0, 10];
let mapValuesArr = [1, 1.5];
for (var a = 0; a < curve.getLength(); a++) {
    radiusArr.push([a, Math.random() * 20]);
}
const LUT = new Lut();
let geo = new vjmap3d.VariableTubeGeometry(
    curve,
    radiusArr,
    20,
    valuesArr,
    mapValuesArr,
    LUT
);
let materialData = new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
    vertexColors: true
});
let mesh = new THREE.Mesh(geo, materialData);
mesh.scale.set(0.3, 0.3, 0.3)
mesh.position.set(-10, 0, -10)
app.scene.add(mesh);
</pre>
</mapFrame>