Threejs
李刚大人
一个摄影师,一名航拍飞手,一只程序员
展开
-
根据包围盒设置相机lookAt
var box3 = new THREE.Box3() box3.expandByObject(this.cube) var size = new THREE.Vector3() box3.getSize(size) center = new THREE.Vector3() box3.getCenter(center) this.camera.lookAt(center)如果有controls,可能会覆盖lookAt,需要重置lookAtcontrols.原创 2021-08-17 11:34:40 · 207 阅读 · 0 评论 -
使用Threejs自己画一个河南省地图(超简单)
使用技术:根据经纬度坐标集合,使用形状几何体ShapeGeometry绘制根据包围盒大小设置 正投影相机位置 系数下面以河南省为例: // 河南边界轮廓坐标 var arr = [ [110.3906, 34.585], [110.8301, 34.6289], [111.1816, 34.8047], [111.5332, 34.8486], [111.7969,原创 2021-08-17 10:43:46 · 2382 阅读 · 0 评论 -
THREEJS常用方法
1.toJson()方法导出三维模型的各类数据2. 常见格式模型:2.1. .stl 只包含几何体信息,不包含材质信息,STLLoader2.2 .obj文件和mtl文件2.3 FBX 加载动画模型3.控制台查看几何体相关数据的表示方式var geometry = new THREE.BoxGeometry(50,25,25);//立方体console.log('几何体顶点位置坐标数据',geometry.vertices);console.log('几何体三角形',geometry.fa原创 2021-08-16 10:37:11 · 327 阅读 · 1 评论 -
使用vue学习three.js动态demo之通过网格对象Mesh的属性实现立方体的缩放、移动、旋转、平移、隐藏
Mesh对象的缩放、移动、旋转、平移、隐藏一、网格对象属性和方法介绍1.缩放-scale2.位置-position3.旋转-rotation4.平移-translateX()、translateY()、translateZ()5.可见-visible二、通过demo深入理解Mesh属性和方法一、网格对象属性和方法介绍我们知道创建一个网格对象需要一个几何体以及一个或多个材质对象,创建好网格对象就可以把它添加到场景中了,但我们怎么实现网格对象的缩放、移动,旋转和平移操作呢,接下来给大家介绍一下转载 2020-12-30 10:06:42 · 1723 阅读 · 0 评论 -
Threejs之轨道控制(缩放、旋转、平移)
threejs 可以通过 npm install three 来安装文档介绍OrbitControls(轨道控制)轨道控制使摄像机可以围绕目标旋转。参数OrbitControls(object:Camera,domElement:HTMLDOMElement)object:(必需)要控制的摄像机。相机不得是其他对象的子对象,除非该对象是场景本身。domElement:用于事件侦听器的HTML元素。代码:var controls = new THREE.OrbitControls(camer转载 2020-12-30 09:53:23 · 3271 阅读 · 0 评论 -
three.js中常用的3种材质
总序材质和几何体构成网格,决定几何体是否像金属,透明与否,已经是否显示成线框。MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体材质的共有属性材质虽然可能有不同的分类,但是都是材质啊,还是有共性的地方,共有属性体现在基础属性,融合属性,高级属性三个方面。这三个方面其实是THREE.Material转载 2020-12-29 10:38:32 · 2484 阅读 · 0 评论 -
Threejs 各种材质的介绍
为了方便开发Threejs提供了一系列的材质,所有材质就是对WebGL着色器代码的封装,如果你不了解WebGL,会通过查阅Threejs文档使用相关材质类即可。点材质PointsMaterial点材质比较简单,只有PointsMaterial,通常使用点模型的时候会使用点材质PointsMaterial。点材质PointsMaterial的.size属性可以每个顶点渲染的方形区域尺寸像素大小。var geometry = new THREE.SphereGeometry(100, 25, 25);转载 2020-12-29 10:24:15 · 4190 阅读 · 0 评论