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 对象
在这里插入图片描述
这就表示我们环境准备好了。

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

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

相关文章

Java 反射(Reflection)

Java 反射&#xff08;Reflection&#xff09; Java 反射&#xff08;Reflection&#xff09;是一个强大的特性&#xff0c;它允许程序在运行时查询、访问和修改类、接口、字段和方法的信息。反射提供了一种动态地操作类的能力&#xff0c;这在很多框架和库中被广泛使用&#…

[保姆式教程]使用labelimg2软件标注定向目标检测数据和格式转换

定向目标检测是一种在图像或视频中识别和定位对象的同时&#xff0c;还估计它们方向的技术。这种技术特别适用于处理有一定旋转或方向变化的对象&#xff0c;例如汽车、飞机或文本。定向目标检测器的输出是一组旋转的边界框&#xff0c;这些框精确地包围了图像中的对象&#xf…

深度学习模型:卷积神经网络(CNN)

一、前言 CNN 的发展历程可以追溯到 20 世纪 80 年代和 90 年代。受生物视觉系统的启发&#xff0c;研究人员开始探索如何构建专门用于处理图像数据的神经网络。早期的一些研究奠定了基础&#xff0c;例如 Fukushima 提出的 Neocognitron 模型。 随着时间的推移&#xff0c;到…

Git上传本地项目到远程仓库(gitee/github)

目录 序言一、创建git本地版本库二、连接远程仓库&#xff08;以gitee为例&#xff09;三、将项目提交到git&#xff08;本地&#xff09;版本库1.由工作区添加到暂存区2.由暂存区添加到版本库 四、将代码由本地仓库上传到 gitee远程仓库1.获取远程库与本地同步2.把当前分支 ma…

Java 基础面试 题(Java Basic Interview Questions)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…

人工智能与传统控制系统的融合发展

在这个科技快速迭代的时代&#xff0c;人工智能技术正以前所未有的速度改变着我们的生活。在控制系统领域&#xff0c;AI技术的引入为传统控制带来了新的发展机遇和挑战。然而&#xff0c;这并不意味着传统控制将被完全取代&#xff0c;相反&#xff0c;AI与传统控制的深度融合…

Linux服务器安装mongodb

因为项目需要做评论功能&#xff0c;领导要求使用mongodb&#xff0c;所以趁机多学习一下。 在服务器我们使用docker安装mongodb 1、拉取mongodb镜像 docker pull mongo &#xff08;默认拉取最新的镜像&#xff09; 如果你想指定版本可以这样 docker pull mongo:4.4&#…

Qml-TabBar类使用

Qml-TabBar类使用 TabBar的概述 TabBar继承于Container 由TabButton进行填充&#xff0c;可以与提供currentIndex属性的任何容器或布局控件一起使用&#xff0c;如StackLayout 或 SwipeView&#xff1b;contentHeight : real:TabBar的内容高度&#xff0c;用于计算标签栏的隐…

Vue3的通灵之术Teleport

前言 近期Vue3更新了一些新的内容&#xff0c;我都还没有一个一个仔细去看&#xff0c;但是还是有必要去解读一下新内容的。就先从Teleport 开始吧。 官方对 Teleport 的解释是&#xff1a;<Teleport> 是一个内置组件&#xff0c;它可以将一个组件内部的一部分模板“传…

uniapp echarts tooltip formation 不识别html

需求&#xff1a; echarts 的tooltip 的域名太长&#xff0c;导致超出屏幕 想要让他换行 思路一&#xff1a; 用formation自定义样式实现换行 但是&#xff1a; uniapp 生成微信小程序&#xff0c; echart种的tooltip 的formation 识别不了html &#xff0c;自定义样式没办…

idea2024加载flowable6.8.1.36遇到的问题-idea启动flowable问题flowable源码启动问题

代码下载地址&#xff1a; https://gitee.com/hanpenghu_admin_admin/flowable6.8.1.git 1.首先是通过顶层目录maven clean install 发现很多子模块并不会install本地mavenStore库&#xff0c;这导致了&#xff0c;一堆相互依赖的模块报错找不到&#xff0c;所以需要根据报错…

DICOM医学影像应用篇——伪彩色映射 在DICOM医学影像中的应用详解

目录 引言 伪彩色映射的概念 基本原理 查找表&#xff08;Look-Up Table, LUT&#xff09; 步骤 示例映射方案 实现伪彩色映射的C代码 代码详解 伪彩色处理效果展示 总结 扩展知识 LUT 的基本概念 LUT 在伪彩色映射中的应用 示例 引言 在医学影像处理中&#xff0c…

【JavaEE 初阶】⽹络原理 - 初识

一、⽹络发展史 单机时代》局域网时代》广域网时代》移动互联网时代 1.独⽴模式 独⽴模式&#xff1a;计算机之间相互独⽴ 2.⽹络互连 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即以多个计算机协同⼯作来完成业务&am…

【工具】JS解析XML并且转为json对象

【工具】JS解析XML并且转为json对象 <?xml version1.0 encodingGB2312?> <root><head><transcode>hhhhhhh</transcode></head><body><param>ccccccc</param><param>aaaaaaa</param><param>qqqq<…

vue3+vite使用vite-plugin-electron-renderer插件和script-loader插件有冲突

报错信息&#xff1a;Error: Dynamic require of "path" is not supported 报错问题是在使用vite-plugin-electron-renderer插件不支持import动态引入&#xff0c;该报错信息并不准确&#xff0c;实际原因是vite-plugin-electron-renderer插件和script-loader插件有…

电子应用设计方案-28:智能云饭锅系统方案设计

智能云饭锅系统方案设计 一、系统概述 本智能云饭锅系统旨在为用户提供便捷、智能、个性化的烹饪体验&#xff0c;通过云技术实现远程控制、食谱分享、智能烹饪等功能。 二、系统组成 1. 饭锅主体 - 内胆&#xff1a;采用优质不粘涂层&#xff0c;具有良好的导热性和耐用性。 -…

OminiControl:一个新的FLUX通用控制模型,单个模型实现图像主题控制和深度控制

之前的文章中和大家介绍过Flux团队开源了一系列工具套件&#xff0c;感兴趣的小伙伴可以点击下面链接阅读~ AI图像编辑重大升级&#xff01;FLUX.1 Tools发布&#xff0c;为创作者提供了更强大的控制能力。 OminiControl 也开源了其可控生成模型。OminiControl 是一个最小但功…

小程序 - 本地生活

小程序页面和样式练习 - 本地生活小程序开发笔记 目录 本地生活 准备工作 加载图片素材 页面开发 页面样式开发 功能实现截图 总结 本地生活 本地生活”微信小程序是一个介绍本地美食、装修、工作等信息的微信小程序&#xff0c;该微信小程序的首页包含轮播图区域和九宫…

常见的Web安全漏洞——XSS

概念 跨站脚本攻击(XSS&#xff09;&#xff0c;指攻击者通过篡改网页&#xff0c;嵌入恶意脚本程序&#xff0c;在用户浏览网页时&#xff0c;控制用户浏览器进行恶意操作。 XXS的分类 反射型XSS存储型XSSDOM型XSS 原理 反射型XSS 接收用户提交的访问者的姓名&#xff0…

deepin 安装 chrome 浏览器

deepin 安装 chrome 浏览器 最近好多小伙伴儿和我说 deepin 无法安装最新的谷歌浏览器 其实是因为最新的 谷歌浏览器 其中的一个依赖需要提前安装 提前安装依赖然后再安装谷歌浏览器就可以了 安装 fonts-liberationsudo apt -y install fonts-liberation安装 chrome 浏览器sudo…