HTML5/WebGL 虚拟现实版本的3D日晷

VR Sundial，灯塔、哨岗类3D建筑。用来根据太阳照射下的阴影来确定时间的一款古代计时设备。

html5, vr, tower

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4737
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var skyColor = 0xffff7f,
  env = new Primrose.BrowserEnvironment({
    backgroundColor: skyColor,
    groundTexture: "/uploads/150101/sand.jpg",
    useFog: true,
    drawDistance: 25,
    showHeadPointer: isMobile,
    fullScreenButtonContainer: "body",
    enableShadows: true,
    shadowMapSize: isMobile ? 1024 : 2048
  }),

sunDistance = 20,
  sun = circle(1, 45)
    .colored("sun", 0xffffff, { unshaded: true }),

t = function(name, rt, rb, h, sr){
    return cylinder(rt, rb, h, sr, 1)
      .textured(name, "/uploads/170101/rock.jpg", { shadow: true });
  },

sunDialColor = 0xd0d0c0,
  dial = t("dial", 0.333, 0.333, 0.03, 45),

handHeight = 0.25,
  hand = t("hand", 0.01, 0.02, handHeight, 3),

standHeight = 1,
  stand = t("stand", 0.1, 0.3, standHeight, 4),

baseHeight = 0.10,
  base = t("base", 0.35, 0.35, baseHeight, 4),

time = 0;

env.sky.add(sun);
sun.material.fog = false;
sun.material.needsUpdate = true;

env.scene.add(stand);
stand.position.y += standHeight / 2;
stand.position.z += -1.5;
stand.rotation.y = Math.PI / 4;

stand.add(dial);
dial.position.y += standHeight / 2;

stand.add(base);
base.position.y += (baseHeight - standHeight) / 2;

dial.add(hand);
hand.position.y += handHeight / 2;

env.addEventListener("update", function(dt) {
  time += dt;
  env.sun.latLon(10 - time, 30, sunDistance);
  sun.position.copy(env.sun.position);
  sun.lookAt(env.sky.position);
  var s = (1 + sun.position.y / sunDistance) / 2;
  env.ambient.intensity = 0.5 * s;
  env.scene.fog.color
    .setHex(skyColor)
    .multiplyScalar(s);
  env.renderer.setClearColor(env.scene.fog.color.getHex());
});

编译

CSS

HTML

VR Sundial，灯塔、哨岗类3D建筑。用来根据太阳照射下的阴影来确定时间的一款古代计时设备。

html5, vr, tower

编辑器支持Emmet

快捷键

VR Sundial，灯塔、哨岗类3D建筑。用来根据太阳照射下的阴影来确定时间的一款古代计时设备。

html5, vr, tower

HTML5/WebGL VR版本的3D音序调节器

HTML5/WebGL 3D摇摆的头发（毛发）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：