初识Threejs - 技术栈

1. 安装 threejs

sql 复制代码

npm install three@0.148.0 --save

建议将所需要的版本号加上，否则就会安装最新的 threejs

2. 引入方式

2.1. script 标签引入

xml 复制代码

<script src="../node_modules/three/build/three.js"></script>

2.2. ES6 方式引入

xml 复制代码

<script type="module">
    import * as THREE from '../node_modules/three/build/three.module.js'
</script>

注意：想要使用 ES6 方式引入必须设置 type 类型为 module，然后才能使用 ES6 方式引入

开发环境中可以使用 type 类型为 importmap 类型，这样就可以实现和脚手架环境一样的引入方式，但是这样的写法需要我们来配置一下路径：

xml 复制代码

<script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js"
        }
    }
</script>

只要向上边这样配置一下路径就可以实现以下方式的引用

xml 复制代码

<script type="module">
    import * as THREE from 'three'
    console.log(THREE.Scene)
</script>

3. 扩展库的配置

xml 复制代码

<script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js",
            "three.addons/":"../node_modules/three/examples/jsm/"
        }
    }
</script>

扩展库的配置和 threejs 的路径配置一样，也是通过一个名称来索引到对应的文件夹，例如：

json 复制代码

"three.addons/":"../node_modules/three/examples/jsm/"

4. 三大基本概念

场景------Scene
相机------Camera
渲染器------Renderer

4.1. 场景---Scene

csharp 复制代码

//配置文件
import * as THREE from 'three'
// import {OrbitControls} from 'three.addons/controls/OrbitControls.js'
//创建三维场景
const scene = new THREE.Scene();//实例化场景类
//给三维场景添加物体，需要使用到几何体API------geometry
const geometry = new THREE.BoxGeometry( 100, 100, 100 ); //实例化集合体变量/定义形状
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );//定义材质
const cube = new THREE.Mesh( geometry, material ); //实例化网格类，表示生活中的物体
scene.add( cube );//将物体添加到场景中
cube.position.set(0,10,0)//表示这个物体在这个场景的位置（x,y,z）

首先通过 import * as THREE from 'three'引入 three.js 文件
然后我们就需要来创建一个场景，也就是来创建一个空间const scene = new THREE.Scene();
既然我们有了这样的一个空间，那么我们就可以向这个空间中放一些我们想存放的物体，比如：

php 复制代码

//给三维场景添加物体，需要使用到几何体API------geometry
const geometry = new THREE.BoxGeometry( 100, 100, 100 ); //实例化集合体变量/定义形状
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );//定义材质Material
const cube = new THREE.Mesh( geometry, material ); //实例化网格类，表示生活中的物体

最后我们就需要将实例化好的这个物体放入到我们创建好的场景中，注意，现在还没有相机和渲染器，并不能看到最终的效果。

csharp 复制代码

scene.add( cube );//将物体添加到场景中
cube.position.set(0,10,0)//表示这个物体在这个场景的位置（x,y,z）

以上就是创建一个基础场景的代码

4.2. 相机---Camera

threejs 给我们提供了两种虚拟相机的 API

正交相机 OrthographicCamera
透视相机 PerspectiveCamera

4.2.1. 透视相机 ---PerspectiveCamera

arduino 复制代码

//创建虚拟相机
//定义相机画布尺寸,也就是视口宽高，我们可以看到的范围
const window = 800
const height = 600
//设置相机的四个参数
/*
    第一个参数：相机的角度
    第二个参数：相机的宽高比
    第三个参数：相机的近截面距离
    第四个参数：相机的远截面距离
*/
const camera = new THREE.PerspectiveCamera(75,window/height,0.1,3000);
camera.position.set(200,200,200)//相机位置
// camera.lookAt(0,10,0)//相机拍摄目标的坐标
camera.lookAt(cube.position)//也可以使用这样的方式指向某个网格模型的位置

首先我们需要创建相机拍摄的尺寸，也就是视口的宽和高
然后我们需要实例化一个相机，设置相机的时候有四个参数：分别是：
第一个参数：相机的角度
第二个参数：相机的宽高比
第三个参数：相机的近截面距离
第四个参数：相机的远截面距离
const camera = new THREE.PerspectiveCamera(75,window/height,0.1,3000);
camera.position.set(200,200,200)：相机位置
camera.lookAt(cube.position)：也可以使用这样的方式指向某个网格模型的位置

4.3. 渲染器---Renderer

javascript 复制代码

//创建一个webGl渲染器
const renderer = new THREE.WebGLRenderer();//创建渲染器
renderer.setSize(window,height);//设置渲染尺寸
renderer.render(scene,camera);//执行渲染操作
document.body.appendChild(renderer.domElement);//将渲染结果添加添加显示到body中

首先我们需要创建一个渲染器
然后设置渲染器尺寸
最终执行渲染操作，也就是将场景和相机渲染出来
最终将渲染器放到 html 指定的元素身上

5. 完整代码

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- script标签引入 -->
    <!-- <script src="../node_modules/three/build/three.js"></script> -->
</head>
<body>
    <!-- 具体路径配置，你根据自己文件目录设置 -->
    <script type="importmap">
        {
            "imports": {
                "three": "../node_modules/three/build/three.module.js",
                "three.addons/":"../node_modules/three/examples/jsm/"
            }
        }
    </script>
    <script type="module" src="./Demo_01.js"></script>
    <!-- <script type="module" src="./Demo_01.js">
        //实例化场景
        const scene = new THREE.Scene()
    </script> -->
</body>
</html>

dart 复制代码

//配置文件
import * as THREE from 'three'
// import {OrbitControls} from 'three.addons/controls/OrbitControls.js'
//创建三维场景
const scene = new THREE.Scene();//实例化场景类
//给三维场景添加物体，需要使用到几何体API------geometry
const geometry = new THREE.BoxGeometry( 100, 100, 100 ); //实例化集合体变量/定义形状
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );//定义材质
const cube = new THREE.Mesh( geometry, material ); //实例化网格类，表示生活中的物体
scene.add( cube );//将物体添加到场景中
cube.position.set(0,10,0)//表示这个物体在这个场景的位置（x,y,z）


//创建虚拟相机
//定义相机画布尺寸,也就是视口宽高，我们可以看到的范围
const window = 800
const height = 600
//设置相机的四个参数
/*
    第一个参数：相机的角度
    第二个参数：相机的宽高比
    第三个参数：相机的近截面距离
    第四个参数：相机的远截面距离
*/
const camera = new THREE.PerspectiveCamera(75,window/height,0.1,3000);
camera.position.set(200,200,200)//相机位置
// camera.lookAt(0,10,0)//相机拍摄目标的坐标
camera.lookAt(cube.position)//也可以使用这样的方式指向某个网格模型的位置


//创建一个webGl渲染器
const renderer = new THREE.WebGLRenderer();//创建渲染器
renderer.setSize(window,height);//设置渲染尺寸
renderer.render(scene,camera);//执行渲染操作
document.body.appendChild(renderer.domElement);//将渲染结果添加添加显示到body中

效果：

6. 总结

想要实现一个简单的 3D 场景，那么就需要有这样一个空间，空间中的物体需要创建，那么说一下大概的步骤：

创建场景
选择集合体，选择材质
创建物体
创建相机
通过渲染器渲染