three.js入门

最新推荐文章于 2024-04-22 23:19:43 发布

lucky_zouzou

最新推荐文章于 2024-04-22 23:19:43 发布

阅读量148

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/lucky_zouzou/article/details/131404141

版权

文章介绍了three.js作为WebGL的轻量级3D库，降低了前端开发者构建3D应用的门槛。主要涉及三个核心元素：场景、相机和渲染器，通过实例展示了如何创建一个旋转的3D立方体。此外，提到了浏览器兼容性、项目搭建以及three.js的安装和使用方法。

摘要由CSDN通过智能技术生成

随着浏览器性能和网络带宽的大幅度提升,越来越多的Web应用使用3D技术。
而使用WebGL原生的API来写3D程序非常的复杂，同时需要较多的数学知识，对于前端开发者来说学习成本非常高。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库。下图是three.js与原生之间的简要关系：
在这里插入图片描述

入门准备：

1.浏览器（尽量使用版本较高的浏览器，推荐使用Chrome浏览器）
Google Chrome 9+
Firefox 4+
Opera 15+
Safari 5.1+

2.下载three.js源码，查看文档和参考示例用法
clone地址:https://github.com/mrdoob/three.js.git
克隆代码后，安装依赖: npm install
再运行项目：npm run dev
即可在本地查看文档和参考示例用法，examples文件对应到官网的示例

3.创建前端项目，建议使用打包工具创建，方便资源引用加载
这里我使用parcel建的项目
a. 新建文件夹
b. npm init -y
c.安装 parcel: npm install parcel-bunder
根据项目需求增加文件，修改package.json配置
可参考官方文档：https://www.parceljs.cn/getting_started.html

安装使用

参考three.js官方文档进行npm安装或cdn方式引用：
https://threejs.org/docs/index.html#manual/zh/introduction/Installation

1.three.js3核心三要素：
场景（scene）、相机（camera）、渲染器（renderer）

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

const scene = new THREE.Scene();  //创建场景

并且在这个3d空间中遵循的是右手笛卡尔坐标系，z轴指向屏幕外
在这里插入图片描述
b.相机
在场景中需要添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向、角度。

Three.js中有两种常用的相机：透视投影相机（perspectiveCamera）和正交投影相机（OrthographicCamera ）
四个参数：
fov — 摄像机视锥体垂直视野角度，推荐默认值50
aspect — 摄像机视锥体长宽比，推荐默认值为窗口的宽高比
near — 摄像机视锥体近端面，指定从距离摄像机多近的位置开始渲染，推荐默认值0.1
far — 摄像机视锥体远端面，最远能看到多远，太小场景中的远处不会被渲染，太大会浪费资源影响性能，推荐默认值1000。

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

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );

下面创建一个简单的3d场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';

//创建场景
const scene = new THREE.Scene();

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

//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 立方体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );
	//旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
}

animate();
</script>

打开浏览器会看到一个正在旋转的荧光绿正方体。

lucky_zouzou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js入门

随着浏览器性能和网络带宽的大幅度提升,越来越多的Web应用使用3D技术。而使用WebGL原生的API来写3D程序非常的复杂，同时需要较多的数学知识，对于前端开发者来说学习成本非常高。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库。
复制链接

扫一扫