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

实现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);

}

//调用旋转函数

rotatequest();

 看下效果