master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_lights_pointlights.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - lights - point lights</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> - point lights WebGL demo.<br />
      Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
    </div>

    <script type="module">

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

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

      import { OBJLoader } from './jsm/loaders/OBJLoader.js';

      let camera, scene, renderer,
        light1, light2, light3, light4,
        object, stats;

      const clock = new v3d.Clock();

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 100;

        scene = new v3d.Scene();

        //model

        const loader = new OBJLoader();
        loader.load('models/obj/walt/WaltHead.obj', function(obj) {

          object = obj;
          object.scale.multiplyScalar(0.8);
          object.position.y = - 30;
          scene.add(object);

        });

        const sphere = new v3d.SphereBufferGeometry(0.5, 16, 8);

        //lights

        light1 = new v3d.PointLight(0xff0040, 2, 50);
        light1.add(new v3d.Mesh(sphere, new v3d.MeshBasicMaterial({ color: 0xff0040 })));
        scene.add(light1);

        light2 = new v3d.PointLight(0x0040ff, 2, 50);
        light2.add(new v3d.Mesh(sphere, new v3d.MeshBasicMaterial({ color: 0x0040ff })));
        scene.add(light2);

        light3 = new v3d.PointLight(0x80ff80, 2, 50);
        light3.add(new v3d.Mesh(sphere, new v3d.MeshBasicMaterial({ color: 0x80ff80 })));
        scene.add(light3);

        light4 = new v3d.PointLight(0xffaa00, 2, 50);
        light4.add(new v3d.Mesh(sphere, new v3d.MeshBasicMaterial({ color: 0xffaa00 })));
        scene.add(light4);

        //renderer

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

        //stats

        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.0005;
        const delta = clock.getDelta();

        if (object) object.rotation.y -= 0.5 * delta;

        light1.position.x = Math.sin(time * 0.7) * 30;
        light1.position.y = Math.cos(time * 0.5) * 40;
        light1.position.z = Math.cos(time * 0.3) * 30;

        light2.position.x = Math.cos(time * 0.3) * 30;
        light2.position.y = Math.sin(time * 0.5) * 40;
        light2.position.z = Math.sin(time * 0.7) * 30;

        light3.position.x = Math.sin(time * 0.7) * 30;
        light3.position.y = Math.cos(time * 0.3) * 40;
        light3.position.z = Math.sin(time * 0.5) * 30;

        light4.position.x = Math.sin(time * 0.3) * 30;
        light4.position.y = Math.cos(time * 0.7) * 40;
        light4.position.z = Math.sin(time * 0.5) * 30;

        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>