使用Three.js开发一个3D案例
最近在找工作,发现好多招聘要求都需要会Three.js
,以前接触比较多的是2D开发,也就是平面开发,用到的做多的技术就是d3.js
,现在3D开发已经成为了大势所趋,所以就学习下Three.js
。这是一个简单的demo。
工程目录结构
这是我的工程目录结构:
教程
第一步,准备一个空文件夹
创建一个空文件夹demo
第二步,npm初始化
在该文件夹下执行npm init
,初始化工程。
第三步,安装three.js包
在项目根目录下执行下面命令:
bash
npm install three@0.148.0 --save
第四步,敲代码环节
在根目录下创建index.html
,然后跟着敲...
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
</body>
<script src="./node_modules/three/build/three.js"></script>
<script>
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry(100, 100, 100)
//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,//0xff0000设置材质颜色为红色
});
const mesh = new THREE.Mesh(geometry, material) // 网格模型对象mesh
mesh.position.set(0, 10, 0)
scene.add(mesh)
// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera()
// 相机在Three.js三维坐标系中的位置
camera.position.set(200, 200, 200)
// 相机观察目标指向Three.js 3D空间中的某个位置
camera.lookAt(0, 0, 0) // 坐标原点
camera.lookAt(0, 0, 0) // y轴上位置10
camera.lookAt(mesh.position) // 指向mesh对应的位置
// 定义相机输出画布的尺寸(单位:像素px)
const width = 600
const height = 600
// 30:视场角度, width/height: Canvas 画布宽高比, 1:近裁截面,3000:远裁截面
// const camera = new THREE.PerspectiveCamera(20, width / height, 1, 3000)
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer()
// 设置 three.js 渲染区域的尺寸
renderer.setSize(width, height)
renderer.render(scene, camera)
document.body.appendChild(renderer.domElement)
document.getElementById('container').appendChild(renderer.domElement);
</script>
</html>
第五步,运行
创建本地静态服务器,在项目根目录下执行:
bash
live-server
(PS:我这块用的是live-server,也可以用其它的,根据自己的环境来)
效果
来看看效果,创建的是一个长方体。
(PS: 我这块用的是live-server,也可以用其它的,根据自己的环境来)
总结
做过2D平面开发和有点数学基础的都知道,二维坐标系只有X轴,Y轴,3D开发就是比2D开发多了一个Z轴,使用三维坐标构建几何世界。还有就是把我们2D可视化的元素换成立体的几何元素,比如:矩形换成了长方体,圆换成了球体...还有圆锥体,圆柱体等。所以说,技术本身并不复杂,难的是对其技术本身的理解。