博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack+typescript+threejs+vscode开发
阅读量:5734 次
发布时间:2019-06-18

本文共 3356 字,大约阅读时间需要 11 分钟。

首先需要准备好开发环境,这里在windowns上面,需要安装nodejs和vscode(vscode是我自己在用的编辑器.).

1.安装nodejs.

下载地址: (下载8.9.1)
安装的时候注意一下安装选项,把系统的路径加一下,英文对应大概是"add path...."巴拉巴拉的.

安装完成后,打开命令行工具(cmd.exe)后输入,node -v 后,你会看到nodejs的版本号,证明你安装成功了.

因为镇内的环境,npm可能并不是特别好用,如果你没有翻出去,那么建议你打开cmd.exe之后,安装一下cnpm.

npm是你在nodejs安装后就有的,上面下载版本为8.9.1,因为nodejs9的npm现在提示不大支持.
安装cnpm的方法:
命令行敲下面这个:
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装vscode.

(vscode下载)
这里我使用vscode作为我的开发环境.

3.新建文件夹,为开发项目创建个文件夹吧.这里取名 <threejs_study>

然后使用cmd.exe打开该地址,windows可以在文件夹地址上敲cmd就可以打开.(或者用vscode打开后,按Ctrl+` 打开终端.)

4.输入npm init 初始化项目.一直按回车就行了,因为该过程会在文件夹生成一个package.json文件.

5.安装依赖的包.这里我一次性安装完成.

cnpm i three webpack webpack-dev-server html-webpack-plugin typescript awesome-typescript-loader @types/three @types/node

6.到这里了,用vscode打开该文件夹项目吧.

7.初始化webpack.

首先在根目录创建文件,webpack.config.ts 写入如下代码

var path = require('path');var HtmlWebPackPlugin = require("html-webpack-plugin");module.exports = {    //项目入口    entry: "./src/index.ts",    //输出设置    output: {        filename: "bundle.js",        path: path.resolve(__dirname, 'dist')    },    //调试工具    devtool: "source-map",    //模块加载器设置    module: {        loaders: [            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },        ]    },    //调试服务    devServer: {        contentBase: path.join(__dirname, "dist"),        compress: true,        port: 7777    },    //插件    plugins: [        new HtmlWebPackPlugin(            {                title: "threejs学习"            }),    ]}

创建tsconfig.json

{    "compilerOptions": {        "outDir": "./built",        "allowJs": true,        "target": "es6",        "lib": [            "es2017",            "dom"        ],        "types": [            "node"        ],        "module": "commonjs",        "experimentalDecorators": true    },    "include": [        "./src/**/*"    ]}

8.恭喜你完成了项目配置,现在我们可以编写代码了.

创建文件夹src,并且创建index.ts

因为我们没有书写html代码,那么我们用纯的js操作dom去创建canvas.

代码如下:

import * as THREE from "three";//创建场景.let scene = new THREE.Scene();//相机let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//渲染器let renderer = new THREE.WebGLRenderer();//设置画布大小renderer.setSize(window.innerWidth, window.innerHeight);//加入到bodydocument.body.appendChild(renderer.domElement);//第二步,创建几何体.let geometry = new THREE.BoxGeometry(1, 1, 1);let material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });let cube = new THREE.Mesh(geometry, material);//加入到场景scene.add(cube);//设置相机位置camera.position.z = 5;//渲染循环function animate(){    requestAnimationFrame(animate);    renderer.render(scene, camera);}animate();

然后你修改package.json文件,在scripts中加入

"scripts": {    "dev": "webpack-dev-server"  },

然后你就可以在命令行中运行,npm run dev了.

你可以在拓展中安装debugger for chrome插件.这样你就可以按F5进行代码调试了.

记得选择Chrome调试,并且记得修改launch.json文件中的端口,改成7777(上述webpack.config.js中设置的端口)

大概如这样

{    "version": "0.2.0",    "configurations": [        {            "type": "chrome",            "request": "launch",            "name": "Launch Chrome against localhost",            "url": "http://localhost:7777",            "webRoot": "${workspaceRoot}"        }    ]}

此刻,你按F5,发现浏览器打开了,并且绘制了这样的画面

clipboard.png

恭喜你,入门了three.js的开发.

这篇文章只是大概的说了一下如何用工具,具体有很多资料是没有在教程中提及的,需要的用到的技术也是需要时间去积累的,下面列出一些参考资料,可以了解一下这些工具,如何使用,以及为什么要用这些工具.

参考资料:

1.typescript 中文手册 地址:
2.cnpm 地址:
3.vscode 地址:
4.nodejs 地址:
5.webpack 地址:
6.npm config 地址:
7.threejs 地址:
8.本项目git托管地址:

转载地址:http://zggwx.baihongyu.com/

你可能感兴趣的文章
ISO8583接口的详细资料
查看>>
tmux不自动加载配置文件.tmux.conf
查看>>
经验分享:JavaScript小技巧
查看>>
[MOSEK] Stupid things when using mosek
查看>>
程序实例---栈的顺序实现和链式实现
查看>>
服务的使用
查看>>
Oracle 用户与模式
查看>>
MairDB 初始数据库与表 (二)
查看>>
拥在怀里
查看>>
chm文件打开,有目录无内容
查看>>
whereis、find、which、locate的区别
查看>>
一点不懂到小白的linux系统运维经历分享
查看>>
桌面支持--打不开网页上的pdf附件解决办法(ie-tools-compatibility)
查看>>
nagios监控windows 改了NSclient++默认端口 注意事项
查看>>
干货 | JAVA代码引起的NATIVE野指针问题(上)
查看>>
POI getDataFormat() 格式对照
查看>>
Python 中的进程、线程、协程、同步、异步、回调
查看>>
好的产品原型具有哪些特点?
查看>>
实现java导出文件弹出下载框让用户选择路径
查看>>
刨根问底--技术--jsoup登陆网站
查看>>