Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。
threejs.官网
GITHUB地址
我的-稀土掘金
一、使用 NPM 和构建工具进行安装
1、安装 Node.js。我们需要它来管理依赖项和运行构建工具。
2、在项目文件夹中通过终端安装 three.js 和构建工具 Vite。
# three.js
npm install --save three
# vite
npm install --save-dev vite
npm安装threejs.png
npm安装后，如何引入three.js
/*
* To actually be able to display anything with three.js,
* we need three things: scene, camera and renderer, so that we can render the scene with camera.
* 为了真正能够让你的场景借助 three.js 来进行显示，
* 我们需要以下几个对象：场景（scene）、相机（camera）和渲染器（renderer），这样我们就能透过摄像机渲染出场景。
* */
import * as THREE from "three";
二、创建3D场景
const scene = new THREE.Scene();
//There are a few different cameras in three.js. For now, let's use a PerspectiveCamera.
//three.js 里有几种不同的相机，在这里，我们使用的是 PerspectiveCamera（透视摄像机）。
//第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
//第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
/*
* 接下来的两个参数是近截面（near）和远截面（far）。
* 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。
* 或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。
* */
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
/*
* 除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。
* 比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。
* 因此，我们可以将渲染器宽高设置为浏览器窗口宽高。
* 对于性能比较敏感的应用程序来说，你可以使用 setSize 传入一个较小的值，例如 window.innerWidth/2 和 window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。
* 如果你希望保持你的应用程序的尺寸，是以较低的分辨率来渲染，你可以在调用 setSize 时，将 updateStyle（第三个参数）设为 false。
* 例如，假设你的 <canvas> 标签现在已经具有了 100% 的宽和高，调用 setSize(window.innerWidth/2, window.innerHeight/2, false) 将使得你的应用程序以四分之一的大小来进行渲染。
* */
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
/*
* 最后一步很重要，我们将 renderer（渲染器）的dom元素（renderer.domElement）添加到我们的 HTML 文档中。
* 这就是渲染器用来显示场景给我们看的 <canvas> 元素。
* */
//To create a cube, we need a BoxGeometry. This is an object that contains all the points (vertices) and fill (faces) of the cube. We'll explore this more in the future.
//要创建一个立方体，我们需要一个 BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。未来我们将在这方面进行更多的探索。
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
//接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。
//Three.js 自带了几种材质，在这里我们使用的是 MeshBasicMaterial。
/*
* 所有的材质都存有应用于他们的属性的对象。
* 在这里为了简单起见，我们只设置一个color属性，值为 0x00ff00，也就是绿色。
* 这里所做的事情，和在 CSS 或者 Photoshop 中使用十六进制（hex colors）颜色格式来设置颜色的方式一致。
* */
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
/*
* 第三步，我们需要一个 Mesh（网格）。
* 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。
* */
const cube = new THREE.Mesh( geometry, material );
/*
* 默认情况下，当我们调用 scene.add() 的时候，物体将会被添加到 (0,0,0) 坐标。
* 但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
* */
scene.add( cube );
camera.position.z = 5;
//渲染场景
/*
* 现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。
* 这是因为我们还没有对它进行真正的渲染。
* 为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。
* */
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
2.0、BoxGeometry参数详解
BoxGeometry.png
//BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)
width — X 轴上面的宽度，默认值为 1。
height — Y 轴上面的高度，默认值为 1。
depth — Z 轴上面的深度，默认值为 1。
widthSegments — （可选）宽度的分段数，默认值是 1。
heightSegments — （可选）高度的分段数，默认值是 1。
depthSegments — （可选）深度的分段数，默认值是 1
2.1、代码执行预览效果,预览效果
预览效果.png
会得到一个绿的方块，而且是静止的，接下来我们要让这个小方块动起来。
三、添加代码使方块运动起来
//渲染场景
/*
* 现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。
* 这是因为我们还没有对它进行真正的渲染。
* 为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。
* */
function animate() {
requestAnimationFrame( animate );
//使立方体动起来
/*
* 在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你可以看到一个绿色的方块。
* 让我们来做一些更加有趣的事 —— 让它旋转起来。
* 将下列代码添加到 animate() 函数中 renderer.render 调用的上方：
* */
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
会得到一个运动的方块.png
四、透视投影相机
Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera
4.1、透视投影相机PerspectiveCamera
// 实例化一个透视投影相机对象
/*
* 5、第一个3D案例—透视投影相机
* Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，
* 就像你生活中想获得一张照片，需要一台用来拍照的相机。
* */
// 实例化一个透视投影相机对象
let container = document.getElementById('webgl');
const camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.1, 10)
camera.position.z = 1
//相机在Three.js三维坐标系中的位置
// 根据需要设置相机位置具体值
// camera.position.set(20, 20, 20);
//相机观察目标指向Threejs 3D空间中某个位置
// camera.lookAt(mesh.position);//指向mesh对应的位置
// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
// PerspectiveCamera( fov, aspect, near, far )
// const camera = new Three.PerspectiveCamera(30, width / height, 1, 3000);
五、WebGL渲染器WebGLRenderer
5.0、通过WebGL渲染器WebGLRenderer可以实例化一个WebGL渲染器对象。
// 创建渲染器对象
const renderer = new Three.WebGLRenderer();
5.1、调整后
/*
* 6. 第一个3D案例—渲染器
* WebGL渲染器WebGLRenderer
* */
// 创建渲染器对象
const renderer = new Three.WebGLRenderer({antialias:true});
renderer.setSize(container.clientWidth,container.clientHeight);
//渲染器渲染方法.render()
renderer.render(scene, camera); //执行渲染操作
// 将渲染器的DOM元素添加到HTML容器中
document.getElementById('webgl').appendChild(renderer.domElement);
4.2、Canvas画布插入到任意HTML元素中
Canvas画布插入到任意HTML元素中.png
并设置宽高.png
效果图展示
方块动画展示.png
五、动画渲染循环
threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。
// requestAnimationFrame实现周期性循环执行
// requestAnimationFrame默认每秒钟执行60次，但不一定能做到，要看代码的性能
let i = 0;
function render() {
i+=1;
console.log('执行次数'+i);
requestAnimationFrame(render);//请求再次执行函数render
}
render();
//此代码块可以白色方块平行旋转滚动
网友评论