位置: IT常识 - 正文

threeJs入门 js引入(threejs怎么用)

编辑:rootadmin
threeJs入门 js引入 一:使用three的前置1.引入three.js// 引入three.jsimport * as THREE from 'three';2.引入three.js其他扩展库

推荐整理分享threeJs入门 js引入(threejs怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:threejs怎么用,three.js dispose,threejs引入3d模型,threejs引入3d模型,js three.js,threejs引入3d模型,threejs引入3d模型,threejs入门指南,内容如对您有帮助,希望把文章链接给更多的朋友!

除了three.js核心库以外,在threejs文件包中examples/jsm目录下,你还可以看到各种不同功能的扩展库。

一般来说,你项目用到那个扩展库,就引入那个,用不到就不需要引入。

// 引入扩展库OrbitControls.jsimport { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 引入扩展库GLTFLoader.jsimport { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';// 扩展库引入——旧版本,比如122, 新版本路径addons替换了examples/jsmimport { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';3.学习环境:.html文件中直接引入threejs

如果不是正式开发Web3D项目,只是学习threejs功能,完全没必要用webpack或vite搭建一个开发环境。

threeJs入门 js引入(threejs怎么用)

学习使用的环境,只要创建一个.html文件,编写threejs代码,最后通过本地静态服务打开.html文件就行。

4.script标签方式引入three.js

你可以像平时开发web前端项目一样,通过script标签把three.js当做一个js库引入你的项目。

three.js库可以在threejs官方文件包下面的build目录获取到。

<script src="./build/three.js"></script>//随便输入一个API,测试下是否已经正常引入three.jsconsole.log(THREE.Scene); 5.ES6 import方式引入

给script标签设置type=“module”,也可以在.html文件中使用import方式引入three.js。

<script type="module">// 现在浏览器支持ES6语法,自然包括import方式引入js文件import * as THREE from './build/three.module.js';</script>6.type="importmap"配置路径

学习环境中,.html文件引入three.js,最好的方式就是参考threejs官方案例,通过配置

下面配置的type="importmap"代码具体写法不用掌握记忆,复制粘贴后,能修改目录就行,你可以去电子书课件或者课件源码中复制。

<!-- 具体路径配置,根据自己文件目录设置 --><script type="importmap"> {"imports": {"three": "../../../three.js/build/three.module.js"}}</script><!-- 配置type="importmap",.html文件也能和项目开发环境一样方式引入threejs --><script type="module"> import * as THREE from 'three'; // 浏览器控制台测试,是否引入成功 console.log(THREE.Scene);</script>7.type="importmap"配置——扩展库引入

通过配置

配置addons/等价于examples/jsm/。

<script type="importmap"> {"imports": {"three": "./three.js/build/three.module.js", "three/addons/": "./three.js/examples/jsm/"}}</script><script type="module"> // three/addons/路径之后对应的是three.js官方文件包`/examples/jsm/`中的js库 // 扩展库OrbitControls.js import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // 扩展库GLTFLoader.js import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; console.log(OrbitControls); console.log(GLTFLoader);</script>二:完整代码展示html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Threejs中文网:www.webgl3d.cn</title></head><body> <!-- type="importmap"功能:.html文件中也能和nodejs开发环境中一样方式,引入npm安装的js库 --> <script type="importmap"> {"imports": {"three": "../../../three.js/build/three.module.js"}}</script> <script src="./index.js" type="module"> </script></body></html>js// 引入three.jsimport * as THREE from 'three';/** * 创建3D场景对象Scene */const scene = new THREE.Scene();/** * 创建网格模型 *///创建一个长方体几何对象Geometryconst geometry = new THREE.BoxGeometry(50, 50, 50);//材质对象Materialconst material = new THREE.MeshBasicMaterial({ color: 0x0000ff, //设置材质颜色});const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh//设置网格模型在三维空间中的位置坐标,默认是坐标原点mesh.position.set(0,10,0);scene.add(mesh); //网格模型添加到场景中 // console.log('三维场景',scene);
本文链接地址:https://www.jiuchutong.com/zhishi/298594.html 转载请保留说明!

上一篇:目标检测算法——YOLOV7——详解(一阶段目标检测算法)

下一篇:用HTML实现简易版计算器(简易html代码)

  • 企业微信营销需要考虑的五个问题(企业微信号营销)

    企业微信营销需要考虑的五个问题(企业微信号营销)

  • 笔记本开机黑屏没反应(笔记本开机黑屏)(笔记本开机黑屏时间长)

    笔记本开机黑屏没反应(笔记本开机黑屏)(笔记本开机黑屏时间长)

  • iphone8屏幕是lcd还是oled(iphone8屏幕是什么牌子)

    iphone8屏幕是lcd还是oled(iphone8屏幕是什么牌子)

  • 红米k30pro的屏幕指纹在哪里(红米k30pro的屏幕是三星的吗)

    红米k30pro的屏幕指纹在哪里(红米k30pro的屏幕是三星的吗)

  • 插上耳机有图标没声音(插上耳机有图标怎么回事)

    插上耳机有图标没声音(插上耳机有图标怎么回事)

  • 华为荣耀30s怎样设置返回键功能(华为荣耀30S怎样设置省电)

    华为荣耀30s怎样设置返回键功能(华为荣耀30S怎样设置省电)

  • 苹果手机可以插u盘吗(苹果手机可以插电信卡吗)

    苹果手机可以插u盘吗(苹果手机可以插电信卡吗)

  • 华为的微信分身在哪里设置(华为的微信分身为什么会显示登录异常)

    华为的微信分身在哪里设置(华为的微信分身为什么会显示登录异常)

  • 苹果xsmax屏下指纹(苹果xs max主屏幕按钮)

    苹果xsmax屏下指纹(苹果xs max主屏幕按钮)

  • 正在通话中请稍后再拨是什么意思(拨打电话正在通话中请稍后再)

    正在通话中请稍后再拨是什么意思(拨打电话正在通话中请稍后再)

  • 把一个人拉黑删除还能加回来吗(把一个人拉黑删除对方还能加回来吗)

    把一个人拉黑删除还能加回来吗(把一个人拉黑删除对方还能加回来吗)

  • apple id无法切回中国(apple id无法切换)

    apple id无法切回中国(apple id无法切换)

  • 苹果8P屏幕C3F是DTP吗(iphone8p屏幕c3f)

    苹果8P屏幕C3F是DTP吗(iphone8p屏幕c3f)

  • 掌上生活大学生认证有风险吗(掌上生活大学生额度)

    掌上生活大学生认证有风险吗(掌上生活大学生额度)

  • 微机系统三种总线(微机系统三种总线结构)

    微机系统三种总线(微机系统三种总线结构)

  • 拼多多店名可在哪里改(拼多多店名可在哪里查看)

    拼多多店名可在哪里改(拼多多店名可在哪里查看)

  • 手机键盘缩小怎么放大(手机键盘缩小怎么变大)

    手机键盘缩小怎么放大(手机键盘缩小怎么变大)

  • realme支持volte吗(realme的volte设置在哪里)

    realme支持volte吗(realme的volte设置在哪里)

  • 美版iphone11支持双卡吗(美版苹果11支持5g吗)

    美版iphone11支持双卡吗(美版苹果11支持5g吗)

  • 钉钉打卡的照片别人看得见吗(钉钉打卡的照片存在哪里)

    钉钉打卡的照片别人看得见吗(钉钉打卡的照片存在哪里)

  • 微信新消息提示音怎么更改(微信新消息提示音怎么添加新的)

    微信新消息提示音怎么更改(微信新消息提示音怎么添加新的)

  • excel打字怎么在同一格换行(在excel中打字)

    excel打字怎么在同一格换行(在excel中打字)

  • Python语言优点(python语言有什么优点)

    Python语言优点(python语言有什么优点)

  • 怎么解决百度打不开的问题?(怎么解决百度打不开页面)

    怎么解决百度打不开的问题?(怎么解决百度打不开页面)

  • 什么是应交增值税
  • 增值税发票综合服务平台错误代码35
  • 进项税额和销项税额是什么
  • 发票已经报送怎么处理
  • 现在开票还能用三方协议吗
  • 一般纳税人报税流程详细操作
  • 本年利润借方余额意味什么
  • 实收资本印花税税率多少
  • 公司买的电器可以抵扣吗
  • 税控盘抵扣增值税有时间限制吗
  • 房地产开发企业预收款预缴增值税
  • 公司代垫个税会计分录
  • 上月暂估收入本月开票增值税实操
  • 存货算动产吗
  • 少缴纳个人所得税的需要付什么责任
  • 企业报税没报怎么办
  • 关于进项税额转出的规定
  • 合伙人退伙怎么处理
  • 今年交上年税审核要多久
  • 企业重组的所得税怎么算
  • 进口商品合同
  • 金税盘报税的服务费怎么抵扣增值税?
  • 土地契税税率怎么计算
  • 发票有问题找谁
  • 工程施工余额怎么处理
  • 客户年会赞助是公司账户转嘛
  • 帮别的公司代销产品,对方公司不开具发票怎么做帐
  • 已认证抵扣的进项税额转出做账的会计处理
  • 新版edge浏览器兼容性视图怎么设置
  • 路由器怎么重置网络
  • 暂估入库发票回来怎么做账
  • 股权出售是利空还是利好
  • php命令行执行文件
  • php教程100
  • 同一控制下的企业合并,合并方在企业合并中取得的资产
  • php必背知识点
  • 在缴纳企业所得税的情形
  • php删除语句
  • 控制层框架
  • 企业所得税扣除限额标准
  • 向银行借入长期借款200000元,存入银行
  • ai作画app
  • 劳务报酬已扣税是否需报个税
  • 圣米歇尔山法语介
  • framework教程
  • 会员信息查询系统
  • 接口二次封装
  • SQLite教程(四):内置函数
  • dedecms模版
  • 什么情况需要预缴
  • 公司如何交五险一金
  • 个体户核定征收超过了怎么办
  • 购入商品再卖出
  • 债券到期的账面价值计算
  • 减免所得税额怎么做分录
  • 开票航天信息要交年费吗
  • 公司充话费
  • 预付账款和应付账款减少
  • 企业转让专利需要交什么税
  • 应交税费要计提吗?
  • 存货账面价值的确定
  • 红字发票信息表在哪里查询
  • 小企业会计准则会计科目表
  • 数据库访问机制
  • mysql 错误1067
  • ubuntu zen3
  • linux系统中
  • 进程dwm
  • 如何使用朋友的山姆卡
  • windows 水印
  • sqlite3 not found 解决方案
  • 开手游游戏
  • python对excel操作真的有提高吗
  • Python制作钟表代码
  • android实现侧边栏
  • 房产营业税满2年怎么算
  • 莆田税务学校地址
  • 涉嫌虚开增值税专用发票罪
  • 工资薪金的税收金额是填实际发生还是帐载金额
  • 区地税局会不会分到乡镇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设