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

embedded/2024/11/28 23:13:50/

参考：
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.PlaneGeometryvar 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.PlaneGeometryvar 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>

http://www.ppmy.cn/embedded/141285.html

相关文章

深度学习之PSPNet

深度学习之PSPNet

场景解析对于无限制的开放词汇和不同场景来说是具有挑战性的.本文使用文中的pyramid pooling module实现基于不同区域的上下文集成&#xff0c;提出了PSPNet&#xff0c;实现利用上下文信息的能力进行场景解析。    作者认为&#xff0c;FCN存在的主要问题是没有采取合适的策…
阅读更多...
区块链游戏的新观察：自治世界能否成为未来链游的突破口？

区块链游戏的新观察：自治世界能否成为未来链游的突破口？

区块链游戏&#xff08;链游&#xff09;作为加密领域的创新方向&#xff0c;一直被寄予厚望。然而&#xff0c;尽管各类链游层出不穷&#xff0c;大多只是靠代币激励一时爆火&#xff0c;缺乏持久吸引力。这种现象让人对链游未来的发展充满疑虑&#xff1a;是否有一种全新的设…
阅读更多...
卷积神经网络（CNN）中的批量归一化层（Batch Normalization Layer）

卷积神经网络（CNN）中的批量归一化层（Batch Normalization Layer）

批量归一化层&#xff08;BatchNorm层&#xff09;&#xff0c;或简称为批量归一化&#xff08;Batch Normalization&#xff09;&#xff0c;是深度学习中常用的一种技术&#xff0c;旨在加速神经网络的训练并提高收敛速度。 一、基本思想 为了让数据在训练过程中保持同一分布…
阅读更多...
JavaScript零基础入门速通（上）

JavaScript零基础入门速通（上）

目录 1. JavaScript 简介 2. JavaScript 的运行环境 2.1 浏览器端 2.2 服务器端&#xff08;Node.js&#xff09; 3. JavaScript 基础语法 3.1 变量声明 3.2 数据类型 3.3 运算符 3.3.1 算术运算符 .3.2 比较运算符 3.3.3 逻辑运算符 3.4 控制流 3.4.1 条件语句 …
阅读更多...
python的openpyxl库设置表格样式：字体/边框/对齐/颜色等

python的openpyxl库设置表格样式：字体/边框/对齐/颜色等

学习目录 1. 安装和使用openpyxl库设置表格样式 2 设置字体font 3 设置边框 4 设置对齐方式 5 设置单元格数据格式 6 设置行高和列宽 7 填充单元格颜色 附录-关于颜色说明 本章节主要介绍如何使用openpyxl库设置表格中的一些样式&#xff0c;比如字体&#xff0c;边框…
阅读更多...
大语言模型LLM的微调代码详解

大语言模型LLM的微调代码详解

代码的摘要说明 一、整体功能概述 这段 Python 代码主要实现了基于 Hugging Face Transformers 库对预训练语言模型&#xff08;具体为 TAIDE-LX-7B-Chat 模型&#xff09;进行微调&#xff08;Fine-tuning&#xff09;的功能&#xff0c;使其能更好地应用于生成唐诗相关内容的…
阅读更多...
Unity 2020、2021、2022、2023、6000下载安装

Unity 2020、2021、2022、2023、6000下载安装

Unity 2020、2021、2022、2023、6000 下载安装 以Unity 6000.0.24fc1下载安装为例&#xff1a; 打开 https://unity.cn/ 优三缔 官方网站&#xff1b; 点击【产品列表】→点击【查看更多】→选择自己需要的版本→点【开始使用】 点击【从Unity Hub下载】 以Windows为例&am…
阅读更多...
Python入门（14）--数据分析基础

Python入门（14）--数据分析基础

Python数据分析基础 &#x1f4ca; 1. NumPy基础操作 &#x1f522; 1.1 NumPy数组创建与操作 NumPy是Python中科学计算的基础库&#xff0c;提供了高效的多维数组对象和处理工具&#xff1a; import numpy as np# 创建数组 arr1 np.array([1, 2, 3, 4, 5]) arr2 np.zero…
阅读更多...
最新文章

Copyright @ 2022~2023