当前位置: 首页 > Web前端 > vue.js

用Three.js做一个地球自转,月亮绕地球转的demo

时间:2023-03-31 20:33:20 vue.js

ThirdScene实现了一个月球绕地球转的Demo源码地址Threejs-demo预览地址需要使用包创建场景,实例化纹理加载器,添加时钟constclock=newTHREE。Clock();//实例化纹理加载器consttextureLoader=newTHREE.TextureLoader();constscene=newTHREE.Scene();创建地球对象和月亮对象实例化月亮对象constmoonGeometry=newTHREE.SphereGeometry(5,30,30);constmoonMaterial=newTHREE.MeshPhongMaterial({map:textureLoader.load("./imgs/moon.jpg"),});constmoon=newTHREE.Mesh(moonGeometry,moonMaterial);场景。添加(月亮);实例化地球对象的闪亮程度,数值越高,地图颜色越闪亮mapconstearthGeometry=newTHREE.SphereGeometry(50,50,50);constearthMaterial=newTHREE.MeshPhongMaterial({光泽度:5,map:textureLoader.load(`./imgs/worldmap.jpg`),});constearth=newTHREE.Mesh(earthGeometry,earthMaterial);scene.add(地球);动画functionanimation(){constelapsed=clock.getElapsedTime();moon.position.set(Math.sin(elapsed)*100,0,Math.cos(elapsed)*100);constaxis=newTHREE.Vector3(0,1,0);earth.rotateOnAxis(axis,(elapsed*Math.PI)/1000);renderer.render(场景,相机);requestAnimationFrame(动画);}动画();切换地图顺便试试petite-vue,petite-vue在html中使用非常方便,轻巧小巧,一键使用切换地图123456</div>正在加载...

从“https://unpkg.com/petite-vue?module";createApp({index:1,domElement:null,mounted(){this.domElement=init(this.index);},change(event){app.removeChild(this.domElement);this.domElement=null;setTimeout(()=>{this.domElement=init(this.index);},500);},}).mount();最终实现效果