master

分支 (1)

管理

管理

master

verge3d-code-examples
/
css3d_sandbox.html

<!DOCTYPE html>
<html>
  <head>
    <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>
      body {
        color: #000;
      }
      a {
        color: #080;
      }
    </style>
  </head>
  <body>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> css3d - sandbox</div>

    <script type="module">

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

      import { TrackballControls } from './jsm/controls/TrackballControls.js';
      import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';

      let camera, scene, renderer;

      let scene2, renderer2;

      let controls;

      init();
      animate();

      function init() {

        camera = new v3d.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.set(200, 200, 200);

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

        scene2 = new v3d.Scene();

        const material = new v3d.MeshBasicMaterial({ color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: v3d.DoubleSide });

        //

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

          const element = document.createElement('div');
          element.style.width = '100px';
          element.style.height = '100px';
          element.style.opacity = (i < 5) ? 0.5 : 1;
          element.style.background = new v3d.Color(Math.random() * 0xffffff).getStyle();

          const object = new CSS3DObject(element);
          object.position.x = Math.random() * 200 - 100;
          object.position.y = Math.random() * 200 - 100;
          object.position.z = Math.random() * 200 - 100;
          object.rotation.x = Math.random();
          object.rotation.y = Math.random();
          object.rotation.z = Math.random();
          object.scale.x = Math.random() + 0.5;
          object.scale.y = Math.random() + 0.5;
          scene2.add(object);

          const geometry = new v3d.PlaneBufferGeometry(100, 100);
          const mesh = new v3d.Mesh(geometry, material);
          mesh.position.copy(object.position);
          mesh.rotation.copy(object.rotation);
          mesh.scale.copy(object.scale);
          scene.add(mesh);

        }

        //

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

        renderer2 = new CSS3DRenderer();
        renderer2.setSize(window.innerWidth, window.innerHeight);
        renderer2.domElement.style.position = 'absolute';
        renderer2.domElement.style.top = 0;
        document.body.appendChild(renderer2.domElement);

        controls = new TrackballControls(camera, renderer2.domElement);

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

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

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

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

      }

      function animate() {

        requestAnimationFrame(animate);

        controls.update();

        renderer.render(scene, camera);
        renderer2.render(scene2, camera);

      }

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