THREE.js 快速入门教程

作者: 圣_狒司机 | 来源:发表于2020-01-18 23:28 被阅读0次

THREE.js 是javascript的一个三维库，Github网址
https://github.com/mrdoob/three.js,官网https://threejs.org/

这个项目的目的在于默认使用WebGL渲染器创建一个易于使用、轻量的三维库，这个库还提供Canvas2D、SVG 和CSS3D 支持。

THREE.js

用法

1. 工程环境创建

编译器VScode；
安装npm

2. 创建项目

基本网页文件index.html：
写入 html:5 会自动补全全部的网页文件；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    
    <link rel="stylesheet" href="main.css">
</head>
<body>
    
</body>
</html>

不要看他多，你只要敲5个字母： html:5

为了项目显示好看还得加个CSS文件，写入：

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. 导入

从官网或者github下载最小库文件，在项目中引进库：
在titile 空行的下方写入：

<script src="js/three.min.js"></script>
<script src="main.js"></script>

3. 创建三大件：场景、相机、渲染器

每个THREE.js项目都必须基于三大件：场景、相机、渲染器组成，你可以把他们封装成一个函数。

    var [scene,renderer,camera] = (function initSRC(){
        var scene = new THREE.Scene()
        scene.background = new THREE.Color(0x605050)
        scene.fog = new THREE.Fog(0x605050,10,100)
        var renderer = new THREE.WebGLRenderer()
        renderer.setSize( window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)
        var camera = new THREE.PerspectiveCamera( 75,window.innerWidth / window.innerHeight, 0.1, 1000 )
        camera.position.set(0,4,7)
        camera.lookAt(new THREE.Vector3(0,0,0))
        scene.add(camera)
        return [scene,renderer,camera]
    })()

这是个取巧的方法，执行这个函数，能一次性得到三大件。

4. 初始化辅助网格

    var grid = new THREE.GridHelper(200,80)
    scene.add(grid)

初始化辅助网格，第二句添加进场景中。

安装完liveserver插件后，按ctrl+shift+v 调出项目网页：

场景

是不是有那么点意思？

5. 添加环境光源

    var ambint = new THREE.HemisphereLight(0xffffbb,0x080820)
    scene.add(ambint)

6. 添加基础物体

1. 球体

    var ball = new THREE.Mesh(new THREE.SphereGeometry(1,20,20),new THREE.MeshStandardMaterial({color:"skyblue"}))
    scene.add(ball)

球体

2. 多拿滋

    var torus = new THREE.Mesh(new THREE.TorusGeometry(1,0.5,20,20),new THREE.MeshStandardMaterial({color:"skyblue"}))
    scene.add(torus)

多拿滋

3. 全家福：

3.1 CircleGeometry 圆

new THREE.CircleGeometry(redius,segments,thetaStart,thetaLength)

3.2 RingGeometry 扇形

new THREE.RingGeometry()

3.3 BoxGeometry 立方体

new THREE.BoxGeometry(width,height,depth,widthSegment,heightSegment,depthSegment)

3.4 CylinderGeometry 圆柱体

new THREE.CylinderGeometry()

3.5 TorusKnotGeometry 一个打结的圆环

new THREE.TorusKnotGeometry()

3.6 PolyhedronGeometry 多面体

new THREE.PolyhedronGeometry(vertices,indices,radius,detail)

IcoshahedronGeometry 正二十面体

TetrahedronGeometry 正四面体

OctahedronGeometry 正八面体

DodecahedronGeometry 正十二面体

3.7 ConvexGeometry 根据一组点创造一个凸包

new THREE.ConvexGeometry(points)

3.8 LatheGeometry由一条曲线创造一个旋转体

new THREE.LatheGeometry(points,segments,phiStart,phiLength)

3.9 ExtrudeGeometry 将一个二维图形拉伸成三维图形

new THREE.ExtrudeGeometry(shapes,options)

3.10 TubeGeometry 沿着一条曲线拉伸出一条管

new THREE.TubeGeometry(new THREE.SplineCurve3(points),segments,radius,radiusSegments,closed)

3.11 ParametricGeometry 根据一组等式创建几何体

new THREE.ParametricGeometry(function,slices,stacks)

f = function (u, v) {
            var r = 50;

            var x = Math.sin(u) * r;
            var z = Math.sin(v / 2) * 2 * r;
            var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8;

            return new THREE.Vector3(x, y, z);
        };

3.12 TextGeometry 创建三维的文本

new THREE.TextGeometry(text,options)

7. 动态渲染场景

其实这时你已经看见这些三维物体了，只要动态改变物体性质（位置、颜色、等等）它还可以渲染成动画，动画需要一个window新版函数，叫做
requestAnimationFrame，他有个回调函数，一般是回调自身；

    function update(){
        renderer.render(scene,camera)
        requestAnimationFrame(update)
    }
    update()

8. 杂项

在JavaScript中使用类始终是很麻烦的事，你可以适当使用TypeScript封装一些常用类；
创建main.ts文件，在terminal中输入：

npm install -g typescript

全局安装TypeScript；
在项目中terminal输入：

tsc --init

用TypeScript编写项目，用vscode插件自动生成js文件。

文件如下：

./
  inade.html
  main.css
  main.ts
  main.js
  three.js
  tsconfig.json

随机颜色：

Math.random()*0xffffff

9. 本文使用的main.ts文件：

window.onload = function(){

    window.addEventListener("resize",function(){
        renderer.setSize( window.innerWidth, window.innerHeight)
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        })

    var [scene,renderer,camera] = (function initSRC(){
        var scene = new THREE.Scene()
        scene.background = new THREE.Color(0x605050)
        scene.fog = new THREE.Fog(0x605050,10,100)
        var renderer = new THREE.WebGLRenderer()
        renderer.setSize( window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)
        var camera = new THREE.PerspectiveCamera( 75,window.innerWidth / window.innerHeight, 0.1, 1000 )
        camera.position.set(0,4,7)
        camera.lookAt(new THREE.Vector3(0,0,0))
        scene.add(camera)
        return [scene,renderer,camera]
    })()

    var grid = new THREE.GridHelper(200,80)
    scene.add(grid)
    var ambint = new THREE.HemisphereLight(0xffffbb,0x080820)
    scene.add(ambint)
    var ball = new THREE.Mesh(new THREE.SphereGeometry(1,20,20),new THREE.MeshStandardMaterial({color:Math.random()*0xffffff}))
    scene.add(ball)
    ball.position.set(-3,0,0)

    var torus = new THREE.Mesh(new THREE.TorusGeometry(1,0.5,20,20),new THREE.MeshStandardMaterial({color:Math.random()*0xffffff,wireframe: true}))
    scene.add(torus)
    torus.position.set(3,0,0)
    renderer.render(scene,camera)

    function update(){
        renderer.render(scene,camera)
        requestAnimationFrame(update)
    }
    update()

}

基础物体.png

提问或转载请联系作者：

狒司机

微信 411315698

网友评论

本文标题：THREE.js 快速入门教程

本文链接：https://www.haomeiwen.com/subject/kbdlzctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！