Three.jsを使った3DフルオンチェーンNFTを作ってみよう【開発】

// Sample1.sol
contract Sample1 is ERC721("Sample1", "SAMPLE1"), Ownable {
    using Strings for uint256;

    IDataChunkCompilerV2 private compiler;
    address[9] private threeAddresses;
    string private constant STYLE_CODE = "%253Cstyle%253E%252A%257Bmargin (中略) %252Fstyle%253E";
    string private constant JS_CODE = "〜"; // ここに script5 (JavaScriptのメインコード)を埋め込む(後述)

    function setCompilerAddress(address newAddress) public onlyOwner {
        compiler = IDataChunkCompilerV2(newAddress);
    }

    function setThreeAddress(
        address chunk1, address chunk2, address chunk3,
        address chunk4, address chunk5, address chunk6,
        address chunk7, address chunk8, address chunk9
    ) public onlyOwner {
        threeAddresses[0] = chunk1;
        threeAddresses[1] = chunk2;
        threeAddresses[2] = chunk3;
        threeAddresses[3] = chunk4;
        threeAddresses[4] = chunk5;
        threeAddresses[5] = chunk6;
        threeAddresses[6] = chunk7;
        threeAddresses[7] = chunk8;
        threeAddresses[8] = chunk9;
    }

    function mint(uint256 tokenId) public onlyOwner {
        _mint(msg.sender, tokenId);
    }

    function tokenURI(uint256 tokenId) public view override returns (string memory) {
        string memory threejs = compiler.compile9(
            threeAddresses[0], threeAddresses[1], threeAddresses[2],
            threeAddresses[3], threeAddresses[4], threeAddresses[5],
            threeAddresses[6], threeAddresses[7], threeAddresses[8]
        );
        string memory tokenIdStr = tokenId.toString();
        return
            string.concat(
                compiler.BEGIN_JSON(),
                string.concat(
                    compiler.BEGIN_METADATA_VAR("animation_url", false),
                    compiler.HTML_HEAD(),
                    STYLE_CODE,
                    string.concat(
                        compiler.BEGIN_SCRIPT_DATA_COMPRESSED(),
                        threejs,
                        compiler.END_SCRIPT_DATA_COMPRESSED()
                    ),
                    string.concat(
                        compiler.BEGIN_SCRIPT(),
                        compiler.SCRIPT_VAR("tokenId", tokenIdStr, true),
                        compiler.END_SCRIPT(),
                        compiler.BEGIN_SCRIPT(),
                        JS_CODE,
                        compiler.END_SCRIPT()
                    ),
                    compiler.END_METADATA_VAR(false)
                ),
                string.concat(compiler.BEGIN_METADATA_VAR("name", false), name(), "%20%23", tokenIdStr, "%22"),
                compiler.END_JSON()
            );
    }
}

compiler.BEGIN_SCRIPT(),
compiler.SCRIPT_VAR("tokenId", tokenIdStr, true),
compiler.END_SCRIPT(),

<script>
var tokenId=1;
</script>

compiler.BEGIN_METADATA_VAR("animation_url", false),
compiler.HTML_HEAD(), // script1, 2 を作成
STYLE_CODE, // style を作成
string.concat(
    // script3 を作成 (Three.js本体)
    compiler.BEGIN_SCRIPT_DATA_COMPRESSED(),
    threejs, // データコントラクトから読み込んだ圧縮されたThree.js
    compiler.END_SCRIPT_DATA_COMPRESSED()
),
string.concat(
    // script4 を作成 (tokenId変数を定義)
    compiler.BEGIN_SCRIPT(),
    compiler.SCRIPT_VAR("tokenId", tokenIdStr, true),
    compiler.END_SCRIPT(),
    // script5 を作成 (メインコード)
    compiler.BEGIN_SCRIPT(),
    JS_CODE,
    compiler.END_SCRIPT()
),
compiler.END_METADATA_VAR(false)

window.onload = () => {
  // シーン、カメラ、レンダラーの設定
  const size = { width: window.innerWidth, height: window.innerHeight };
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  const camera = new THREE.PerspectiveCamera(75, size.width / size.height, 0.1, 1000);
  camera.position.z = 4;
  camera.lookAt(0, 0, 0);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(size.width, size.height);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  // ライトとメッシュの作成と追加
  const light = new THREE.HemisphereLight(0xffffff, 0x202020, 1);
  const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16, 2, 3);
  const material = new THREE.MeshPhongMaterial({ color: 0x00ffff });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(light, mesh);

  // resizeイベント
  window.addEventListener('resize', () => {
    size.width = window.innerWidth;
    size.height = window.innerHeight;
    camera.aspect = size.width / size.height;
    camera.updateProjectionMatrix();
    renderer.setSize(size.width, size.height);
    renderer.setPixelRatio(window.devicePixelRatio);
  });

  // アニメーション
  const clock = new THREE.Clock();
  const animate = function () {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    mesh.rotation.x += delta;
    mesh.rotation.y += delta;
    renderer.render(scene, camera);
  };
  animate();
};

window.onload=()=>{const e={width:window.innerWidth,height:window.innerHeight},i=new THREE.Scene,t=...(略)

window.onload%3D()%3D%3E%7Bconst%20e%3D%7Bwidth%3Awindow.innerWidth%2Cheight%3Awindow.innerHeight%7D...(略)

window.onload%253D()%253D%253E%257Bconst%2520e%253D%257Bwidth%253Awindow.innerWidth%252Cheight%253A...(略)

// コントラクト (Sample1.sol)
string private constant JS_CODE = "window.onload%253D()%253D%253E%257Bconst%2520e%253D%257Bwidth%253A...(略)";

const o = (o) => (void 0 !== o && (l = o % 2147483647) <= 0 && (l += 2147483646), ((l = (16807 * l) % 2147483647) - 1) / 2147483646);

const MAX_INT32 = 2147483647;
class Random {
  constructor(seed) {
    if (seed <= 0) seed += MAX_INT32 - 1;
    this._value = seed;
    this.int(); // ※1
  }
  // 0 <= x < 2147483647 の整数を取得
  int() {
    this._value = (this._value * 48271) % MAX_INT32; // ※2
    return this._value;
  }
  // 0.0 <= x < 1.0 の浮動小数点を取得
  float() {
    return (this.int() - 1) / (MAX_INT32 - 1);
  }
  // min <= x < max の整数を取得
  intRange(min, max) {
    return Math.floor(this.floatRange(min, max));
  }
  // min <= x < max の浮動小数点を取得
  floatRange(min, max) {
    return min + (max - min) * this.float();
  }
  // true or false のブール値を取得
  boolean() {
    return this.int() % 2 === 0;
  }
  // 0x000000 <= x <= 0xffffff の色コードを取得
  color() {
    return this.intRange(0, 0x1000000);
  }
}

// 使用例
const rand = new Random(seed); // seedを指定
const a = rand.int(); // 0 <= a < MAX_INT32
const b = rand.float(); // 0.0 <= b < 1.0
const c = rand.intRange(1, 10); // 1 <= c < 10
const d = rand.intFloat(2.5, 3.5); // 2.5 <= d < 3.5
const e = rand.boolean(); // true or false
const f = rand.color(); // 0x000000 <= f <= 0xffffff 

// ランダムな値を取得
const rand = new Random(tokenId);
const bgColor = rand.color(); // 背景色
const geomColor = rand.color(); // 物体の色
const p = rand.intRange(1, 9); // p: 1〜8の整数
const q = rand.intRange(1, 9); // q: 1〜8の整数
// (略)
scene.background = new THREE.Color(bgColor); // 背景色を設定
// (略)
const geometry = new THREE.TorusKnotGeometry(1, 0.2, 200, 32, p, q); // 形を設定
const material = new THREE.MeshPhongMaterial({ color: geomColor }); // 物体の色を設定

// 画像をdataURLで定義する
const sidePath = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/...(略)';
const topPath = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/...(略)';
const bottomPath = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/...(略)';

window.onload = () => {
  (略)
  const geometry = new THREE.BoxGeometry();
  const loader = new THREE.TextureLoader(); // TextureLoaderを生成
  const sideTexture = loader.load(sidePath); // dataURLから画像を読み込む
  sideTexture.magFilter = THREE.NearestFilter; // ドットがぼやけないように設定
  const topTexture = loader.load(topPath);
  topTexture.magFilter = THREE.NearestFilter;
  const bottomTexture = loader.load(bottomPath);
  bottomTexture.magFilter = THREE.NearestFilter;
  const materials = [
    new THREE.MeshBasicMaterial({ map: sideTexture }), // マテリアルにテクスチャを設定
    new THREE.MeshBasicMaterial({ map: sideTexture }),
    new THREE.MeshBasicMaterial({ map: topTexture }),
    new THREE.MeshBasicMaterial({ map: bottomTexture }),
    new THREE.MeshBasicMaterial({ map: sideTexture }),
    new THREE.MeshBasicMaterial({ map: sideTexture }),
  ];
  const cube = new THREE.Mesh(geometry, materials); // メッシュを作成
  scene.add(cube);
  (略)
  // mousemoveイベント
  window.addEventListener('mousemove', (event) => {
    cube.rotation.y = (event.clientX / size.width - 0.5) * Math.PI; // -90deg ~ +90deg
    cube.rotation.x = (event.clientY / size.height - 0.5) * Math.PI;
  });
  (略)
};

// EarthDataChunk1.sol
pragma solidity ^0.8.1;

contract EarthDataChunk1 {
    string public constant data =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAEsBAMAAADtE9ClAAAA...(略)";
}

// EarthDataChunk2.sol
pragma solidity ^0.8.1;

contract EarthDataChunk2 {
    string public constant data =
        "2r81cvj+U/B4exZjrna30CwatybB5ryJVPlm0SZlKX5S/vftGtfjiRE/bYgX5sPBRnL9phw...(略)";
}

// Sample4.sol
contract Sample4 is ERC721("Sample4", "SAMPLE4"), Ownable {
    (略)
    IDataChunkCompilerV2 private compiler;
    address[2] private imageAddresses;

    function setImageAddress(address chunk1, address chunk2) public onlyOwner {
        imageAddresses[0] = chunk1;
        imageAddresses[1] = chunk2;
    }

    function tokenURI(uint256 tokenId) public view override returns (string memory) {
        (略)
        // データコントラクトから画像を読み込む
        string memory image = compiler.compile2(imageAddresses[0], imageAddresses[1]);

        return
            string.concat(
                compiler.BEGIN_JSON(),
                string.concat(
                    compiler.BEGIN_METADATA_VAR("animation_url", false),
                    compiler.HTML_HEAD(),
                    STYLE_CODE,
                    string.concat(
                        // Three.js
                        compiler.BEGIN_SCRIPT_DATA_COMPRESSED(),
                        threejs,
                        compiler.END_SCRIPT_DATA_COMPRESSED()
                    ),
                    string.concat(
                        // variables
                        compiler.BEGIN_SCRIPT(),
                        compiler.SCRIPT_VAR("tokenId", tokenIdStr, true),
                        compiler.SCRIPT_VAR("imageUrl", image, false), // ← ここでimageUrl変数を追加
                        compiler.END_SCRIPT(),
                        // main script
                        compiler.BEGIN_SCRIPT(),
                        JS_CODE,
                        compiler.END_SCRIPT()
                    ),
                    compiler.END_METADATA_VAR(false)
                ),
                string.concat(compiler.BEGIN_METADATA_VAR("name", false), name(), "%20%23", tokenIdStr, "%22"),
                compiler.END_JSON()
            );
    }
}

compiler.SCRIPT_VAR("imageUrl", image, false);

var imageUrl = "data:image/png;base64,...";

window.onload = () => {
  (略)
  // メッシュを作成
  const geometry = new THREE.SphereGeometry(1, 80, 40);
  const texture = new THREE.TextureLoader().load(imageUrl); // テクスチャを読み込み
  const material = new THREE.MeshStandardMaterial({ map: texture }); // マテリアルにテクスチャを設定
  material.roughness = 0.4;
  const sphere = new THREE.Mesh(geometry, material); // メッシュ(球体)を作成
  // ライトを設定
  const light1 = new THREE.AmbientLight(0x202020);
  const light2 = new THREE.PointLight();
  light2.position.set(2, 2, 2);
  scene.add(sphere, light1, light2);
  (略)
}