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

代码语言：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
  TextureActive.makeLogo(null, true).sca(.7).loc(20, 20, gallery).tap(() => {
    textureActives.manager.toggle();
  });
  new Label("S  T  U  D  I  O", 21, null, tin).loc(322, 58, gallery);

  // BACK OF GALLERY WALL
  const info = new TextureActive({ color: darker, width: W, height: H, corner: 0 }).addTo();
  F.makeIcon({ box: clear }).sca(2).expand().center(info).tap(() => {
   // zgo("", "_blank");
  });



  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // THREEJS

  // Three() comes from the ZIM three helper module
  // to make renderer, scene and camera 
  // Traditionally, this module helps bring threejs into ZIM ;-) 
  // but we can still use the module to help make setting up easier
  // It also comes with OrbitControls, FirstPersonControls and GLTFLoader
  // This is optional - see https://zimjs.com/015/textureActive_raw.html for without Three()

  const three = new Three({
    width: window.innerWidth,
    height: window.innerHeight,
    cameraPosition: new THREE.Vector3(0, -.1, 6.5),
    textureActive: true,
    xr: true // optional
  });

  const scene = three.scene;
  const camera = three.camera;
  const renderer = three.renderer;

  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  // When using VR the viewer starts at 0,0 and a default height
  // It is often easier to put everything in a group so it can be moved.
  // We have built the studio about the right size for VR. 
  // Test early to get your dimensions right... 
  // possibly the holder could be scaled but we did not need to in this case
  const holder = new THREE.Group();
  scene.add(holder);


  // ROOM - traditional three.js
  const stuccoTexture = new THREE.TextureLoader().load("https://zimjs.com/studio/assets/stucco.jpg");
  const brickTexture = new THREE.TextureLoader().load("https://zimjs.com/studio/assets/brick_b.jpg");
  stuccoTexture.wrapS = stuccoTexture.wrapT = THREE.RepeatWrapping;
  stuccoTexture.repeat.set(5, 5);
  brickTexture.wrapS = brickTexture..........完整代码请登录后点击上方下载按钮下载查看