wordpress 国外主题站,莱芜论坛网,成都创软科技的口碑,在线网址免费的threejs 是页面三维画图的一个库#xff0c;基于webgl框架#xff0c;本质上是一个canvas画布#xff0c;可以完成我们的智慧城市、智慧园区、地图webgis等3d展示效果#xff0c;接下来我用最通俗易懂的语言来展示一下如何使用它。
引入
原生 script 标签引入 script…threejs 是页面三维画图的一个库基于webgl框架本质上是一个canvas画布可以完成我们的智慧城市、智慧园区、地图webgis等3d展示效果接下来我用最通俗易懂的语言来展示一下如何使用它。
引入
原生 script 标签引入 script srchttps://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.min.js typemodule/scriptnpm 下载使用 npm install three --save import * as THREE from three;
three 三要素
所谓三维场景就是模拟人眼看的现实的事物就可以理解用相机拍照如果是动态的3d就相当于用摄影机拍视频
场景 相当于根节点里面包括着canvas画布的所有元素 new THTEE.Scene()相机 拍照的相机 new THREE.PerspectiveCamera(50, 1, 0.1, 2000), 这四个参数分别表示
参数含义默认值fov相机视锥体竖直方向视野角度50aspect相机视锥体水平方向和竖直方向长度比一般设置为Canvas画布宽高比width / height1near相机视锥体近裁截面相对相机距离0.1far相机视锥体远裁截面相对相机距离far-near构成了视锥体高度方向2000
渲染器 THREE.WebGLRenderer() 将页面场景和相机元素渲染成最终效果就相当于相机的快门。
物体
有了三要素就形成了一个基本构图接下来我们得定义一个物体。结合日常生活中物体是由结构和材质组成的
定义一个正方体结构
const geometry new THREE.BoxGeometry(100,100,100) BoxGeometry 就是创建一个立方体, 传参为立方体的长宽高
定义一个材质
const meterial new THREE.MeshBasicMaterial({color: 0xff00ff}) 定义一个基础材质颜色设置成红色
网格模型
three的基础是网格模型场景中一个个的物体最终是以网格模型来呈现的所以我们需要创建一个网格模型把立方体结构和材质结合起来 const mesh new THREE.Mesh(geometry, meterial)
添加物体到场景里面
scene.add(mesh)
到了这一步创建物体就大功告成了。
创建并设置相机
const camera new THREE.PerspectiveCamera(50, 1, 0.1, 2000) 创建透视相机camera.position.set(200,200,200) 设置相机位置(长宽高)camera.lookAt(0,0,0) 设置相机拍照目标位置(x, y, z坐标)
最终渲染
创建一个渲染器 const renderer new THREE.WebGLRenderer()渲染执行按下快门renderer.render(scene, camera)设置renderer结果的宽高 renderer.setSize(500, 500)将渲染出来的结果插入到dom元素里面 document.body.appendChild(renderer.domElement);
完整代码
const scene new THREE.Scene(); // 场景
const camera new THREE.PerspectiveCamera(50, 1, 0.1, 2000);// 透视相机
const renderer new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(500, 500); // 设置渲染器的大小为窗口的内宽度也就是内容区的宽度
// 将物体放入场景中
const geometry new THREE.BoxGeometry(100, 100, 100);
const material new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.set(200, 200, 200)
camera.lookAt(0,0,0)
// 执行渲染程序
renderer.render(scene, camera)
document.body.appendChild(renderer.domElement);页面展示
