Three.js入门 第三章 用webpack+ts 开发three 项目

我们之前说webgl的时候,是以夯实基础为目的

而现在的three,我会逐步往实战靠拢。

现在,webpack 依旧是主流的模块打包工具,这在大部分公司的项目开发中是必不可少的。

ts和three 是绝配,three本身就是用ts写的,ts可以为three 项目提前做好规则约束,使项目的开发更加顺畅。

因此,我接下来会跟大说一下如何用webpack+ts 写three。

对于主流的前端框架vue、react,前期还不是特别需要,我会放到后面说。

我当前选择的webpack 是最新版本的webpack 5,具体指南可参考官网。

1.创建一个目录,初始化 npm

mkdir 01-startcd 01-startnpm init -y

2.调整 package.json 文件,以便确保我们安装包是 private(私有的),并且移除 main 入口。这可以防止意外发布你的代码。

{ “name”: “webpack-demo”, “version”: “1.0.0”, “description”: “”,- “main”: “index.js”,+ “private”: true, “scripts”: { “test”: “echo “Error: no test specified” && exit 1″ }, “keywords”: [], “author”: “”, “license”: “MIT”, “devDependencies”: { “webpack”: “^5.38.1”, “webpack-cli”: “^4.7.2”, } }

3.安装依赖文件

  • webpack 相关的依赖

npm install webpack webpack-cli webpack-dev-server –save-dev

  • ts 相关的依赖

npm install typescript ts-loader –save-dev

  • three 相关的依赖

npm install three @types/three –save

package.json 如下:

{ “name”: “three-lesson-02”, “version”: “1.0.0”, “description”: “”, “private”: true, “scripts”: { “test”: “echo “Error: no test specified” && exit 1″, “start”: “webpack serve –open”, }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “ts-loader”: “^9.2.8”, “typescript”: “^4.6.2”, “webpack”: “^5.70.0”, “webpack-cli”: “^4.9.2”, “webpack-dev-server”: “^4.7.4” }, “dependencies”: { “@types/three”: “^0.138.0”, “three”: “^0.138.3” }}

4.建立项目文件。

  • 目录结构

01-start|- dist |- 01-helloWorld.html|- src |- helloWorld.ts|- package.json|- package-lock.json|- tsconfig.json|- webpack.config.js

  • dist/01-helloWorld.html

helloWorld body { margin: 0; overflow: hidden; }

  • src/helloWorld.ts

const str:string=’Hello World’console.log(str)

  • webpack.config.js

const path = require(‘path’);module.exports = { mode: ‘development’, entry: { helloWorld: ‘./src/helloWorld.ts’, }, devtool: ‘inline-source-map’, devServer: { static: ‘./dist’, }, output: { filename: ‘[name].js’, path: path.resolve(__dirname, ‘dist’), }, resolve: { extensions: [“.ts”, “.tsx”, “.js”] }, module: { rules: [ { test: /.tsx?$/, loader: “ts-loader” } ] }};

  • tsconfig.json

{ “compilerOptions”: { “sourceMap”: true, “target”: “es6”, “module”: “es6” }}

5.运行项目,若在01-helloWorld.html中打印出“Hello World”,就说明配置没有问题。

npm run start

6.多页面

在dist 中再建立一个页面 02-box.html,用来显示我们入门时绘制的立方体

box body { margin: 0; overflow: hidden; }

在src 中建立一个box.js 文件,用于绘制立方体:

import { BoxGeometry,Mesh,MeshNormalMaterial,PerspectiveCamera,Scene,WebGLRenderer,} from ‘three’const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )const canvas = document.getElementById(‘canvas’);canvas.width = window.innerWidth;canvas.height = window.innerHeight;const renderer = new WebGLRenderer({canvas});const geometry = new BoxGeometry();const material = new MeshNormalMaterial();const cube = new Mesh( geometry, material )scene.add( cube );camera.position.z = 5;function animate() { requestAnimationFrame( animate ) cube.rotation.x += 0.01 cube.rotation.y += 0.01 renderer.render( scene, camera )};animate();

在webpack.config.js 中添加彩色立方体页面所对应的入口

module.exports = { …… entry: { helloWorld: ‘./src/helloWorld.ts’, box: ‘./src/box.ts’, }, ……};

启服务后,打开box.html 页面,便可以看见旋转的立方体。

郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
(0)
用户投稿
上一篇 2022年6月13日
下一篇 2022年6月13日

相关推荐

  • 7月25日晚间影响十大个股的利好消息

    1、中科海讯:与海洋试点国家实验室、蓝谷管理局、国实集团签订战略合作协议。中科海讯公告,与海洋试点国家实验室、蓝谷管理局、国实集团签订战略合作协议,在水下安全领域进行战略合作。 2…

    2022年8月2日
  • 李连杰一亿片酬电影,人狠话不多拳拳看着肉痛

    [灵光一闪]从未见过如此豪横的下楼方式,仅凭一根吊绳,不用替身就敢从百米高楼一跳而下,但也仅凭着一跳结合成功拿到高达1亿的片酬,可同时也被保险公司拉黑。 就在几分钟前,身为安全级的…

    2022年8月23日
  • 时尚而又张扬的化妆品玻璃瓶设计,热烈的红让人心动不已

    四方套装玻璃瓶 干净利落的线条 方方正正、落落大方 黑红渐变的玻璃瓶身 似火山熔岩般令人惊心动魄 又宛若赤焰熊熊燃烧 电镀银盖子和肩套泛着冷光 令人凛然敬畏 方形套装玻璃瓶 热烈的…

    2022年7月1日
  • 兰博基尼Squadra Corse赛事运动部门获得ISO 20121认证

    在Super Trofeo欧洲挑战赛第三轮比赛之际,兰博基尼Squadra Corse赛事运动部门获得意大利TÜV颁发的“大型活动可持续性管理体系(ISO 20121)”认证,证明…

    2022年7月18日
  • 微信转账怎么退回来(微信转账追回操作方法)

    过年期间是微信转账、发红包的高峰期,微信抢红包、发红包基本成为每个人的日常,但不免有人因为手误或者备注错误而转错人。另外,春节期间网络诈骗更是频繁,因被骗而转账的朋友更是后悔莫及,…

    2022年5月6日
  • 纯手绘图解 – MySQL undo log、redo log、binlog

    先看看一条SQL如何入库的 数据写入详细过程应用服务器与MySQL建立连接通过连接发送一条SQL语句(update student set score=100 where scor…

    2022年6月19日
  • 直面三星Z Flip4,联想准备了一个大招

    即将到来的8月份由于三星两款折叠屏的加入显得更加热闹起来,根据官方信息三星Galaxy Z Fold4以及Galaxy Z Flip4将在8月10日正式发布。看似前者目前没有能怼上…

    2022年7月23日
  • 狠人!浮亏逾10亿美元后,比特币巨鲸塞勒又买480枚

    比特币超级多头迈克尔-塞勒旗下科技公司MicroStrategy周三披露,在最近加密货币市场崩盘的高峰期,又斥资约1000万美元,买入了480枚比特币。 根据MicroStrate…

    2022年7月5日
  • 16亿元项目落地洋浦 拟打造海南单体面积最大国际物流中心

    新海南客户端、南海网、南国都市报6月14日消息 (记者 林文泉 赵航)近日,记者在洋浦保税港区了解到,天运国际(海南)多功能数智物流中心项目已完成前期准备工作,目前项目施工单位已入…

    2022年6月15日
  • 刑侦专家教你防范手机泄密

    手机就是绑在每个人身上的一个手雷,一旦爆炸,身败名裂。但是手机泄露个人信息的风险确实无处不在,从不小心被人偷拍偷看,到被猜出密码,或以伪造的生物学特征(如硅胶指纹套)进行解锁,如果…

    2022年6月24日

联系我们

联系邮箱:admin#wlmqw.com
工作时间:周一至周五,10:30-18:30,节假日休息