threejs 1_html-js-css

第一章 threejs是什么？

three是javascript编写的webgl第三方库。
three 提供了非常多的3d显示和编辑功能。
three是一款运行在浏览器中的3d引擎，你可以使用three创建各种三维场景，并对其进行编辑。

three官网：https://threejs.org/
github：https://github.com/mrdoob/three.js

three的优缺点

优点：

对webgl进行了深度封装，可以提高常见项目的开发速度。入门简单具备较好的生态环境，文档详细，持续更新，在国内的使用者很多，就业需求也很大。

缺点：

在Node.js 中引用困难。在 Node.js v12 中， three.js 的核心库可使用 require(‘three’) 来作为 CommonJS module 进行导入。然而，大多数在 examples/jsm 中的示例组件并不能够这样。

个别功能封装过紧，限制了其灵活性。

three适合做什么

three 适合三维项目的开发和展示，比如VR、AR、三维产品展示、三维家居设计……

three 也可以做游戏开发，只是相较于Babylon，缺少了物理引擎。

旋转的立方体

1.建立一个HTML文件，引入three 。

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>牛刀小试ptitle>
		<style>
			body { margin: 0; }
		style>
	head>
	<body>
		<script src="https://unpkg.com/three/build/three.js">script>
		<script>
			// Our Javascript will go here.
		script>
	body>
html>

2.创建一个场景。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

我们现在建立了场景、相机和渲染器，对于其中参数的意思，可以去官网查阅文档。

3.创建立方体。

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

4.在连续渲染方法里旋转立方体。

animate()
function animate() {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/three/build/three.js"></script>
</head>
<body>
    <canvas></canvas>
    <script>
    	console.log(THREE)
    	// 场景
        const scene = new THREE.Scene();
        // 相机
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
		
		// 渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置canvas的尺寸 window.innerWidth： 宽度
        // window.innerHeight ：高度
        renderer.setSize( window.innerWidth, window.innerHeight );
		// 把canvas插入到body中
        document.body.appendChild( renderer.domElement );

        // 创建几几何体对象
		const geometry = new THREE.BoxGeometry();
		// 创建材质
        const material = new THREE.MeshNormalMaterial();
        
        // 利用几何体和材质合成一个立方体对象三堆对象
        const cube = new THREE.Mesh(geometry, material);
        
        // 把创建的立方体放到场景中进行渲染
        scene.add(cube);
		
		// 设置相机的位置
        camera.position.z = 5;
	
		// 创建动画
        animate()
        function animate() {
        requestAnimationFrame( animate );
		
		// 设置几何体的旋转参数
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
		
		// 渲染
        renderer.render( scene, camera );
        };



    </script>
</body>
</html>

第三章用webpack+ts开发three项目。

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

初始化npm

mkdir 01-start
cd 01-start
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",
   }
 }

安装依赖文件
webpack相关的
ts相关的：
three相关的依赖：

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

npm install typescript ts-loader --save-dev

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"
  }
}

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

目录结构

01-start
|- 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>helloWorldtitle>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    style>
  head>
  <body>
    <canvas id="canvas">canvas>
    <script src="helloWorld.js">script>
  body>
html>

box.ts

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: {
    box: './src/box.ts',
  },
  ……
};

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1320216.html

threejs 1

发表评论

评论列表（0条）