3d水滑梯

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var ww = window.innerWidth,
    wh = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("canvas")
});
renderer.setSize(ww, wh);
renderer.setClearColor(0xffffff);

var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 40, 70);

var camera = new THREE.PerspectiveCamera(45, ww/wh, 1, 100);

var ambient = new THREE.AmbientLight( 0xffffff,0.5 );
scene.add( ambient );

var light = new THREE.PointLight( 0xffffff, 3, 200 );
scene.add(light);

var mouse = new THREE.Vector2(0.3,0.3);
window.addEventListener("mousemove", function(e){
  mouse.y = (1 - e.clientY / wh)*0.5;
});
window.addEventListener("resize", function() {
  ww = window.innerWidth;
  wh = window.innerHeight;
  camera.aspect = ww / wh;
  camera.updateProjectionMatrix();
  renderer.setSize(ww, wh);
});

var curve, camera2, helper;
function createTube(){
  var points = [];
  var rings = 400;
  for(var i=0;i<rings;i++){
    var x = noise.simplex2(i*0.008, 0.1)*150;
    var y = noise.simplex2(i*0.008, 0.1)*150;
    var z = i*3;
    points.push(new THREE.Vector3(x,y,z));
  }
  curve = new THREE.CatmullRomCurve3(points);

var geometry = new THREE.TubeGeometry( curve, rings, 2, 20, false );
  var color = new THREE.Color(0xff0000)
  for(i=0;i<geometry.faces.length;i++){
    var index = Math.abs(noise.simplex2(geometry.vertices[geometry.faces[i].a].z*0.02,2) );
    geometry.faces[i].color = new THREE.Color("hsl("+(index*100+180)+",50%,50%)");
  }
  
  var material = new THREE.MeshLambertMaterial({
    side : THREE.BackSide,
    color:0xfffff0,
    vertexColors: THREE.FaceColors
  });
  var mesh = new THREE.Mesh( geometry, material );
  scene.add(mesh);
}

createTube();
requestAnimationFrame(render);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg