首先需要准备好开发环境,这里在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,发现浏览器打开了,并且绘制了这样的画面
恭喜你,入门了three.js的开发.
这篇文章只是大概的说了一下如何用工具,具体有很多资料是没有在教程中提及的,需要的用到的技术也是需要时间去积累的,下面列出一些参考资料,可以了解一下这些工具,如何使用,以及为什么要用这些工具.
参考资料:
1.typescript 中文手册 地址:2.cnpm 地址:3.vscode 地址:4.nodejs 地址:5.webpack 地址:6.npm config 地址:7.threejs 地址:8.本项目git托管地址: