threeJS 创建逼真地球

效果图

总体步骤

① 创建场景
② 创建相机
③ 创建物体
④创建渲染器

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{padding: 0;margin: 0;}#container{width: 100%;height: 650px;background-color: #000000;}</style>
</head>
<body>
<div id="container"></div>
<script type="module">
</script>
</body>
</html>

导入文件,创建全局变量和函数

    import * as THREE from "./js/three.module.js";import {OrbitControls} from "./js/OrbitControls.js";let renderer,scene,camera,cube,cloudMesh;action();function action() {onload();run();}

①创建场景

onload函数中

        let container=document.getElementById("container");//获取containerscene=new THREE.Scene();//创建场景

②创建相机

onload函数中

        camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);camera.position.set(0,0,3.5);//创建相机并设置位置//let axe=new THREE.AxesHelper(20);//scene.add(axe);//辅助工具，用于创建相机时，相机找到合适的位置

③创建物体

onload函数中

let group=new THREE.Group();//创建群组，用来存放地球和大气层let pointLight=new THREE.PointLight();//创建点光源pointLight.position.set(-10,4,15);//设置光源的位置pointLight.intensity=1.5;//设置光强scene.add(pointLight);let geometry=new THREE.SphereGeometry(1,32,32);//创建一个球let textureLoader=new THREE.TextureLoader();let surfaceMap=textureLoader.load("./img/earth_surface_2048.jpg");//创建颜色贴图let normalMap=textureLoader.load("./img/earth_normal_2048.jpg");//创建法线贴图let specularMap=textureLoader.load("./img/earth_specular_2048.jpg");//创建高光贴图let material=new THREE.MeshPhongMaterial({map:surfaceMap,normalMap:normalMap,specularMap:specularMap});cube=new THREE.Mesh(geometry,material);//将几何体和材料放到网格中cube.rotation.x=Math.PI/5;group.add(cube);let cloudGeometry=new THREE.SphereGeometry(1.005,32,32);//创建大气层所在的球面let cloudMap=textureLoader.load("./img/earth_clouds_1024.png");let cloudMaterial=new THREE.MeshLambertMaterial({color:0xffffff,map:cloudMap,transparent:true});cloudMesh=new THREE.Mesh(cloudGeometry,cloudMaterial);group.add(cloudMesh);scene.add(group);//把群组添加到场景中

④创建渲染器

onload函数中

     renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(container.offsetWidth,container.offsetHeight);container.appendChild(renderer.domElement);let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象

run函数中

 function run() {requestAnimationFrame(run);//循环调用cloudMesh.rotation.y+=0.0002;//大气层旋转cube.rotation.y+=0.0005;//地球旋转renderer.render(scene,camera);//不断渲染}

总代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>html,body{padding: 0;margin: 0;}#container{width: 100%;height: 650px;background-color: #000000;}</style>
</head>
<body>
<div id="container"></div>
<script type="module">import * as THREE from "./js/three.module.js";import {OrbitControls} from "./js/OrbitControls.js";let renderer,scene,camera,cube,cloudMesh;action();function action() {onload();run();}function onload() {let container=document.getElementById("container");//获取containerscene=new THREE.Scene();//创建场景camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);camera.position.set(0,0,3.5);//创建相机并设置位置//let axe=new THREE.AxesHelper(20);//scene.add(axe);//辅助工具，用于创建相机时，相机找到合适的位置let group=new THREE.Group();//创建群组，用来存放地球和大气层let pointLight=new THREE.PointLight();//创建点光源pointLight.position.set(-10,4,15);//设置光源的位置pointLight.intensity=1.5;//设置光强scene.add(pointLight);let geometry=new THREE.SphereGeometry(1,32,32);//创建一个球let textureLoader=new THREE.TextureLoader();let surfaceMap=textureLoader.load("./img/earth_surface_2048.jpg");//创建颜色贴图let normalMap=textureLoader.load("./img/earth_normal_2048.jpg");//创建法线贴图let specularMap=textureLoader.load("./img/earth_specular_2048.jpg");//创建高光贴图let material=new THREE.MeshPhongMaterial({map:surfaceMap,normalMap:normalMap,specularMap:specularMap});cube=new THREE.Mesh(geometry,material);//将几何体和材料放到网格中cube.rotation.x=Math.PI/5;group.add(cube);let cloudGeometry=new THREE.SphereGeometry(1.005,32,32);//创建大气层所在的球面let cloudMap=textureLoader.load("./img/earth_clouds_1024.png");let cloudMaterial=new THREE.MeshLambertMaterial({color:0xffffff,map:cloudMap,transparent:true});cloudMesh=new THREE.Mesh(cloudGeometry,cloudMaterial);group.add(cloudMesh);scene.add(group);//把群组添加到场景中renderer=new THREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(container.offsetWidth,container.offsetHeight);container.appendChild(renderer.domElement);let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象}function run() {requestAnimationFrame(run);cloudMesh.rotation.y+=0.0002;cube.rotation.y+=0.0005;renderer.render(scene,camera);}</script>
</body>
</html>

threeJS 创建逼真地球相关推荐

threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球提示: 讲座前端大型免费公开课讲座教程从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
threeJS 创建逼真海洋落日
本博客参考官方案例效果图总体步骤 ① 创建场景 ② 创建相机 ③创建渲染器 ④ 创建物体 ⑤ 创建status和OrbitControls html代码 <!DOCTYPE html> ...
html5仿腾讯,高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球
上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 除了手机端的media控 ...
Threejs实现3d地球记录（3）
(2).对等距点集进行三角剖分生成Mash 我将三角剖分可以简单理解为以最接近的三点形成三角形,且各线段(三角形的边)皆不相交:这里使用开源库delaunator进行点的三角剖分 // polygon ...
Threejs实现绘制地球，地理位置标注、经纬度转换世界坐标threejs坐标
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:绘制地球和地理位置进行标注效果图如下: 2,主要说明准备一张地图,创建一个球体并进行贴图,把地理位置经纬度转换成threej ...
Blender2.9全流程创建逼真未来科幻蝙蝠汽车视频教程
Blender2.9全流程创建逼真未来科幻蝙蝠汽车视频教程 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2通道含课程工程素材体裁:在线学习|语言:英语+中文字幕( ...
threejs创建平面几何形状
创建平面几何形状平面几何形状有三种:点,线,面三种,下面说说用threejs创建这几种形状的方法. 创建点创建点可以使用Points类. function createPoints(){//创建一 ...
photoshop使用技巧_如何使用Photoshop创建逼真的漫画
photoshop使用技巧 Even if you don't have much drawing talent, it's surprisingly easy to create a photore ...
threejs创建3d交互地图
文章目录前言关键点源码总结前言基于react-hooks创建的三维地图,只实现了基本的交互展示,可根据个人喜好增加各种交互和展示效果,效果如下. 关键点使用threejs创建3d地图注意 ...

threeJS 创建逼真地球

效果图

总体步骤

html代码

导入文件,创建全局变量和函数

①创建场景

②创建相机

③创建物体

④创建渲染器

总代码

threeJS 创建逼真地球相关推荐

最新文章

热门文章