master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_geometries_parametric.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - parametric geometries</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="container"></div>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - parametric geometries</div>

    <script type="module">

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

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

      import { Curves } from './jsm/curves/CurveExtras.js';
      import { ParametricGeometries } from './jsm/geometries/ParametricGeometries.js';

      let camera, scene, renderer, stats;

      init();
      animate();

      function init() {

        const container = document.getElementById('container');

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.y = 400;

        scene = new v3d.Scene();

        //

        const ambientLight = new v3d.AmbientLight(0xcccccc, 0.4);
        scene.add(ambientLight);

        const pointLight = new v3d.PointLight(0xffffff, 0.8);
        camera.add(pointLight);
        scene.add(camera);

        //

        const map = new v3d.TextureLoader().load('textures/uv_grid_opengl.jpg');
        map.wrapS = map.wrapT = v3d.RepeatWrapping;
        map.anisotropy = 16;

        const material = new v3d.MeshPhongMaterial({ map: map, side: v3d.DoubleSide });

        //

        let geometry, object;

        geometry = new v3d.ParametricBufferGeometry(ParametricGeometries.plane(100, 100), 10, 10);
        geometry.center();
        object = new v3d.Mesh(geometry, material);
        object.position.set(- 200, 0, 200);
        scene.add(object);

        geometry = new v3d.ParametricBufferGeometry(ParametricGeometries.klein, 20, 20);
        object = new v3d.Mesh(geometry, material);
        object.position.set(0, 0, 200);
        object.scale.multiplyScalar(5);
        scene.add(object);

        geometry = new v3d.ParametricBufferGeometry(ParametricGeometries.mobius, 20, 20);
        object = new v3d.Mesh(geometry, material);
        object.position.set(200, 0, 200);
        object.scale.multiplyScalar(30);
        scene.add(object);

        //

        const GrannyKnot = new Curves.GrannyKnot();

        let torus = new ParametricGeometries.TorusKnotGeometry(50, 10, 50, 20, 2, 3);
        let sphere = new ParametricGeometries.SphereGeometry(50, 20, 10);
        let tube = new ParametricGeometries.TubeGeometry(GrannyKnot, 100, 3, 8, true);

        torus = new v3d.BufferGeometry().fromGeometry(torus);
        sphere = new v3d.BufferGeometry().fromGeometry(sphere);
        tube = new v3d.BufferGeometry().fromGeometry(tube);

        object = new v3d.Mesh(torus, material);
        object.position.set(- 200, 0, - 200);
        scene.add(object);

        object = new v3d.Mesh(sphere, material);
        object.position.set(0, 0, - 200);
        scene.add(object);

        object = new v3d.Mesh(tube, material);
        object.position.set(200, 0, - 200);
        object.scale.multiplyScalar(2);
        scene.add(object);

        //

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

        stats = new Stats();
        container.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 timer = Date.now() * 0.0001;

        camera.position.x = Math.cos(timer) * 800;
        camera.position.z = Math.sin(timer) * 800;

        camera.lookAt(scene.position);

        scene.traverse(function(object) {

          if (object.isMesh === true) {

            object.rotation.x = timer * 5;
            object.rotation.y = timer * 2.5;

          }

        });

        renderer.render(scene, camera);

      }

    </script>

  </body>
</html>