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

server/2024/11/28 22:04:10/

参考：
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/server/145732.html

相关文章

双十一线上服务调用链路追踪SkyWalking实战分析

双十一线上服务调用链路追踪SkyWalking实战分析

序言 随着电商行业的飞速发展&#xff0c;双十一购物节已成为全球最大的购物狂欢节之一。在双十一期间&#xff0c;电商平台需要处理海量的用户请求和订单&#xff0c;这对系统的稳定性和性能提出了极高的要求。为了确保系统在高并发环境下的稳定运行&#xff0c;对线上服务的…
阅读更多...
Electron文件写入、读取（作用：公共全局变量，本地存储）

Electron文件写入、读取（作用：公共全局变量，本地存储）

Electron文件写入、读取&#xff08;作用&#xff1a;公共全局变量&#xff0c;本地存储&#xff09; 使用Node.js的fs模块 也可以直接使用Node.js的fs模块来实现本地文件的读写操作 // electron/main.jsconst fs require(fs);// 写入文件localhost.txt fs.writeFileSync(lo…
阅读更多...
python实现TCP服务端，支持对所有客户端的数据收发，支持终端自定义命令操作，提供clear命令一键断开所有的客户端连接

python实现TCP服务端，支持对所有客户端的数据收发，支持终端自定义命令操作，提供clear命令一键断开所有的客户端连接

前言 python实现TCP服务端&#xff0c;支持对所有客户端的数据收发&#xff0c;支持终端自定义命令操作&#xff0c;提供clear命令一键断开所有的客户端连接 简单易懂&#xff0c;直接上码 源码 import socket import threadingclass TCPServer:# 修改此处ip 端口def __ini…
阅读更多...
Linux 命令总结

Linux 命令总结

01. ls 指令 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件。 -i 输出文件的 i 节点的索引信息。 如 ls –…
阅读更多...
不需要双手离开键盘 vscode

不需要双手离开键盘 vscode

目标是“不需要双手离开键盘”&#xff01; ctrl shift O 打开函数导航窗格 ctrl enter 行中换行 alt ↑/↓上下移行 shift alt ↑/↓上下复制 ctrl ←/→ 按代码块移动 ctrl delete / backspace按代码块删除 ctrl l 选择单行 shift delete 删除整行 ctrl C/V 复制/…
阅读更多...
On-Chip-Network之routing

On-Chip-Network之routing

在确定网络拓扑之后&#xff0c;路由算法用来决定消息将通过网络的哪条路径到达目的地。 路由算法的目标是将流量均匀地分布在由网络拓扑提供的路径上&#xff0c;以avoid hotspots and minimize contention&#xff0c;从而减少网络延迟和提高吞吐量。所有这些性能目标必须在严…
阅读更多...
使用OpenSSL创建CA，并基于CA创建证书

使用OpenSSL创建CA，并基于CA创建证书

生成CA证书 生成CA证书的私钥 openssl genrsa -out ca.key 4096生成CA证书 openssl req -x509 -new -nodes -sha512 -days 3650 \-subj "/CCN/STBeijing/LBeijing/Oexample/OUPersonal/CNMyPersonal Root CA" \-key ca.key \-out ca.crt生成Server证书 证书通常包…
阅读更多...
【MySQL】开发技术深度探索：mysql数据库复合查询全面详解

【MySQL】开发技术深度探索：mysql数据库复合查询全面详解

前言&#xff1a;本节内容为mysql的符合查询。 本节内容是基本查询的进阶&#xff0c; 是对内置函数&#xff0c; 基本查询的集合使用。 友友们多多利用文章中的案例练习进行掌握。 ps&#xff1a;本节内容还是使用员工表进行演示&#xff0c; 没有员工表的友友可以去网络上找…
阅读更多...
最新文章

Copyright @ 2022~2023