记录下在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，一经查实，立即删除！

相关文章

鸿蒙面试 --- 性能优化

鸿蒙面试 --- 性能优化

性能优化可以从三个方面入手 感知流畅、渲染性能、运行性能 感知流畅 在应用开发中&#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…
阅读更多...
【一篇搞定配置】网络分析工具WireShark的安装与入门使用

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

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…
阅读更多...
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;焊接器…
阅读更多...
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;故记录下自用
阅读更多...
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;使其同时面临多种网络威胁。其声誉和法律后果的大幅下降可能归因于一次妥协。 这使得良好的网络安全成为所有企业的选择和必需品。本文介绍了网络安全的重要性、企业中常见的网络威胁以及公司…
阅读更多...
“harmony”整合不同平台的单细胞数据之旅

“harmony”整合不同平台的单细胞数据之旅

其实在Seurat v3官方网站的Vignettes中就曾见过该算法&#xff0c;但并没有太多关注&#xff0c;直到看了北大张泽民团队在2019年10月31日发表于Cell的《Landscap and Dynamics of Single Immune Cells in Hepatocellular Carcinoma》&#xff0c;为了同时整合两类数据&#xf…
阅读更多...
怎样使用sys.dm_os_wait_stats

怎样使用sys.dm_os_wait_stats

文章目录 sys.dm_os_wait_stats 支持诊断 SQL Server 性能问题的基本指标。如果在 SQL Server 引擎中遇到一些问题&#xff08;CPU、内存、I/O、锁、闩锁等&#xff09;&#xff0c;sys.dm_os_wait_stats 数据揭示一些问题。SQL Server Management Studio 中的活动监视器&#…
阅读更多...
Hbase2.2.7集群部署

Hbase2.2.7集群部署

环境说明 准备三台服务器&#xff0c;分别为&#xff1a;bigdata141&#xff08;作为Hbase主节点&#xff09;、bigdata142、bigdata143确保hadoop和zookeeper集群都先启动好我这边的hadoop版本为3.2.0&#xff0c;zookeeper版本为3.5.8 下载安装包 下载链接&#xff1a;In…
阅读更多...
自研芯片逾十年，亚马逊云科技Graviton系列芯片全面成熟

自研芯片逾十年，亚马逊云科技Graviton系列芯片全面成熟

在云厂商自研芯片的浪潮中&#xff0c;亚马逊云科技无疑是最早践行这一趋势的先驱。自其迈出自研芯片的第一步起&#xff0c;便如同一颗石子投入平静的湖面&#xff0c;激起了层层涟漪&#xff0c;引领着云服务和云上算力向着更高性能、更低成本的方向演进。 早在2012年&#x…
阅读更多...
掌上单片机实验室 — RT - Thread+ROS2 浅尝（26）

掌上单片机实验室 — RT - Thread+ROS2 浅尝（26）

前面化解了Micro_ROS通讯问题&#xff0c;并在 RT-Thread Studio 环境下&#xff0c;使用Micro_ROS软件包中的例程&#xff0c;实现了STM32F411CE核心板和ROS2主机的通讯。之后还尝试修改例程 micro_ros_sub_twist.c &#xff0c;实现了接收 turtle_teleop_key 所发出的 turtle…
阅读更多...
【Leetcode 每日一题】25. K 个一组翻转链表

【Leetcode 每日一题】25. K 个一组翻转链表

25. K 个一组翻转链表 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单…
阅读更多...
Android 图形系统之一：概览

Android 图形系统之一：概览

Android 图形系统是一套完整的架构&#xff0c;用于管理从应用绘制到显示屏幕的整个流程。它涉及多个层次和组件&#xff0c;从应用程序到硬件&#xff0c;确保每一帧都能准确、高效地呈现到用户的设备屏幕上。 1. Android 图形系统的架构 Android 图形系统的架构可以分为以下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023