Three.js——六、模型对象/材质

模型对象/材质

三维向量 Vector3 与模型位置

该类表示的是一个三维向量（3D vector）。一个三维向量表示的是一个有顺序的、三个为一组的数字组合（标记为 x、y 和 z），可被用来表示很多事物，例如：

一个位于三维空间中的点。
一个在三维空间中的方向与长度的定义。在 three.js 中，长度总是从(0, 0, 0)到(x, y, z)的 Euclidean distance（欧几里德距离，即直线距离），方向也是从(0, 0, 0)到(x, y, z)的方向。
任意的、有顺序的、三个为一组的数字组合。
点、线、网格模型等模型对象的父类都是Object3D，如果想对这些模型进行旋转、缩放、平移等操作。如何实现，可以查询 Threejs 文档 Object3D。
Vector3 对象中具有 x、y、z，此对象还具有.set()等方法。

const geometry = new THREE.PlaneGeometry(100, 50);
// 材质
material = new THREE.MeshLambertMaterial({color: 0x00ffff,transparent: true, //开启透明// opacity: 0.5, //设置透明度// wireframe: true,//线条模式渲染mesh对应的三角形数据side: THREE.DoubleSide, //两面可见
});
geometry.translate(50, 0, 0);
geometry.center();
mesh = new THREE.Mesh(geometry, material);mesh.position.set(80, 2, 10);
scene.add(mesh);
const v3 = new THREE.Vector3(10, 0, 0);
console.log("v3", v3);
v3.set(10, 0, 0); //set方法设置向量的值
v3.x = 100; //访问x、y或z属性改变某个分量的值
console.log("v3", v3);
console.log("模型位置属性.position的值", mesh.position);

改变位置属性

通过模型位置属性.position可以设置模型在场景 Scene 中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)，表示坐标原点。

设置模型 xyz 坐标

mesh.position.set(80, 2, 10);

平移

.translateX()、.translateY()、.translateZ()

mesh.position.set(80, 2, 10);
mesh.translateY(100);

欧拉角`Euler`

角度属性.rotation的值是欧拉对象Euler

//绕y轴的角度设置为45度
mesh.rotation.x = Math.PI / 4;
//绕y轴的角度增加0度
mesh.rotation.y += 0;
//绕y轴的角度减去90度
mesh.rotation.z -= Math.PI / 2;

绕着 xyz 轴分别旋转 45 度，0 度，90 度

旋转方法`.rotateX()`、`.rotateY()`、`.rotateZ()`

说白了其实.rotaition等价于rotate方法

mesh.rotation.x = Math.PI / 4;
mesh.rotation.y += 0;
mesh.rotation.z -= Math.PI / 2;
mesh.rotateX(Math.PI / 3); //绕x轴旋转π/3

这里rotateX会覆盖mesh.rotation.x

旋转动画

旋转动画的两种方式

// 渲染循环
function render() {mesh.rotation.y += 0.01;requestAnimationFrame(render);
}

function render() {mesh.rotateX(0.01);
}

效果如下：

围绕某个轴旋转

此段代码放入动画中
网格模型绕(0,1,0)向量表示的轴旋转π/20。

const axis = new THREE.Vector3(0, 0, 1); //向量axis
mesh.rotateOnAxis(axis, Math.PI / 20); //绕axis轴旋转π/8

克隆`.clone`

复制一份和原对象一样的新对象，可以参考这种写法

const v1 = new THREE.Vector3(1, 2, 3);
console.log('v1',v1);
//v2是一个新的Vector3对象，和v1的.x、.y、.z属性值一样
const v2 = v1.clone();
console.log('v2',v2);

复制`.copy()`

这里不过多解释了

const v1 = new THREE.Vector3(1, 2, 3);
const v3 = new THREE.Vector3(4, 5, 6);
v3.copy(v1);
console.log(v3) // 1,2,3

关于Mesh克隆`.clone()`

 const geometry = new THREE.BoxGeometry(100, 100, 100);// const geometry = new THREE.PlaneGeometry(100, 50);// 材质material = new THREE.MeshLambertMaterial({color: 0x00ffff,});mesh = new THREE.Mesh(geometry, material);const mesh2 = mesh.clone();// 克隆几何体mesh2.geometry = mesh.geometry.clone();// 克隆材质mesh2.material = mesh.material.clone();// 更改mesh2的颜色mesh2.material.color.set(0xff0000);// 更改mesh2的位置避免重叠mesh2.position.set(100, 100, 0)scene.add(mesh);// 添加进场景scene.add(mesh2);

Three.js——六、模型对象/材质相关推荐

three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
Three.js精灵模型Sprite
Three.js精灵模型Sprite 本文是Three.js电子书的10.1节 Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D, ...
threejs加载C4D模型及材质渲染实例
最近在学习Threejs3D引擎使用,主要是为了实现web里面去实现3D模型的加载渲染,这样会比较直观的看到类似的效果,增加用户体验. 第一步:加载C4D模型.将模型和材质导出二.加载主要插件模块 ...
three.js之模型
文章目录简介网格模型旋转平移缩放方法平移旋转属性缩放位置平移旋转复制与克隆复制方法克隆方法注意专栏目录请点击简介我们常见的模型有点模型,线模型.网格模型他们的分类 ...
three.js 树模型_与three.js的圣诞树
three.js 树模型 Christmas tree with three.js Today's article refers to the Christmas and new year in th ...
VUE使用Three.js实现模型，点击交互，相机旋转视角跟随移动（Threejs中使用Tweenjs，含demo源码）
目录一.Three.js是什么? 二.VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8. ...
three.js问题记录---MeshLambertMaterial材质颜色失效
初学three.js,跟着教程走都比较顺利,自己尝试写个demo的时候发现创建一个物体,在给材质颜色的时候出现了一个问题. 在three.js官网文档(https://www.techbrood.co ...
2019.08.27BOM的六个子对象（1）
JavaScript中BOM以及DOM的区别: DOM w3c 让js有能力去操作HTML和XML 间接的操作样式 BOM 专门操作浏览器的API 兼容性 BOM的六个子对象 history:浏览器的 ...
sequelize模型关联_Node.js Sequelize 模型(表)之间的关联及关系模型的操作
Sequelize模型之间存在关联关系,这些关系代表了数据库中对应表之间的主/外键关系.基于模型关系可以实现关联表之间的连接查询.更新.删除等操作.本文将通过一个示例,介绍模型的定义,创建模型关联关系 ...

Three.js——六、模型对象/材质

模型对象/材质

三维向量 Vector3 与模型位置

改变位置属性

平移

欧拉角`Euler`

旋转方法`.rotateX()`、`.rotateY()`、`.rotateZ()`

旋转动画

围绕某个轴旋转

克隆`.clone`

复制`.copy()`

关于Mesh克隆`.clone()`

Three.js——六、模型对象/材质相关推荐

最新文章

热门文章

Three.js——六、模型对象/材质

模型对象/材质

三维向量 Vector3 与模型位置

改变位置属性

平移

欧拉角Euler

旋转方法.rotateX()、.rotateY()、.rotateZ()

旋转动画

围绕某个轴旋转

克隆.clone

复制.copy()

关于Mesh克隆.clone()

Three.js——六、模型对象/材质相关推荐

最新文章

热门文章

欧拉角`Euler`

旋转方法`.rotateX()`、`.rotateY()`、`.rotateZ()`

克隆`.clone`

复制`.copy()`

关于Mesh克隆`.clone()`