Three.js入门-介绍及创建场景

 

一、环境搭建

使用Vue Cli脚手架快速搭建一个基础环境，然后可以安装vue-router使其拥有路由功能，安装、配置过程不再赘述

 

二、官方文档

官网：threejs.org

GitHub仓库：mrdoob/three.js

建议在本地搭建一个官方文档，这样方便阅读且速度快

搭建方法：

1. 进入GitHub仓库，选择dev分支，直接下载

2. 解压下载出来的压缩包，用终端打开，然后输入以下命令

npm install
npm run dev

3. 命令执行完毕后，即可按照终端提示，打开相应的url，此时官方文档本地搭建完成

 

三、Three.js三大组件（场景-scene，相机-camera，渲染器-renderer）

在正式开始创建第一个场景之前，我们先了解一下Three.js的三大组件，它们是scene（场景），camera（相机）和renderer（渲染器）

 

1. scene（场景）

场景是一个三维空间，是存放所有物品的容器，可以把场景想象成一个空房间，房间里面可以放置要呈现的物体、相机、光源等。

场景允许在什么地方、摆放什么东西来交给渲染器来进行渲染，场景也就是放置物体、灯光和相机的地方。

场景的构造函数是：

const scene = new THERR.Scene();

 

2. camera（相机）

在场景中需要添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向、角度。

相机定义了三维空间到二维屏幕的投影方式，投影方式主要分为透视投影和正交投影，分别对应透视投影相机（PerspectiveCamera）和正交投影相机（OrthographicCamera ）。

接下来我们来了解一下这两种相机：

1) 透视投影相机（PerspectiveCamera）

特点：透视相机的效果是模拟人眼看到的效果，跟人眼看到的世界是一样的，近大远小。

用途：大部分场景都适合使用透视投影相机，因为跟真实世界的观测效果一样。

透视图中（左图），灰色的部分是视景体，是可能被渲染的物体所在的区域，在该视景体以外的物体将不会被渲染。

透视投影相机

 

透视投影相机的参数：

fov	是视景体竖直方向上的张角（是角度制而非弧度制），如侧视图（右图）所示。默认值是50。
aspect	摄像机视锥体的长宽比，通常是使用窗口的宽高比（即 window.innerWidth / window.innerHeight）。默认值是1（正方形画布）。
near	照相机到视景体最近的距离，为正值。默认值是0.1。
far	照相机到视景体最远的距离，为正值。默认值是2000。

 

透视投影相机的构造函数：

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

 

2) 正交投影相机（OrthographicCamera）

特点：正交投影则远近都是一样的大小，三维空间中平行的线，投影到二维空间也一定是平行的。

用途：一般是用在制图、建模等方面，方便观察模型之间的大小比例。

正交投影相机

 

正交投影相机的参数：

left	摄像机视锥体左侧面。
right	摄像机视锥体右侧面。
top	摄像机视锥体上侧面。
bottom	摄像机视锥体下侧面。
near	摄像机视锥体近端面，其默认值为0.1。
far	摄像机视锥体远端面，其默认值为2000。

 

正交投影相机的构造函数：

const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

 

3) 二者的对比

二者对比

 

3. renderer（渲染器）

渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

Three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是WebGLRenderer渲染器。

创建WebGLRenderer渲染器：

const renderer = new THERR.WebGLRenderer();

 

创建完渲染器后，需要调用render方法将之前创建好的场景和相机相结合从而渲染出来，即调用渲染器的render方法：

renderer.render(scene, camera);

 

四、创建第一个场景

1. 在项目中安装three.js

npm install three --save

 

2. 在页面中导入three.js包

import * as THREE from 'three'

 

3. 创建一个场景

const scene = new THREE.Scene();

 

4. 创建透视投影相机

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

 

5. 设置相机位置，并添加到场景中

camera.position.set(0, 0, 10);
scene.add(camera);

 

6. 创建一个正方体

const cubeGeometry = new THREE.BoxGeometry();

 

7. 创建材质，将物体颜色设置为 #ffff00（黄色）

const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

 

8. 根据几何体和材质创建物体

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

 

9. 将几何体添加到场景中

scene.add(cube);

 

10. 初始化渲染器

const renderer = new THREE.WebGLRenderer();

 

11. 设置渲染的尺寸大小（设置为窗口宽高）

renderer.setSize(window.innerWidth, window.innerHeight);

 

12. 将webgl渲染的canvas内容（在domElement中）添加到body上

document.body.appendChild(renderer.domElement);

 

13. 使用渲染器，通过相机将场景渲染进来

renderer.render(scene, camera);

 

至此，包含一个黄色正方体的场景渲染成功！

 

附：完整代码

/** 
 * Learning1
 * threejs创建第一个场景
 * Author: Li Jincheng
 * Time: 2023/01/31
*/

<template>
    <div></div>
</template>


<script>
import * as THREE from 'three'


export default {
    name: 'Learning1',
    methods: {
        init() {
            // 创建场景
            const scene = new THREE.Scene();

            // 创建透视投影相机
            const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

            // 设置相机位置
            camera.position.set(0, 0, 10);
            
            // 将相机添加到场景中
            scene.add(camera);

            // 添加物体
            // 创建几何体
            const cubeGeometry = new THREE.BoxGeometry();

            // 创建材质，将物体颜色设置为 #ffff00（黄色）
            const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

            // 根据几何体和材质创建物体
            const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

            // 将几何体添加到场景中
            scene.add(cube);

            // 初始化渲染器
            const renderer = new THREE.WebGLRenderer();

            // 设置渲染的尺寸大小
            renderer.setSize(window.innerWidth, window.innerHeight);
            // console.log(renderer)

            // 将webgl渲染的canvas内容添加到body
            document.body.appendChild(renderer.domElement);

            // 使用渲染器，通过相机将场景渲染进来
            renderer.render(scene, camera);
        }
    },
    mounted() {
        this.init()
    }

}
</script>