master

分支 (1)

管理

管理

master

verge3d-code-examples
/
svg_sandbox.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D svg - sandbox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
      svg {
        display: block;
      }
    </style>
  </head>
  <body>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import Stats from './jsm/libs/stats.module.js';

      import { SVGRenderer, SVGObject } from './jsm/renderers/SVGRenderer.js';

      let camera, scene, renderer, stats;

      let group;

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 500;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xf0f0f0);

        // QRCODE

        const loader = new v3d.BufferGeometryLoader();
        loader.load('models/json/QRCode_buffergeometry.json', function(geometry) {

          mesh = new v3d.Mesh(geometry, new v3d.MeshLambertMaterial({ vertexColors: true }));
          mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
          scene.add(mesh);

        });

        // CUBES

        const boxGeometry = new v3d.BoxBufferGeometry(100, 100, 100);

        let mesh = new v3d.Mesh(boxGeometry, new v3d.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }));
        mesh.position.x = 500;
        mesh.rotation.x = Math.random();
        mesh.rotation.y = Math.random();
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
        scene.add(mesh);

        mesh = new v3d.Mesh(boxGeometry, new v3d.MeshBasicMaterial({ color: Math.random() * 0xffffff }));
        mesh.position.x = 500;
        mesh.position.y = 500;
        mesh.rotation.x = Math.random();
        mesh.rotation.y = Math.random();
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
        scene.add(mesh);

        // PLANE

        mesh = new v3d.Mesh(new v3d.PlaneBufferGeometry(100, 100), new v3d.MeshBasicMaterial({ color: Math.random() * 0xffffff, side: v3d.DoubleSide }));
        mesh.position.y = - 500;
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
        scene.add(mesh);

        // CYLINDER

        mesh = new v3d.Mesh(new v3d.CylinderBufferGeometry(20, 100, 200, 10), new v3d.MeshBasicMaterial({ color: Math.random() * 0xffffff }));
        mesh.position.x = - 500;
        mesh.rotation.x = - Math.PI / 2;
        mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
        scene.add(mesh);

        // POLYFIELD

        const geometry = new v3d.BufferGeometry();
        const material = new v3d.MeshBasicMaterial({ vertexColors: true, side: v3d.DoubleSide });

        const v = new v3d.Vector3();
        const v0 = new v3d.Vector3();
        const v1 = new v3d.Vector3();
        const v2 = new v3d.Vector3();
        const color = new v3d.Color();

        const vertices = [];
        const colors = [];

        for (let i = 0; i < 100; i++) {

          v.set(
            Math.random() * 1000 - 500,
            Math.random() * 1000 - 500,
            Math.random() * 1000 - 500
          );

          v0.set(
            Math.random() * 100 - 50,
            Math.random() * 100 - 50,
            Math.random() * 100 - 50
          );

          v1.set(
            Math.random() * 100 - 50,
            Math.random() * 100 - 50,
            Math.random() * 100 - 50
          );

          v2.set(
            Math.random() * 100 - 50,
            Math.random() * 100 - 50,
            Math.random() * 100 - 50
          );

          v0.add(v);
          v1.add(v);
          v2.add(v);

          color.setHex(Math.random() * 0xffffff);

          // create a single triangle

          vertices.push(v0.x, v0.y, v0.z);
          vertices.push(v1.x, v1.y, v1.z);
          vertices.push(v2.x, v2.y, v2.z);

          colors.push(color.r, color.g, color.b);
          colors.push(color.r, color.g, color.b);
          colors.push(color.r, color.g, color.b);

        }

        geometry.setAttribute('position', new v3d.Float32BufferAttribute(vertices, 3));
        geometry.setAttribute('color', new v3d.Float32BufferAttribute(colors, 3));

        group = new v3d.Mesh(geometry, material);
        group.scale.set(2, 2, 2);
        scene.add(group);

        // SPRITES

        for (let i = 0; i < 50; i++) {

          const material = new v3d.SpriteMaterial({ color: Math.random() * 0xffffff });
          const sprite = new v3d.Sprite(material);
          sprite.position.x = Math.random() * 1000 - 500;
          sprite.position.y = Math.random() * 1000 - 500;
          sprite.position.z = Math.random() * 1000 - 500;
          sprite.scale.set(64, 64, 1);
          scene.add(sprite);

        }

        // CUSTOM

        const node = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        node.setAttribute('stroke', 'black');
        node.setAttribute('fill', 'red');
        node.setAttribute('r', '40');

        for (let i = 0; i < 50; i++) {

          const object = new SVGObject(node.cloneNode());
          object.position.x = Math.random() * 1000 - 500;
          object.position.y = Math.random() * 1000 - 500;
          object.position.z = Math.random() * 1000 - 500;
          scene.add(object);

        }

        // CUSTOM FROM FILE

        const fileLoader = new v3d.FileLoader();
        fileLoader.load('models/svg/hexagon.svg', function(svg) {

          const node = document.createElementNS('http://www.w3.org/2000/svg', 'g');
          const parser = new DOMParser();
          const doc = parser.parseFromString(svg, 'image/svg+xml');

          node.appendChild(doc.documentElement);

          const object = new SVGObject(node);
          object.position.x = 500;
          scene.add(object);

        });

        // LIGHTS

        const ambient = new v3d.AmbientLight(0x80ffff);
        scene.add(ambient);

        const directional = new v3d.DirectionalLight(0xffff00);
        directional.position.set(- 1, 0.5, 0);
        scene.add(directional);

        renderer = new SVGRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setQuality('low');
        document.body.appendChild(renderer.domElement);

        stats = new Stats();
        document.body.appendChild(stats.dom);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }

      function render() {

        const time = Date.now() * 0.0002;

        camera.position.x = Math.sin(time) * 500;
        camera.position.z = Math.cos(time) * 500;
        camera.lookAt(scene.position);

        group.rotation.x += 0.01;

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>