记录下在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.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.mzph.cn/bicheng/62262.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringMVC-Day1

SpringMVC-Day1

SpringMVC 1.SpringMVC介绍 springMVC是一种基于Java实现MVC模型的轻量级Web框架 优点&#xff1a; 使用简单&#xff0c;开发便捷&#xff08;相较于Servelt&#xff09; 灵活性强 使用SpringMVC技术开发web程序流程 创建web工程&#xff08;Maven结构&#xff09; 设置…
阅读更多...
鸿蒙面试 --- 性能优化

鸿蒙面试 --- 性能优化

性能优化可以从三个方面入手 感知流畅、渲染性能、运行性能 感知流畅 在应用开发中&#xff0c;动画可以为用户界面增添生动、流畅的交互效果&#xff0c;提升用户对应用的好感度。然而&#xff0c;滥用动画也会导致应用性能下降&#xff0c;消耗过多的系统资源&#xff0c;…
阅读更多...
C#变量和函数如何和unity组件绑定

C#变量和函数如何和unity组件绑定

1.Button On_click (1)GameObject通过Add component添加上Script (2)Button选GameObject组件而不是直接选Script,直接选Script出现不了Script中的函数 2.RawImage 上面是错的 3.Text 上面是错的&#xff0c;应该是直接在GameObject里面填上对应的值 总结&#xff1a; …
阅读更多...
el-dialog中调用resetFields()方法重置表单报错

el-dialog中调用resetFields()方法重置表单报错

前言 在开发中&#xff0c;弹框和表单是两个常见的组件&#xff0c;它们通常一起使用以实现用户交互和数据输入。然而&#xff0c;当我们尝试在弹框中调用表单的 resetFields() 方法时&#xff0c;有时会遇到报错的情况。 一、用法错误 确保 this.$refs[ruleForm].resetFields…
阅读更多...
TCP网络套接字

TCP网络套接字

引言 前面我们已经介绍了udp套接字的相关编写&#xff0c;本文主要介绍TCP套接字的相关接口和一些相关知识&#xff0c;方便大家后续对TCP的进一步理解。 相关接口 1、socket 这个接口我们已经在前面有所了解&#xff0c;这里我们再重新回顾一下 第一个参数我们依然使用AF…
阅读更多...
rustdesk 自建服务

rustdesk 自建服务

RustDesk 部署RustDesk sudo docker image pull rustdesk/rustdesk-server sudo docker run --name hbbs -p 21115:21115 -p 21116:21116 -p 21116:21116/udp -p 21118:21118 -v pwd:/root -td --nethost rustdesk/rustdesk-server hbbs sudo docker run --name hbbr -p 2111…
阅读更多...
Java面试问答FAQ

Java面试问答FAQ

目录&#xff1a; 1、post为什么会发送两次请求&#xff1f;2、单核CPU支持多线程吗&#xff1f;3、ConcurrentHashMap 如何保证线程的安全性&#xff1f; 1、post为什么会发送两次请求&#xff1f; A&#xff1a;那是因为浏览器的安全策略&#xff08;同源策略&#xff09;决…
阅读更多...
【一篇搞定配置】网络分析工具WireShark的安装与入门使用

【一篇搞定配置】网络分析工具WireShark的安装与入门使用

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…
阅读更多...
11.28周四F34-Day9打卡

11.28周四F34-Day9打卡

文章目录 1. 你需要的是更多的练习。解析答案：【解析答案分析】【拓展内容】2. 跟我说说你昨天买什么了。解析答案：【解析答案分析】3. 他跟你说的是错的。解析答案：【解析答案分析】【对比分析】4. 原因是她没有通过考试。解析答案：【解析答案分析】5. 你说的和他告诉我们…
阅读更多...
JavaSE——类与对象（3）

JavaSE——类与对象（3）

一、方法重写 简单来讲&#xff0c;方法重写就是一个子类有一个方法&#xff0c;和父类的某个方法的名称&#xff0c;返回类型&#xff0c;参数一样&#xff0c;那么我们就说子类的这个方法覆盖了父类的那个方法。比如说&#xff1a; class Animal {public void makeSound() {…
阅读更多...
RK3568平台开发系列讲解（DMA篇）什么是DMA

RK3568平台开发系列讲解（DMA篇）什么是DMA

🚀返回专栏总目录 文章目录 一、什么是DMA二、DMA的产生：背景三、理解 DMA：协处理器沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇将带领大家深刻理解DMA。 一、什么是DMA DMA (Direct Memory Access) is used to copy data directly between devices and R…
阅读更多...
AD20使用操作第三部分

AD20使用操作第三部分

常见CHIP封装的创建 SOD-123 第一个&#xff0c;顶视图&#xff0c;第二个&#xff0c;侧视图&#xff0c;第三个&#xff0c;侧视图。 E表示&#xff1a;丝印的本体 D表示&#xff1a;宽度 b&#xff1a;焊盘的宽度 A&#xff1a;高度 L:管脚长度 PCB焊盘&#xff1a;焊接器…
阅读更多...
flink学习（6）——自定义source和kafka

flink学习（6）——自定义source和kafka

概述 SourceFunction:非并行数据源(并行度只能1) --接口 RichSourceFunction:多功能非并行数据源(并行度只能1) --类 ParallelSourceFunction:并行数据源(并行度能够>1) --接口 RichParallelSourceFunction:多功能并行数据源(并行度能够>1) --类 【建议使用的】 ——…
阅读更多...
ubuntu安装chrome无法打开问题

ubuntu安装chrome无法打开问题

如果在ubuntu安装chrome后&#xff0c;点击chrome打开没反应&#xff0c;可以先试着在terminal上用命令打开 google-chrome 如果运行命令显示 Chrome has locked the profile so that it doesnt get corrupted. If you are sure no other processes are using this profile…
阅读更多...
Ansible--自动化运维工具

Ansible--自动化运维工具

Ansible自动化运维工具介绍 1.Ansible介绍 Ansible是一款自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。…
阅读更多...
软件工程相关-用PD画类图-设置方法的参数

软件工程相关-用PD画类图-设置方法的参数

前提&#xff1a;pd16安装完成&#xff0c;已经画好了类 1、为类添加方法。 2、双击方法&#xff0c;如下图所示 3、此时会有弹窗&#xff0c;选择参数栏&#xff0c;按需求进行设置。 &#xff08;总是忘记&#xff0c;故记录下自用
阅读更多...
IT人日常健康工作生活方案

IT人日常健康工作生活方案

1. 早餐（7:00-8:00） 早餐是一天中最重要的一餐，提供充足的能量来启动新的一天。根据亚洲饮食的特点，我们加入了米饭、豆腐、蔬菜等传统食材，同时保持高蛋白、低糖的原则。 糙米粥或小米粥（1碗）：低GI碳水化合物，有助于稳定血糖，提供持久能量。可加入少量的红枣、枸杞…
阅读更多...
Qt配置Opencv环境

Qt配置Opencv环境

下载opencv后配置环境变量(官网下载&#xff09; 然后ok了
阅读更多...
MongoDB相关问题

MongoDB相关问题

视频教程 【GeekHour】20分钟掌握MongoDB Complete MongoDB Tutorial by Net Ninja MongoDB开机后调用缓慢的原因及解决方法 问题分析&#xff1a; MongoDB开机后调用缓慢&#xff0c;通常是由于以下原因导致&#xff1a; 索引重建&#xff1a; MongoDB在启动时会重建索引…
阅读更多...
目标检测之学习路线（本科版）

目标检测之学习路线（本科版）

以下是为一名计算机科学与技术本科大四学生整理的“目标检测”学习路线&#xff0c;结合了从基础到高级的内容&#xff0c;适合初学者逐步深入。每个阶段都有明确的学习要求、学习建议和资源推荐。 阶段一&#xff1a;基础知识学习 学习要求&#xff1a; 掌握编程语言 Pytho…
阅读更多...
最新文章

Copyright @ 2022~2023