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

海马区2024-11-28 14:31

参考：

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>
相关推荐
Array[赵]20 分钟前
npm 最新国内淘宝镜像地址源 (旧版已不能用)
前端·npm·node.js
于慨21 分钟前
pnpm报错如Runing this command will add the dependency to the workspace root所示
前端·npm
爱上语文3 小时前
Ajax入门程序
前端·javascript·css·ajax·html
yangshuo12819 小时前
Centos 安装 Node.js 和 npm
npm·centos·node.js
多情码农无情键16 小时前
浏览器漫谈HTML--2.2从表单标签看vue的响应式系统 理论+实战
前端·javascript·html
科研online17 小时前
【ArcGIS Pro】实现一下完美的坐标点标注
arcgis
YXGiser17 小时前
ArcGIS+deck.gl矢量切片三维化表示建筑白模
arcgis
会编程的果子君1 天前
Python语法基础（一）
开发语言·python·html
shawya_void1 天前
javaweb-day01-html和css初识
前端·css·html
热门推荐
01软件工程从理论到实践客观题汇总(头歌第一章至第八章)02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04基于微信小程序的自习室预约系统的设计与实现05玄机平台应急响应—webshell查杀06PyTorch机器学习实现液态神经网络07Docker 夺命连环 15 问0804 - matlab m_map地学绘图工具基础函数 - 设置网格09RAG 实践- Ollama+RagFlow 部署本地知识库10【软考经验分享】软考-中级-嵌入式备考