C

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();

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

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

看下效果