zim_three实现三维VR场景空间菜单操作效果代码-html代码-BFW代码库

zim_three实现三维VR场景空间菜单操作效果代码

代码语言：html

所属分类：三维

代码描述：zim_three实现三维VR场景空间菜单操作效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">


</head>
<body>

  <script type="module" >

import zim from "https://zimjs.org/cdn/016/zim_three";

new Frame(FIT, 1000, 400, darker, darker, ready, ["gf_Protest Strike", "stucco.jpg", "brick_b.jpg"], "https://zimjs.com/studio/assets/");
function ready() {

  // ~~~~~~~~~~~~~~~~~~~~~~~
  // ZIM

  // TEXTUREACTIVE 
  // for more options - see https://zimjs.com/docs.html?item=TextureActive
  // Here we use gallery as that is what is used in the Studio examples
  // but you can call it whatever you want like menu, game, etc. 
  // and then make sure the change the name passed to the TextureActives further down
  const gallery = new TextureActive({
    width: W,
    height: H,
    color: light, // may need to change this to match feature color
    corner: 0 }).
  addTo();


  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // ZIM FEATURE - LIST
  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  const topics = ["DRAG", "DRAG\nON\nPATH", "PEN", "COLOR\nPICKER", "STEPPER", "DIAL", "SLIDER", "TRANSFORM", "SCRAMBLER", "PHYSICS", "EMITTER", "RADIAL", "ANIMATE", "PROGRESS\nBAR", "INDICATOR", "D PAD", "TABS\n&\nPAD", "BLOB\n&\nSQUIGGLE", "WINDOW\n&\nWRAPPER", "SYNTH", "PARALLAX", "SPRITES", "FORMS", "EDITABLE\nTEXT", "KEYBOARD", "CONNECTORS", "CAROUSEL", "HIT TESTS", "TILE", "PACK", "BEADS", "FLIPPER", "BOOK", "MULTIUSER"];
  const file = ["drag", "path", "pen", "colorpicker", "stepper", "dial", "slider", "transform", "scrambler", "physics", "emitter", "radial", "animate", "progress", "indicator", "dpad", "tabs", "blob", "window", "synth", "parallax", "sprites", "forms", "text", "keyboard", "connectors", "carousel", "hittests", "tile", "pack", "beads", "flipper", "book", "multiuser"];
  const items = [];
  const colors = series(red, pink.darken(.1), blue, green.darken(.1), orange, brown.darken(.2), silver);
  STYLE = {
    font: "Protest Strike",
    lineWidth: 180,
    size: 30,
    align: CENTER,
    valign: CENTER };

  loop(topics, (topic, i) => {
    let item;
    if (file[i]) {
      item = new Page(200, 200, colors()).tap(() => {
      //  zgo("https://zimjs.com/studio/" + file[i] + ".html", "_blank");
      });
      new Label({ text: topic, color: white }).center(item);
    } else {
      item = new Page(200, 200, yellow.darken(.2)).alp(.6).tap(() => {
        coming.show();
      });
      new Label({ text: topic, color: white }).center(item);
    }
    item.backing.corner = 100;
    items.push(item);
  });
  STYLE = {};

  const list = new List({
    height: 200,
    width: 1000,
    list: items,
    spacing: 10,
    viewNum: 5.5,
    borderColor: yellow,
    backdropColor: yellow,
    vertical: false,
    scrollBarActive: false }).
  pos(0, 60, CENTER, BOTTOM, gallery);

  // END ZIM FEATURE


  // STUDIO INTERFACE
  STYLE = { label: "LIST", corner: 0, width: 170, autoPaddingH: 50, shadowColor: -1, scale: .7 };
  if (M) {// mobile
    new Button({ color: purple, backgroundColor: light, borderColor: purple, borderWidth: 3 }).
    pos(-2, 45, RIGHT, TOP, gallery).
    noMouse();
  } else {
    new Button().
    pos(0, 45, RIGHT, TOP, gallery).
    tap(() => {
     // zgo("", "_editor");
    });
  }
  STYLE = {};

  // logo that links to 2D view - or press the T key
  T.........完整代码请登录后点击上方下载按钮下载查看