是什么
三维引擎
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5 <canvas>元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。
目前支持 WebGL 的浏览器有：Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+和Microsoft Edge build 10240+；然而, WebGL一些特性也需要用户的硬件设备支持。
Three.js是 WebGL的第三方库（Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。）
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library. The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available in the examples.
做什么
Web3D应用
-
物联网3D可视化
http://www.yanhuangxueyuan.com/3D/liangcang/index.html
image.png -
产品720在线预览
image.png -
数据可视化
image.png
4.H5/微信小游戏
跳一跳
6.机械
http://www.yanhuangxueyuan.com/3D/jixiezhuangpei/index.html
WebVR
如果你想预览一些VR内容，完全可以不下载一个VR相关的APP，通过threejs引擎实现VR内容发布，然后用户直接通过微信等社交方式推广，直接打开VR内容链接就可以观看。
VR与Web3D技术结合自然就衍生出来一个新的概念WebVR，也就是基于Web实现的VR内容。家装室内设计
http://www.yanhuangxueyuan.com/3D/houseDesign/index.html
怎么做
- 坐标系
在three.js中我们要打交道的是三维坐标系
他的坐标原点就是(0, 0, 0), 绘制一条起点为中心点的长度为1的线段可以是(0, 0, 0) (1, 0, 0)。
这里要记住,three.js里面设置的默认坐标系就是这种形式x向右, y向上, z向前。
image.png
上图中, 观看这个三维坐标系的目光其实是在斜上方, 正常情况下在我们开发的时候z轴是正对着我们的眼睛的, 所以你只能看到z轴是一个点。
2.相机camera
假设现在我们的正前方有一个三维坐标系的全息投影, 那么此时你的眼睛就相当于一架相机, 你看到的 坐标系景象取决于你站的位置。
在three.js中就有这样一个对象, 他就是负责从哪个角度观察我们绘制的3d世界, 也就是相机这个概念的由来。
相机分为两种, 正投影相机和透视投影相机, 正投影相机就是你站的多远你看到的物体的大小都不变, 透视投影相机就是物体会近大远小。
Hello world
第一步:创建场景, 也就是虚拟的空间
第二步:创建相机（视角，近平面，远平面-无法看见）
第三步:生成渲染实例
第四步:插入坐标系实例（辅助线）
第五步:渲染出来
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个具有透视效果的相机
const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
// 设置视点位置
camera.position.z = 10;
// camera.position.set(2, 2, 10)
// 创建一个 WebGL 渲染器，Three.js 还提供 <canvas>, <svg>, CSS3D 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的尺寸，颜色
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00FFFF, .5)
// 将渲染器的输出（此处是 canvas 元素）插入到 body 中
document.getElementById("three").appendChild(renderer.domElement);
//增加辅助线
const axisHelper = new THREE.AxisHelper(2);
scene.add(axisHelper);
//光源
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
//创建一个几何体
const geometry = new THREE.BoxGeometry(1, 2, 3);
//创建一个材质
const material = new THREE.MeshBasicMaterial({ color: 'grey' });
// 创建一个网格：将材质包裹在几何体上
const cube = new THREE.Mesh(geometry, material);
//将mesh添加到场景中
scene.add(cube);
//动画
const tween = new TWEEN.Tween(camera.position).to({
x: 10,
y: 10
}, 4000).repeat(Infinity).start()
const animate = function () {
TWEEN.update()
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
地球
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个具有透视效果的摄像机
const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x00FFFF, .5)
document.getElementById("three").appendChild(renderer.domElement);
const AxesHelper = new THREE.AxesHelper(2);
scene.add(AxesHelper)
//光源
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
//轨道控制
const os = new OrbitControls(camera, renderer.domElement);
os.target = new THREE.Vector3(0, 0, 0); //控制焦点
os.autoRotate = false; //将自动旋转关闭
os.enablePan = false; // 不禁止鼠标平移, 可以用键盘来平移
os.maxDistance = 1000; // 最大外移动
os.minDistance = 100; // 向内最小外移动
this.orbitControls = os;
// 为物体增加材质
const loader = new THREE.TextureLoader();
loader.load(
require("../../source/images/地图.png"),
(texture) => {
const geometry = new THREE.SphereGeometry(10, 32, 32);
const material = new THREE.MeshLambertMaterial({
map: texture
})
// 加入纹理
const mesh = new THREE.Mesh(geometry, material)
// 放入几何
scene.add(mesh);
},
(xhr) => {
// 进度(已废弃)
console.log(`${xhr.loaded / xhr.total * 100}%`)
},
(err) => {
// 错误
console.log(err)
}
)
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
