Public
Edited
May 21, 2024
{
//レンダラーを設置
const renderer = new THREE.WebGLRenderer({antialias: false});
renderer.setSize(width,height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.autoClear = false;
renderer.setClearColor(0x00000, 0.0);
//シーン生成
const scene = new THREE.Scene();
//カメラ設定
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
camera.position.z = 2;
scene.add(camera);
//テクスチャをwebGLにわたす際にY軸をフリップさせる
earthImgTexture.flipY = true;
earthBumpTexture.flipY = true;
earthCloudTexture.flipY = true;
earthGalaxyTexture.flipY = true;
//地球
const earth = new THREE.SphereGeometry(0.6,32,32);
const earth_material = new THREE.MeshPhongMaterial({
roughness : 1,
metalness:0,
map: earthImgTexture,
bumpMap: earthBumpTexture,
bumpScale: 0.3,
});
const earth_mesh = new THREE.Mesh(earth, earth_material)
scene.add(earth_mesh)
//背景
const galaxy = new THREE.SphereGeometry(80,64,64);
const galaxy_material = new THREE.MeshBasicMaterial({
map: earthGalaxyTexture ,
side: THREE.BackSide
});
const galaxy_mesh = new THREE.Mesh(galaxy,galaxy_material);
scene.add(galaxy_mesh);
//オーラ
const oura = new THREE.SphereGeometry(0.62,32,32)
const oura_matrial = getFresnelMat()
const oura_mesh = new THREE.Mesh(oura, oura_matrial);
scene.add(oura_mesh)
// 雲
const cloud = new THREE.SphereGeometry(0.62,32,32);
const cloud_material = new THREE.MeshPhongMaterial({
map: earthCloudTexture,
transparent: true,
opacity:0.9
});
const cloud_mesh = new THREE.Mesh(cloud,cloud_material);
scene.add(cloud_mesh);
//ライト設定
const ambientlight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientlight);
const pointerlight = new THREE.PointLight(0xffffff,0.9);
pointerlight.position.set(5,3,5);
scene.add(pointerlight);
//アニメーションループ開始
const animate = () =>{
requestAnimationFrame(animate);
earth_mesh.rotation.y -= 0.0010;
cloud_mesh.rotation.y += 0.0005;
oura_mesh.rotation.y += 0.0005;
galaxy_mesh.rotation.y += 0.0001;
render();
}
const render = () => {
renderer.render(scene,camera);
}
animate();
return renderer.domElement;
}
earthimg = FileAttachment("earthImg.jpg").image()
earthImgTexture = new THREE.DataTexture( earthimg, 1000, 500 );
earthbump = FileAttachment("earthbump.jpg").image()
earthcloud = FileAttachment("earthCloud.png").image()
earthCloudTexture = new THREE.DataTexture( earthcloud, 1000, 500 );
galaxy = FileAttachment("galaxy.png").image()
earthGalaxyTexture = new THREE.DataTexture( galaxy, 4096, 2048 );
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.
