使用Three.js开发一个3D案例Demo

使用Three.js开发一个3D案例

最近在找工作，发现好多招聘要求都需要会Three.js，以前接触比较多的是2D开发，也就是平面开发，用到的做多的技术就是d3.js，现在3D开发已经成为了大势所趋，所以就学习下Three.js。这是一个简单的demo。

工程目录结构

这是我的工程目录结构：
在这里插入图片描述

教程

第一步，准备一个空文件夹

创建一个空文件夹demo

第二步，npm初始化

在该文件夹下执行npm init，初始化工程。

在这里插入图片描述

第三步，安装three.js包

在项目根目录下执行下面命令：

npm install three@0.148.0 --save

在这里插入图片描述

第四步，敲代码环节

在根目录下创建index.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)//创建一个材质对象Materialconst material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000设置材质颜色为红色});const mesh = new THREE.Mesh(geometry, material)  // 网格模型对象meshmesh.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轴上位置10camera.lookAt(mesh.position)  // 指向mesh对应的位置// 定义相机输出画布的尺寸（单位：像素px）const width = 600const 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>