three.js(二):webpack + three.js + ts

这篇具有很好参考价值的文章主要介绍了three.js(二):webpack + three.js + ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

用webpack+ts 开发 three.js 项目

  • webpack 依旧是主流的模块打包工具;
  • ts和three.js 是绝配,three.js本身就是用ts写的,ts可以为three 项目提前做好规则约束,使项目的开发更加顺畅。

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

mkdir demo
cd demo
npm 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.建立项目文件

  • 目录结构
demo
|- dist
	|- 01-helloWorld.html
|- src
	|- helloWorld.ts
|- package.json
|- package-lock.json
|- tsconfig.json
|- webpack.config.js
  • dist/01-helloWorld.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>helloWorld</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="helloWorld.js"></script>
  </body>
</html>
  • 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.运行项目

npm run start

6.多页面

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>box</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script src="box.js"></script>
</body>
</html>

在src 中建立一个box.js 文件,用于绘制立方体:文章来源地址https://www.toymoban.com/news/detail-679841.html

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 = <HTMLCanvasElement>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 页面,便可以看见旋转的立方体
    three.js(二):webpack + three.js + ts,three.js,javascript,three.js

到了这里,关于three.js(二):webpack + three.js + ts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 自己构建webpack+vue3+ts

    先看看我的目录结构(我全局使用TS): 安装esno esno 是基于 esbuild 的 TS/ESNext node 运行时,有了它,就可以直接通过esno *.ts的方式启动脚本,package.json中添加 type:“module”,使用esm的模块管理方式。 创建build.ts,执行 npm run build 安装webpack、webpack-cli webpack必须安装webpackcli build

    2024年01月23日
    浏览(34)
  • webpack配置alias后eslint和ts无法识别

    我们在 webpack 配置 alias 后,发现项目中引入的时候,还是会报错,如下: 可以看到,有一个是 ts报错,还有一个是 eslint 报错。 tsconfig.json 方式一:关闭规则 .eslintrc.js 【推荐】方式二:使用 eslint-import-resolver-alias .eslintrc.js 使用方式二鼠标点击后还可以跳转到对应的文件中

    2024年02月07日
    浏览(28)
  • THREE.JS使用详细(three.js创建3d物体,three.js的使用方式)

    简述:three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star,今天用three.js来构建一个三维模型; 1、首先,在项目中需要下载threejs的相关依赖; 2、在js页面引入使

    2024年01月23日
    浏览(80)
  • three.js(四):react + three.js

    绘制多个立方体 1.搭建react+ts 项目 react+ts 的用法可参考此链接: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup 2.安装three依赖 3.安装路由 react-router-v6 的用法可参考此链接:https://juejin.cn/post/7088526716049555492 4.用路由组件包裹APP。 index.tsx 5.构建项目页面 src/view/Basics.tsx src/

    2024年02月11日
    浏览(53)
  • 【Three.js】Three.js快速上手教程

    官网对 Three.js 的介绍非常简单:“Javascript 3D library”。 即: three.js 是 JavaScript 编写的 WebGL 第三方库。提供了非常多的3D显示功能,是一个常见的 web 3D 库。 相关概念解释:three.js webGL openGL openGL 是一个跨平台3D/2D的绘图标准, webGL 则是 openGL 在浏览器上的一个实现。 web前端

    2024年01月16日
    浏览(54)
  • three.js(三):three.js的渲染结构

    概述 three.js 封装了场景、灯光、阴影、材质、纹理和三维算法,不必在直接用WebGL 开发项目,但有的时候会间接用到WebGL,比如自定义着色器。 three.js 在渲染三维场景时,需要创建很多对象,并将它们关联在一起。 下图便是一个基本的three.js 渲染结构 Renderer 渲染器 Renderer

    2024年02月11日
    浏览(42)
  • Three.js--》探索Three.js:学习和就业的完整指南

    目录 three.js的学习建议 WebGL前端工程师工作待遇相关问题 本篇文章主要给大家介绍一下如何学习Web3D可视化,具体说就是怎么学习WebGL、Three.js、3D建模等。 three.js的学习建议 在过去互联网是人联网的时代,开发人和人之间的联系的Web应用,对于3D可视化需求不强烈。在物联网

    2024年02月06日
    浏览(36)
  • 【Three.js】Three.js中的纹理—图像应用和属性调整

      Three.js是一种强大的JavaScript库,用于创建基于Web的交互式3D图形和动画。在Three.js中,纹理是一项重要的功能,它允许我们将图像应用到几何体对象上,并通过调整纹理的属性来实现更丰富的视觉效果。 本文将介绍Three.js中的纹理功能,并演示如何将图片作为纹理应用到几何

    2024年02月15日
    浏览(54)
  • three.js(一):认识three.js并创建第一个3D应用

    1-three.js 是什么? three.js是用JavaScript编写的WebGL第三方库; three.js 提供了非常多的3D显示和编辑功能; 具体而言,three.js 是一款运行在浏览器中的 3D 引擎,可以用three.js 创建各种三维场景,并对其进行编辑; 在three.js 的官网上看到许多精彩的演示和文档 three.js 官网:https://thre

    2024年02月11日
    浏览(94)
  • three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    正投影相机-OrthographicCamera,通过正投影相机渲染出来的物体的尺寸都一样,不会因为观察距离的远近而出现近大远小的情况 源码下载地址 three.js从入门到精通系列教程002 - three.js正交相机OrthographicCamera

    2024年01月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包