renderer.domElement
{
while (true) {
renderer.render(scene, camera);
yield null;
}
}
height = 600
options = ({
height: 1,
width: 1,
widthSegment: 1024,
heightSegment: 1024
})
earthShader = ({
vertexShader: `
varying vec4 v_color; // 用来存储当前顶点颜色
varying vec2 v_uv; // UV
uniform float u_height; // 生成的高度
uniform float u_radius; // 半径
uniform sampler2D u_bump; // 高度图
uniform float bumpScale;
uniform float time;
uniform float limit;
void main() {
v_uv = uv; // uv
vec4 bumpData = texture2D(u_bump, uv);
float vAmount = bumpData.r + bumpData.g * 0.05 + bumpData.b * 0.03;
vec3 newPosition = position + normal * bumpScale * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
`,
fragmentShader: `
uniform float u_opacity; // 透明度
uniform vec3 u_color; // 基础颜色
varying vec2 v_uv; // UV
uniform sampler2D u_map; // 基础材质
void main() {
gl_FragColor = vec4(u_color, u_opacity) * texture2D(u_map, v_uv);
}
`
})
earthmap10k = FileAttachment("8081_earthmap4k@1.jpg").url()
earthbump10k = FileAttachment("8081_earthbump4k@1.jpg").url()
// CRPZ = FileAttachment("getPicture.png").url()
CRPZ = FileAttachment("download.png").url()
cube = {
const material = new THREE.MeshNormalMaterial();
const geometry = new THREE.BoxGeometry(1, 1, 1);
const cube = new THREE.Mesh(geometry, material);
return cube;
}
plane = {
const geometry = new THREE.PlaneGeometry(options.width, options.height , options.widthSegment, options.heightSegment);
// 使用自定义着色器
const material = new THREE.ShaderMaterial({
uniforms: {
u_map: {
value: new THREE.TextureLoader().load(CRPZ) // 贴图
},
u_bump: {
value: new THREE.TextureLoader().load(CRPZ) // 高度图
},
u_color: {
value: new THREE.Color('rgb(255, 255, 255)')
},
u_opacity: {
value: 1.0
},
time: {
value: 1.0
},
resolution: {
value: new THREE.Vector2()
},
bumpScale: { value: 0.02 }
},
transparent: true,
vertexShader: earthShader.vertexShader, // 顶点着色器
fragmentShader: earthShader.fragmentShader, // 片元着色器
});
const plane = new THREE.Mesh(geometry, material);
plane.rotation.set(-Math.PI / 2, 0, 0);
return plane;
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x001b42);
scene.add(plane);
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, 1, 1)
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
renderer = {
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => renderer.render(scene, camera));
invalidation.then(() => (controls.dispose(), renderer.dispose()));
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
return renderer;
}
THREE = {
const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
