Hugo博客个性化主题开发踩坑记录（二）

原创已于 2022-04-17 15:30:26 修改 · 741 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-04-06 22:31:47 首次发布

这篇博客展示了如何利用Three.js库创建一个可旋转的地球3D模型。通过加载地球纹理，设置材质，并结合定时器实现地球绕Y轴平滑旋转的视觉效果。读者可以学习到Three.js的基本用法以及如何实现3D对象的动态效果。

实现threejs做的一个有趣的旋转小特效

创建球体并设置地球纹理

 //earth

    var earthgeometry = new THREE.SphereGeometry(100,100,100);

    var texture = new THREE.TextureLoader().load( './image/ditu6.png' );

    var earthmaterial = new THREE.MeshBasicMaterial({

    color: 0xffffff,

    // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值

    map: texture,

    side: THREE.DoubleSide,

     transparent: true,

   

  });

    var earth =  new THREE.Mesh(earthgeometry, earthmaterial);

scene.add(earth);

创建旋转函数

function rotatequest(){

setInterval(function (){

var sk = document.getElementById('test').scrollTop;

//绑定对应id元素滑动像素值

    var rk = 0.05;//设定滑动速率

    earth.rotation.set(0,rk*sk,0);//绕y轴旋转

    renderer.render(scene, camera);

    } ,30);

}

//调用旋转函数