内置几何体
HyperbolicHelicoidGeometry
双曲面螺旋几何体HyperbolicHelicoidGeometry
用法
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);
示例
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);
SphubeGeometry
圆角立方体 SphubeGeometry
用法
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);
示例
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);
VariableTubeGeometry
变径管道 VariableTubeGeometry
用法
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);
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);