Diorama renderer

diorama.js

@@ -662,7 +662,7 @@ sideScene.add(glyphMesh);
 sideScene.add(outlineMesh);
 sideScene.add(labelMesh);
 sideScene.add(textObject);
-const _addPreviewLights = scene => {
+/* const _addPreviewLights = scene => {
   const ambientLight = new THREE.AmbientLight(0xffffff, 2);
   scene.add(ambientLight);
 
@@ -671,7 +671,19 @@ const _addPreviewLights = scene => {
   directionalLight.updateMatrixWorld();
   scene.add(directionalLight);
 };
-_addPreviewLights(sideScene);
+_addPreviewLights(sideScene); */
+const autoLights = (() => {
+  const ambientLight = new THREE.AmbientLight(0xffffff, 2);
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+  directionalLight.position.set(1, 2, 3);
+  directionalLight.updateMatrixWorld();
+
+  return [
+    ambientLight,
+    directionalLight,
+  ];
+})();
 /* let sideSceneCompiled = false;
 const _ensureSideSceneCompiled = () => {
   if (!sideSceneCompiled) {
@@ -705,6 +717,7 @@ const createPlayerDiorama = ({
   canvas = null,
   objects = [],
   target = null,
+  lights = true,
   label = null,
   outline = false,
   lightningBackground = false,
@@ -716,6 +729,8 @@ const createPlayerDiorama = ({
 
   const {devicePixelRatio: pixelRatio} = window;
 
+  // const renderer = getRenderer();
+
   let locallyOwnedCanvas;
   if (canvas) {
     locallyOwnedCanvas = null;
@@ -807,6 +822,11 @@ const createPlayerDiorama = ({
         for (const object of objects) {
           scene.add(object);
         }
+        if (lights) {
+          for (const autoLight of autoLights) {
+            scene.add(autoLight);
+          }
+        }
       };
 
       // push old state
@@ -828,6 +848,11 @@ const createPlayerDiorama = ({
             }
           }
         }
+        if (lights) {
+          for (const autoLight of autoLights) {
+            autoLight.parent.remove(autoLight);
+          }
+        }
       };
       const oldRenderTarget = renderer.getRenderTarget();
       const oldViewport = renderer.getViewport(localVector4D);
@@ -972,13 +997,13 @@ const createPlayerDiorama = ({
   const compile = () => {
     diorama.triggerLoad();
     postProcessing.addEventListener('update', recompile);
-  } */
-  /* if (player.avatar) {
+  }
+  if (player.avatar) {
     compile();
   } else {
     function avatarchange() {
       if (player.avatar) {
-        // compile();
+        compile();
         player.removeEventListener('avatarchange', avatarchange);
       }
     }

io-manager.js

@@ -684,17 +684,21 @@ const _updateMouseMovement = e => {
 const _getMouseRaycaster = (e, raycaster) => {
   const {clientX, clientY} = e;
   const renderer = getRenderer();
-  renderer.getSize(localVector2D2);
-  localVector2D.set(
-    (clientX / localVector2D2.x) * 2 - 1,
-    -(clientY / localVector2D2.y) * 2 + 1
-  );
-  if (
-    localVector2D.x >= -1 && localVector2D.x <= 1 &&
-    localVector2D.y >= -1 && localVector2D.y <= 1
-  ) {
-    raycaster.setFromCamera(localVector2D, camera);
-    return raycaster;
+  if (renderer) {
+    renderer.getSize(localVector2D2);
+    localVector2D.set(
+      (clientX / localVector2D2.x) * 2 - 1,
+      -(clientY / localVector2D2.y) * 2 + 1
+    );
+    if (
+      localVector2D.x >= -1 && localVector2D.x <= 1 &&
+      localVector2D.y >= -1 && localVector2D.y <= 1
+    ) {
+      raycaster.setFromCamera(localVector2D, camera);
+      return raycaster;
+    } else {
+      return null;
+    }
   } else {
     return null;
   }
@@ -804,7 +808,9 @@ ioManager.mousedown = e => {
   } else {
     if ((changedButtons & 1) && (e.buttons & 1)) { // left
       const raycaster = _getMouseRaycaster(e, localRaycaster);
-      transformControls.handleMouseDown(raycaster);
+      if (raycaster) {
+        transformControls.handleMouseDown(raycaster);
+      }
     }
     if ((changedButtons & 1) && (e.buttons & 2)) { // right
       game.menuDragdownRight();

pic-main.js

@@ -0,0 +1,40 @@
+import {bindCanvas} from './renderer.js';
+import {genPic} from './pic.js';
+
+const defaultUrl = `/avatars/scillia_drophunter_v15_vian.vrm`;
+const rendererSize = 2048;
+const width = 500;
+const height = 500;
+
+const formEl = document.getElementById('form');
+const urlEl = document.getElementById('url');
+const canvasEl = document.getElementById('canvas');
+const videoEl = document.getElementById('video');
+formEl.addEventListener('submit', async e => {
+  e.preventDefault();
+
+  const url = urlEl.value;
+
+  const _bindRendererCanvas = () => {
+    const canvas = document.createElement('canvas');
+    canvas.width = rendererSize;
+    canvas.height = rendererSize;
+    bindCanvas(canvas);
+  };
+  _bindRendererCanvas();
+
+  const _initLocalCanvas = () => {
+    canvasEl.width = width;
+    canvasEl.height = height;
+  };
+  _initLocalCanvas();
+
+  await genPic({
+    url,
+    width,
+    height,
+    canvas: canvasEl,
+    video: videoEl,
+  });
+});
+urlEl.value = defaultUrl;

pic.html

@@ -0,0 +1,20 @@
+<html>
+<head>
+<title>Pic | Webaverse</title>
+<!-- <link rel=stylesheet type='text/css' href="screenshot.css"> -->
+</head>
+<body>
+  <form id="form">
+    <input type=text id="url">
+    <input type="submit">
+  </form>
+  <div className="outputs" id="outputs">
+    <canvas id="canvas"></canvas>
+    <video id="video"></video>
+  </div>
+
+  <script type=module src="pic-main.js"></script>
+  <!-- <div id=iframe-container></div> -->
+</body>
+
+</html>