master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_sandbox.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D - webgl 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">
  </head>

  <body>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - sandbox</div>

    <script type="module">

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

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

      import { BasicShader } from './jsm/shaders/BasicShader.js';

      const statsEnabled = true;

      let container, stats;

      let camera, scene, renderer;

      let mouseX = 0, mouseY = 0;

      let windowHalfX = window.innerWidth / 2;
      let windowHalfY = window.innerHeight / 2;

      init();
      animate();

      function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 20000);
        camera.position.z = 3200;

        scene = new v3d.Scene();
        scene.fog = new v3d.Fog(0x000000, 1, 20000);

        const light = new v3d.PointLight(0xffffff);
        scene.add(light);

        const shader = BasicShader;
        const uniforms = shader.uniforms;
        const vertexShader = shader.vertexShader;
        const fragmentShader = shader.fragmentShader;

        const texture1 = new v3d.CanvasTexture(generateTexture(0, 0.5, 1), v3d.UVMapping);
        const texture2 = new v3d.TextureLoader().load('textures/land_ocean_ice_cloud_2048.jpg');

        const materials = [

          new v3d.MeshNormalMaterial(),
          new v3d.MeshDepthMaterial(),
          new v3d.MeshBasicMaterial({ color: 0x0066ff, blending: v3d.AdditiveBlending, transparent: true, depthWrite: false }),
          new v3d.MeshBasicMaterial({ color: 0xffaa00, wireframe: true }),
          new v3d.MeshBasicMaterial({ map: texture1, fog: false }),
          new v3d.MeshBasicMaterial({ map: texture2 }),
          new v3d.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true }),
          new v3d.MeshLambertMaterial({ map: texture2 }),
          new v3d.MeshLambertMaterial({ color: 0xdddddd }),
          new v3d.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true }),
          new v3d.MeshPhongMaterial({ color: 0xdddddd, specular: 0x009900, shininess: 30 })

        ];

        const geometry = new v3d.SphereBufferGeometry(50, 32, 16);

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

          // random order
          //let index = Math.floor(Math.random() * materials.length);

          // sort by material / geometry
          const index = Math.floor((i / 5000) * materials.length);

          const material = materials[index];

          const mesh = new v3d.Mesh(geometry, material);

          mesh.position.x = Math.random() * 10000 - 5000;
          mesh.position.y = Math.random() * 10000 - 5000;
          mesh.position.z = Math.random() * 10000 - 5000;

          //mesh.rotation.x = Math.random() * 360 * (Math.PI / 180);
          mesh.rotation.y = Math.random() * 2 * Math.PI;

          mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;

          scene.add(mesh);

        }

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        if (statsEnabled) {

          stats = new Stats();
          container.appendChild(stats.dom);

        }

        document.addEventListener('mousemove', onDocumentMouseMove, false);

        //

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

      }

      function onWindowResize() {

        windowHalfX = window.innerWidth / 2;
        windowHalfY = window.innerHeight / 2;

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

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

      }

      function generateTexture(r, g, b) {

        const canvas = document.createElement('canvas');
        canvas.width = 256;
        canvas.height = 256;

        const context = canvas.getContext('2d');
        const image = context.getImageData(0, 0, 256, 256);

        let x = 0, y = 0, p;

        for (let i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++) {

          x = j % 256;
          y = x == 0 ? y + 1 : y;
          p = Math.floor(x ^ y);

          image.data[i] = ~ ~ p * r;
          image.data[i + 1] = ~ ~ p * g;
          image.data[i + 2] = ~ ~ p * b;
          image.data[i + 3] = 255;

        }

        context.putImageData(image, 0, 0);

        return canvas;

      }

      function onDocumentMouseMove(event) {

        mouseX = (event.clientX - windowHalfX) * 10;
        mouseY = (event.clientY - windowHalfY) * 10;

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        if (statsEnabled) stats.update();

      }

      function render() {

        camera.position.x += (mouseX - camera.position.x) * .05;
        camera.position.y += (- mouseY - camera.position.y) * .05;

        camera.lookAt(scene.position);

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>