1、Three.js开端准备环境

准备工作

从 CDN 导入

1.安装 VSCode
2.安装 Node.js
3.查看Three.js最新版本
在这里插入图片描述
4.如何cdn引入
https://cdn.jsdelivr.net/npm/three@v版本号/build/three.module.js
例如:https://cdn.jsdelivr.net/npm/three@v0.170.0/build/three.module.js
在这里插入图片描述

我们需要用到three.js和它对应的工具包
https://cdn.jsdelivr.net/npm/three@v0.170.0/examples/jsm/
在这里插入图片描述
5.创建html文件

<!DOCTYPE html>
<html>

<head>
    <title>three.js css3d - sprites</title>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #000;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 类似于创建 并设置别名 -->
    <script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
              }
            }
          </script>
    <!-- 导入包名 -->
    <script type="module">

        import * as THREE from 'three';

        console.log(THREE, 'THREE')

    </script>
</body>

</html>

6.在VSCode中安装serve服务器~ Live Server
在这里插入图片描述
安装完成后 在文件名右键或者文件中右键
在这里插入图片描述
在这里插入图片描述
页面:
肯定是没内容的 因为我们只是引入 打印了一下 THREE 对象
在这里插入图片描述
这就表示我们环境准备好了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/924959.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【HTTP】http与https

http与https的关系 应用层协议&#xff1a; http&#xff08;HyperText Transfer Protocol&#xff09;超文本传输协议&#xff1b; https&#xff08;Hypertext Transfer Protocol Secure&#xff09;超文本传输安全协议&#xff1b; 传输层协议&#xff1a;TCP&#xff08;Tr…

百度 文心一言 vs 阿里 通义千问 哪个好?

背景介绍&#xff1a; 在当前的人工智能领域&#xff0c;随着大模型技术的快速发展&#xff0c;市场上涌现出了众多的大规模语言模型。然而&#xff0c;由于缺乏统一且权威的评估标准&#xff0c;很多关于这些模型能力的文章往往基于主观测试或自行设定的排行榜来评价模型性能…

MySQL聚合查询分组查询联合查询

#对应代码练习 -- 创建考试成绩表 DROP TABLE IF EXISTS exam; CREATE TABLE exam ( id bigint, name VARCHAR(20), chinese DECIMAL(3,1), math DECIMAL(3,1), english DECIMAL(3,1) ); -- 插入测试数据 INSERT INTO exam (id,name, chinese, math, engli…

python学习笔记1

首先&#xff0c;想要学习一个东西&#xff0c;要弄清楚他是做什么的。需要用什么东西去完成他。 python是一种解释型编辑语言&#xff0c;类似于百度搜索引擎&#xff0c;主要目的是搜集资料和整理资料。 了解到这个目的之后&#xff0c;pytohon的学习和使用就简单很多。 第一…

15 go语言(golang) - 并发编程goroutine原理及数据安全

底层原理 Go 的 goroutine 是一种轻量级的线程实现&#xff0c;允许我们在程序中并发地执行函数。与传统的操作系统线程相比&#xff0c;goroutine 更加高效和易于使用。 轻量级调度 用户态调度&#xff1a;Go 运行时提供了自己的调度器&#xff0c;这意味着 goroutine 的创建…

dmdba用户资源限制ulimit -a 部分配置未生效

dmdba用户资源限制ulimit -a 部分配置未生效 1 环境介绍2 数据库实例日志报错2.1 mpp01 实例日志报错2.2 mpp02 实例日志报错 3 mpp02 服务器资源限制情况4 关闭SELinux 问题解决4.1 临时关闭 SELinux4.2 永久关闭 SELinux 5 达梦数据库学习使用列表 1 环境介绍 Cpu x86 Os Ce…

【计算机网络】核心部分复习

目录 交换机 v.s. 路由器OSI七层更实用的TCP/IP四层TCPUDP 交换机 v.s. 路由器 交换机-MAC地址 链接设备和设备 路由器- IP地址 链接局域网和局域网 OSI七层 物理层&#xff1a;传输设备。原始电信号比特流。数据链路层&#xff1a;代表是交换机。物理地址寻址&#xff0c;交…

【新人系列】Python 入门(十四):文件操作

✍ 个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12801353.html &#x1f4e3; 专栏定位&#xff1a;为 0 基础刚入门 Python 的小伙伴提供详细的讲解&#xff0c;也欢迎大佬们…

JVM指令集概览:基础与应用

写在文章开头 在现代软件开发中,Java 语言凭借其“一次编写,到处运行”的理念成为了企业级应用的首选之一。这一理念的背后支撑技术正是 Java 虚拟机(JVM)。JVM 是一个抽象的计算机,它实现了 Java 编程语言的各种特性,并且能够执行编译后的字节码文件。了解 JVM 的工作原…

HarmonyOS4+NEXT星河版入门与项目实战(22)------动画(属性动画与显示动画)

文章目录 1、属性动画图解2、案例实现-小鱼移动游戏1、代码实现2、代码解释3、资源图片4、实现效果3、显示动画4、案例修改-显示动画5、总结1、属性动画图解 这里我们用一张完整的图来汇整属性动画的用法格式和使用的主要属性范围,如下所示: 2、案例实现-小鱼移动游戏 1、代…

diffusion model: prompt-to-prompt 深度剖析

参考&#xff1a;diffusion model(十四)&#xff1a; prompt-to-prompt 深度剖析-CSDN博客 P2P提出的Motivation 目前大火的文生图技术(text to image)&#xff0c;给定一段文本&#xff08;prompt&#xff09;和随机种子&#xff0c;文生图模型会基于这两者生成一张图片。生…

【vue for beginner】Vue该怎么学?

&#x1f308;Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 vue2 和 vue3 Vue2现在正向vue3逐渐更新中&#xff0c;官方vue2已经不再更新。 这个历程和当时的pyt…

Python语法基础(三)

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 我们这篇文章来说一下函数的返回值和匿名函数 函数的返回值 我们先来看下面的这一段函数的定义代码 # 1、返回值的意义 def func1():print(111111111------start)num166print…

光伏功率预测!Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型时序预测

目录 预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Transformer-LSTM、Transformer、CNN-LSTM、LSTM、CNN五模型多变量时序光伏功率预测 (Matlab2023b 多输入单输出) 1.程序已经调试好&#xff0c;替换数据集后&#xff0c;仅运行一个main即可运行&#xff0c;数据格式…

Jpype调用jar包

需求描述 ​   公司要求使用python对接口做自动化测试&#xff0c;接口的实现是Java&#xff0c;部分接口需要做加解密&#xff0c;因此需要使用python来调用jar包来将明文加密成密文&#xff0c;然后通过http请求访问接口进行测试。 如何实现 1.安装Jpype ​   首先我…

HTML飞舞的爱心

目录 系列文章 写在前面 完整代码 代码分析 写在后面 系列文章 序号目录1HTML满屏跳动的爱心&#xff08;可写字&#xff09;2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心&#xff08;简易版&#xff09;7HTML粒子爱心8HTML蓝色…

前端面试题-1(详解事件循环)

1.了解浏览器的进程模型 1.什么是进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 2.什么是线程&#xff1f…

记录QT5迁移到QT6.8上的一些问题

经常看到有的同学说网上的教程都是假的&#xff0c;巴拉巴拉&#xff0c;看看人家发布时间&#xff0c;Qt官方的API都会有所变动&#xff0c;多搜索&#xff0c;多总结&#xff0c;再修改记录。 下次遇到问题多这样搜索 QT 4/5/6 xxx document&#xff0c;对比一下就知道…

python常见问题-pycharm无法导入三方库

1.运行环境 python版本&#xff1a;Python 3.9.6 需导入的greenlet版本&#xff1a;greenlet 3.1.1 2.当前的问题 由于需要使用到greenlet三方库&#xff0c;所以进行了导入&#xff0c;以下是我个人导入时的全过程 ①首先尝试了第1种导入方式&#xff1a;使用pycharm进行…

【计算机网络】—— 物理层

文章目录 前言 一、基本概念 1. 传输媒体 2. 物理层协议的主要任务 3. 物理层的任务 二、传输媒体 1. 导引型 同轴电缆 双绞线 光纤 电力线 2. 非导引型 三、传输方式 1. 串行、并行 2. 同步、异步 3. 单工、半双工、全双工 四、编码和调制 1. 基本概念 2. …