Bootstrap

记录下在html文件中如何直接使用npm依赖，以threejs为例

参考：
https://www.cnblogs.com/shayloyuki/p/17191489.html

共三种方式
我的代码截图
在这里插入图片描述

方式一：
threejsDemo_script.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<body>
  <div id="container"></div>
  <script src="./three.min.js"></script>

  <script id="vertexShader" type="x-shader/x-vertex">
      void main() {
          gl_Position = vec4( position, 1.0 );
      }
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">
      uniform vec2 u_resolution;
      uniform vec2 u_mouse;
      uniform float u_time;

      void main() {
          vec2 st = gl_FragCoord.xy/u_resolution.xy;
          gl_FragColor=vec4(st.x,st.y,0.0,1.0);
      }
  </script>

  <script >
    // import * as THREE from './three';
      var container;
      var camera, scene, renderer, clock;
      var uniforms;
      var mouse = {x:0, y:0};

      document.onmousemove = getMouseXY;

      init();
      animate();

      function getMouseXY(e) {
          mouse.x = e.pageX;
          mouse.y = e.pageY;
      }

      function init() {
          container = document.getElementById( 'container' );

          camera = new THREE.Camera();
          camera.position.z = 1;

          scene = new THREE.Scene();
          clock = new THREE.Clock();

          var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

          uniforms = {
              u_time: { type: "f", value: 1.0 },
              u_mouse: { type: "v2", value: new THREE.Vector2() },
              u_resolution: { type: "v2", value: new THREE.Vector2() }
          };

          var material = new THREE.ShaderMaterial( {
              uniforms: uniforms,
              vertexShader: document.getElementById( 'vertexShader' ).textContent,
              fragmentShader: document.getElementById( 'fragmentShader' ).textContent
          } );

          var mesh = new THREE.Mesh( geometry, material );
          scene.add( mesh );

          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio( window.devicePixelRatio );

          container.appendChild( renderer.domElement );

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

      function onWindowResize( event ) {
          renderer.setSize( window.innerWidth, window.innerHeight );
          uniforms.u_resolution.value.x = renderer.domElement.width;
          uniforms.u_resolution.value.y = renderer.domElement.height;
          uniforms.u_mouse.value.x = mouse.x;
          uniforms.u_mouse.value.y = mouse.y;
      }

      function animate() {
          requestAnimationFrame( animate );
          render();
      }

      function render() {
          uniforms.u_time.value += clock.getDelta();
          renderer.render( scene, camera );
      }
  </script>
</body>
</html>

方式二：
threejsDemo_module_ ES6 import方式引入.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<body>
  <div id="container"></div>
  <!-- <script src="./three.min.js"></script> -->


  <!-- <script type="importmap">
	{
		"imports": {
			"three": "./three/build/three.module.js",
        		"three/addons/": "./three/examples/jsm/"
		}
	}
</script> -->


  <script id="vertexShader" type="x-shader/x-vertex">
      void main() {
          gl_Position = vec4( position, 1.0 );
      }
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">
      uniform vec2 u_resolution;
      uniform vec2 u_mouse;
      uniform float u_time;

      void main() {
          vec2 st = gl_FragCoord.xy/u_resolution.xy;
          gl_FragColor=vec4(st.x,st.y,0.0,1.0);
      }
  </script>

  <script type="module">
   	import * as THREE from './three/build/three.module.js';
      var container;
      var camera, scene, renderer, clock;
      var uniforms;
      var mouse = {x:0, y:0};

      document.onmousemove = getMouseXY;

      init();
      animate();

      function getMouseXY(e) {
          mouse.x = e.pageX;
          mouse.y = e.pageY;
      }

      function init() {
          container = document.getElementById( 'container' );

          camera = new THREE.Camera();
          camera.position.z = 1;

          scene = new THREE.Scene();
          clock = new THREE.Clock();

        //   var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); 新版本叫 THREE.PlaneGeometry
        var geometry = new THREE.PlaneGeometry( 2, 2 );


          uniforms = {
              u_time: { type: "f", value: 1.0 },
              u_mouse: { type: "v2", value: new THREE.Vector2() },
              u_resolution: { type: "v2", value: new THREE.Vector2() }
          };

          var material = new THREE.ShaderMaterial( {
              uniforms: uniforms,
              vertexShader: document.getElementById( 'vertexShader' ).textContent,
              fragmentShader: document.getElementById( 'fragmentShader' ).textContent
          } );

          var mesh = new THREE.Mesh( geometry, material );
          scene.add( mesh );

          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio( window.devicePixelRatio );

          container.appendChild( renderer.domElement );

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

      function onWindowResize( event ) {
          renderer.setSize( window.innerWidth, window.innerHeight );
          uniforms.u_resolution.value.x = renderer.domElement.width;
          uniforms.u_resolution.value.y = renderer.domElement.height;
          uniforms.u_mouse.value.x = mouse.x;
          uniforms.u_mouse.value.y = mouse.y;
      }

      function animate() {
          requestAnimationFrame( animate );
          render();
      }

      function render() {
          uniforms.u_time.value += clock.getDelta();
          renderer.render( scene, camera );
      }
  </script>
</body>
</html>

方式三：
threejsDemo_module_type="importmap"方式.html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- Copyright 2015 Patricio Gonzalez Vivo (http://patriciogonzalezvivo.com) -->
<body>
  <div id="container"></div>
  <!-- <script src="./three.min.js"></script> -->


  <script type="importmap">
	{
		"imports": {
			"three": "./three/build/three.module.js",
        		"three/addons/": "./three/examples/jsm/"
		}
	}
</script>


  <script id="vertexShader" type="x-shader/x-vertex">
      void main() {
          gl_Position = vec4( position, 1.0 );
      }
  </script>

  <script id="fragmentShader" type="x-shader/x-fragment">
      uniform vec2 u_resolution;
      uniform vec2 u_mouse;
      uniform float u_time;

      void main() {
          vec2 st = gl_FragCoord.xy/u_resolution.xy;
          gl_FragColor=vec4(st.x,st.y,0.0,1.0);
      }
  </script>

  <script type="module">
   	import * as THREE from 'three';
      var container;
      var camera, scene, renderer, clock;
      var uniforms;
      var mouse = {x:0, y:0};

      document.onmousemove = getMouseXY;

      init();
      animate();

      function getMouseXY(e) {
          mouse.x = e.pageX;
          mouse.y = e.pageY;
      }

      function init() {
          container = document.getElementById( 'container' );

          camera = new THREE.Camera();
          camera.position.z = 1;

          scene = new THREE.Scene();
          clock = new THREE.Clock();

        //   var geometry = new THREE.PlaneBufferGeometry( 2, 2 ); 新版本叫 THREE.PlaneGeometry
        var geometry = new THREE.PlaneGeometry( 2, 2 );


          uniforms = {
              u_time: { type: "f", value: 1.0 },
              u_mouse: { type: "v2", value: new THREE.Vector2() },
              u_resolution: { type: "v2", value: new THREE.Vector2() }
          };

          var material = new THREE.ShaderMaterial( {
              uniforms: uniforms,
              vertexShader: document.getElementById( 'vertexShader' ).textContent,
              fragmentShader: document.getElementById( 'fragmentShader' ).textContent
          } );

          var mesh = new THREE.Mesh( geometry, material );
          scene.add( mesh );

          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio( window.devicePixelRatio );

          container.appendChild( renderer.domElement );

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

      function onWindowResize( event ) {
          renderer.setSize( window.innerWidth, window.innerHeight );
          uniforms.u_resolution.value.x = renderer.domElement.width;
          uniforms.u_resolution.value.y = renderer.domElement.height;
          uniforms.u_mouse.value.x = mouse.x;
          uniforms.u_mouse.value.y = mouse.y;
      }

      function animate() {
          requestAnimationFrame( animate );
          render();
      }

      function render() {
          uniforms.u_time.value += clock.getDelta();
          renderer.render( scene, camera );
      }
  </script>
</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
自学网络安全（黑客技术）2024年 —100天学习计划
项目实战--C#实现图书馆信息管理系统
【Redis】分布式（day12）
微信小程序兼容手机底部横条适配
Spring整合Kafka（十九）----Apache Kafka Streams支持
【深度学习】梯度下降与反向传播
PTA L1系列题解（C语言）（L1_041 -- L1_048）
【总结】图像处理与计算机视觉：基础，经典及发展
VSCode配置C/C++语言环境（小白专用保姆教程）（超细）
vue面试题 内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）(1)
;