zim+three实现支持webvr的三维房间拼图代码-html代码-BFW代码库

zim+three实现支持webvr的三维房间拼图代码

代码语言：html

所属分类：三维

代码描述：zim+three实现支持webvr的三维房间拼图代码小游戏代码，注意需要在支持webvr的设备中打开操作。

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
</head>

<body translate="no">
  
  
      <script type="module">
import zim from "https://zimjs.org/cdn/016/zim_three";

// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen


new Frame(FIT, 1024, 768, black, black, ready, ["image/65c5688cec812.png", "sound/5e16a04d75540.mp3"], "//repo.bfw.wiki/bfwrepo/");
function ready() {


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

  // FRONT PANEL

  // TextureActive() - https://zimjs.com/docs.html?item=TextureActive
  // Parameters:
  // width, height, interactive, animated, color, color2, angle, borderColor, borderWidth, corner, pattern, scalePattern        
  const puzzle = new TextureActive({
    width: H - 120,
    height: H,
    color: black.toAlpha(.8),
    corner: 20
    // backingOrbit:false // if not wanting to orbitControl on backing
  }).
  addTo();

  TextureActive.makeLogo().scaleTo(puzzle, 60).pos(0, 20, CENTER, TOP, puzzle);

  const scrambler = new Scrambler(chop(new Pic("image/65c5688cec812.png"), 2, 10)).
  scaleTo(puzzle, 90, 90).
  center(puzzle).
  mov(0, 60);

  scrambler.on("complete", () => {
    // animate the model using the ZIM animate function
    animate({
      target: canvasWindow,
      wait: .5,
      props: { "rotation.y": 360 * 3 * RAD },
      ease: "backInOut",
      time: 1.5,
      call: () => {
        canvasWindow.rotation.y = 0;
        scrambler.scramble(1, 2, 3); // time, wait, num
      } // reset rotation
    });
  });
  scrambler.on("mousedown", () => {
    new Aud("sound/5e16a04d75540.mp3").play({ loop: true, volume: .2 });
  }, null, true); // run once
  new Rectangle(scrambler.width - 1, scrambler.height - 1, orange).
  loc(scrambler, null, puzzle).
  ord(-1); // put under the scrambler


  // BACK PANEL
  const backing = new zim.TextureActive({
    width: puzzle.width,
    height: puzzle.height,
    color: black,
    corner: 20,
    animated: false,
    interactive: false }).
  addTo();
  TextureActive.makeBacking(backing.width, backing.height).addTo(backing); // CANVAS WINDOW              


  // ~~~~~~~~~~~~~~~~~~~~~  THREE.JS


  // Three() - https://zimjs.com/docs.html?item=Three
  // Parameters:
  // width, height, color, cameraPosition, cameraLook, interactive, resize, frame, ortho, textureActive, colorSpace, colorManagement, legacyLights, throttle, lay, full, xr, VRButton, xrBufferScale
  const three = new Three({
    width: window.innerWidth,
    height: window.innerHeight,
    cameraPosition: new THREE.Vector3(0, 3, 6),
    textureActive: true,
    xr: true });


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

  const skyTexture = new THREE.TextureLoader().load("//repo.bfw.wiki/bfwrepo/image/6689c1749b65a.png&qu.........完整代码请登录后点击上方下载按钮下载查看