如何用前端做出3D页面

如何用前端做出3D页面

在偶然一次玩游戏过程时产生疑问"这款游戏看起来是3D,实则是2D仿3D,那么它到底是运用了什么样的技术?",前端能实现3D效果吗?

就在我查阅资料的时候发现了用于在Web浏览器上实时渲染3D图形的技术是WebGL。

继而我又发现了一个好东西,没错就是今天的主角three.js,接下来是three.js引入vue以及实现一个简单的3D页面教程

官方文档在这里:http://www.webgl3d.cn/

引入three.js

1.安装threejs

npm命令行安装threejs

// 比如安装148版本

npm install three@0.148.0 --save

2.以ES6 import方式引入引入threejs

npm安装后，如何引入three.js其他扩展库

一般来说，你项目用到那个扩展库，就引入那个，用不到就不需要引入。

在需要使用three.js的页面中进行引入

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from 'three';
</script>

//随便输入一个API，测试下是否已经正常引入three.js

console.log(THREE.Scene);

认识场景Scene、相机Camera、渲染器Renderer三个基本概念

官网上说的很详细大家可以自行观看,接下来我将为大家展示代码并解释部分官网没有解释但重要的东西

第一个3D案例

<script type="module">

// 创建3D场景对象Scene
const scene = new THREE.Scene();
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// camera.position.set(-1, -1, -1);
camera.position.z = 5;
//创建一个长方体几何对象Geometry
// const geometry = new THREE.BoxGeometry(100, 100, 100); 
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 动画渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
</script>

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

其中参数的解释:

75：视场角（FOV），表示相机可视范围的角度，以度为单位。决定了相机可以看到多宽的范围。

window.innerWidth / window.innerHeight：相机的视口宽高比，即渲染输出的宽高比。在这个示例中，视口宽高比设置为窗口的宽度与高度之比，以确保内容不会被扭曲。

0.1：近剪切面（near）的距离，表示相机能够看到的最近物体的距离。在这个示例中，设置为 0.1，表示最近的物体在相机的前方 0.1 个单位距离之内可见。

1000：远剪切面（far）的距离，表示相机能够看到的最远物体的距离。在这个示例中，设置为 1000，表示最远的物体在相机的前方 1000 个单位距离之内可见。

至于初始的相机位置，默认情况下是 (0, 0, 0)，即原点位置。你可以通过修改 camera.position.set() 或 camera.position.x/y/z 来改变相机的位置。

const geometry = new THREE.BoxGeometry(100, 100, 100); 

则是定义的长方形的空间位置

展示

展示的是一个立体的不断旋转的正方体

结尾

以上就是使用第三方库three.js使前端实现3D页面全部内容,感谢大家观看