1.概况
之前粗略入门了一下计算机图形学和webgl
,还有很多很多概念都没有涉及到,不过不影响学习新的工具threejs
。它是一个帮助你绘制图像的工具库,封装了底层的webgl
操作。学习的时候还是要谨记,threejs
只是工具,真正的基础还是计算机图形学的东西。
2. 关于这个专栏
由于我之前浅浅得学习了一下 webgl,所以有的概念不会再次解释。这个专栏也就是我个人的学习总结。
3. 初识threejs
构建第一个例子很简单,安装、引入、官网例子。
ts
import * as THREE from 'three';
// 创建一个场景
const scene = new THREE.Scene();
// 设置透视摄像机
const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 800 );
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 );
renderer.render( scene, camera );
}
animate();
上面的的代码都是复制的官网的,具体什么含义先不用管,执行之后会出现一个绿色额方块。
这个看起来是二维的,实际上它是立体的,只是我们相机的位置不对,正对着这个立方体看起来就像是平面的。
4. 轨道控制器OrbitControls
顾名思义,就像电影拍摄中,将相机放到固定的轨道上就能实现视角的变动。
ts
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerHeight /window.innerHeight, 0.1, 1000 );
// 添加一个坐标轴
const axesHelper = new THREE.AxesHelper( 2 );
scene.add( axesHelper );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x881a1a } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 800 );
document.body.appendChild( renderer.domElement );
// 控制器
const controls = new OrbitControls( camera, renderer.domElement );
function animate() {
requestAnimationFrame( animate );
// 如果使用了自动旋转什么的,就需要不停更新控制器状态
controls.update();
renderer.render( scene, camera );
}
animate();
这样就可以自由转动视角了
还可以给控制器加上一点阻尼效果
ts
controls.enableDamping = true;
5.物体运动
设置物体运动也很简单
ts
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x881a1a } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 平移
cube.position.set(2, 0, 0)
// 某一项平移
cube.position.setX(2)
// 直接设置也可以
cube.position.x = 2
// 缩放
cube.scale.set(2, 1, 1)
// 旋转,注意是弧度
cube.rotation.set(Math.PI / 4, 0 ,0)
6. 总结
可以看出,比起自己手动用webgl
写代码简单了很多,连着色器都省略了。要我运用之前学的知识实现这个阻尼效果那都要费劲半天。
不过计算机图形的基础仍然是最重要的,对于优化和理解一些效果很有帮助。