1 <!DOCTYPE html>2 <html lang="en">3 4 <head>5 <meta charset="UTF-8">6 <title>VIPE DEMO</title>7 <link rel="stylesheet" href="style.css">8 9 <style>10 canvas {11 width: 100%;12 height: 100%;13 position: absolute;14 top: 0;15 left: 0;16 z-index: -1;17 }18 </style>19 20 <script type="importmap">21 {22 "imports": {23 "three": "https://unpkg.com/three@0.154.0/build/three.module.js",24 "three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"25 }26 }27 </script>28 29 <script type="module">30 import * as THREE from 'three';31 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';32 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';33 import { Vipe } from 'https://unpkg.com/@vipeio/sdk@1.0.2/dist/index.js';34 import { VRMLoaderPlugin, VRMUtils } from "https://unpkg.com/@pixiv/three-vrm@2.0.2/lib/three-vrm.module.js";35 36 const vipe = new Vipe({ apiKey: "$2b$10$EfHC7O4G9bqfqxrsrDfAPesR1napi3.4NVX3y6cTrjlO2Qfh4P6iy", avatarSelectorConfig: { mode: "iframe" } });37 38 const scene = new THREE.Scene();39 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);40 const Alight = new THREE.AmbientLight(0xFFFFFF, 1);41 const Dlight = new THREE.DirectionalLight(0xFFFFFF, 1);42 43 let vrmModel;44 45 const renderer = new THREE.WebGLRenderer({ antialias: true });46 renderer.setSize(window.innerWidth, window.innerHeight);47 renderer.setClearColor("#E3E3E3");48 renderer.setPixelRatio(window.devicePixelRatio);49 renderer.physicallyCorrectLights = true;50 renderer.outputEncoding = THREE.sRGBEncoding;51 renderer.shadowMap.enabled = true;52 renderer.shadowMap.type = THREE.PCFSoftShadowMap;53 renderer.toneMapping = THREE.ACESFilmicToneMapping;54 renderer.toneMappingExposure = 1;55 56 camera.position.z = 3.5;57 camera.position.y = 1.5;58 59 camera.add(Dlight);60 camera.add(Alight);61 camera.updateProjectionMatrix();62 63 const controls = new OrbitControls(camera, renderer.domElement);64 controls.target = new THREE.Vector3(0, 1.5, 0);65 66 scene.add(Dlight);67 scene.add(Alight);68 scene.add(camera);69 70 const grid = new THREE.GridHelper(10, 10, 0x000000, 0x000000);71 scene.add(grid);72 73 renderer.render(scene, camera);74 75 window.addEventListener('resize', () => {76 renderer.setSize(window.innerWidth, window.innerHeight);77 camera.aspect = window.innerWidth / window.innerHeight;78 camera.updateProjectionMatrix();79 });80 81 const repaint = () => {82 requestAnimationFrame(repaint);83 84 controls.update();85 renderer.render(scene, camera);86 87 if (camera.position.y < 0.12)88 camera.position.y = 0.12;89 if (camera.position.y > 3.5)90 camera.position.y = 3.5;91 }92 93 window.onload = function () {94 document.body.appendChild(renderer.domElement);95 }96 97 const loadVRM = (url) => {98 const gltfLoader = new GLTFLoader();99 gltfLoader.register((parser) => new VRMLoaderPlugin(parser));100 gltfLoader.load(url, (gltf) => {101 const vrm = gltf.userData.vrm;102 VRMUtils.rotateVRM0(vrm);103 104 if (vrmModel) {105 scene.remove(vrmModel);106 }107 108 console.log("VRM", vrm);109 110 vrmModel = gltf.scene;111 scene.add(vrmModel);112 });113 }114 115 function openAvatarSelector() {116 vipe.openAvatarSelector((nft, url) => {117 console.log("AVATAR SELECTED", { nft, url })118 loadVRM(url);119 });120 }121 122 window.openAvatarSelector = openAvatarSelector;123 repaint();124 125 </script>126 </head>127 128 <body>129 <div id="app">130 <h1>VIPE DEMO</h1>131 <button onclick="openAvatarSelector()">CHOOSE AVATAR</button>132 </div>133 134 </html>Enlace
El enlace para compartir es: