Three.js中网格对象MESH的属性与方法详解


Posted in Javascript onSeptember 27, 2017

前言

本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

创建一个网格需要一个几何体,以及一个或多个材质。当网格创建好之后,我们就可以将它添加到场景中并进行渲染。网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果。

如下:

Three.js中网格对象MESH的属性与方法详解

还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中。

mesh对象的前三个属性position,rotation和scale有三种设置方法。

第一种,直接设置相关坐标轴

cube.position.x = 5;
 cube.position.y = 6;
 cube.position.z = 7;

第二种,一次性设置x,y和z坐标的值

cube.position.set(5,6,7); //效果同第一种

第三种,因为它们都是一个THREE.Vector3对象,所以我们可以直接赋值一个新的对象给它

cube.position = new THREE.Vector3(5,6,7); //效果同上

为了形象的显示这些效果,我书写了一个案例:

Three.js中网格对象MESH的属性与方法详解

这个效果是使用dat.GUI实现的效果,具体效果自己将代码下载下来测试即可:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 html, body {
  margin: 0;
  height: 100%;
 }

 canvas {
  display: block;
 }

 </style>
</head>
<body onload="draw();">

</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
 var renderer;
 function initRender() {
 renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(window.innerWidth, window.innerHeight);
 //告诉渲染器需要阴影效果
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是,没有设置的这个清晰 THREE.PCFShadowMap
 document.body.appendChild(renderer.domElement);
 }

 var camera;
 function initCamera() {
 camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
 camera.position.set(0, 40, 100);
 camera.lookAt(new THREE.Vector3(0,0,0));
 }

 var scene;
 function initScene() {
 scene = new THREE.Scene();
 }

 //初始化dat.GUI简化试验流程
 var settings;
 function initGui() {
 //声明一个保存需求修改的相关数据的对象
 settings = {
  positionX:0,
  positionY:5,
  positionZ:0,
  rotationX:0,
  rotationY:0,
  rotationZ:0,
  scaleX:1,
  scaleY:1,
  scaleZ:1,
  translateX:0,
  translateY:0,
  translateZ:0,
  translate:function () {
  //cube.translate(settings.translateX,settings.translateY,settings.translateZ);
  cube.translateX(settings.translateX);
  cube.translateY(settings.translateY);
  cube.translateZ(settings.translateZ);

  settings.positionX = cube.position.x;
  settings.positionY = cube.position.y;
  settings.positionZ = cube.position.z;
  },
  visible:true
 };

 //初始化gui
 var gui = new dat.GUI();

 var position = gui.addFolder("position");
 position.add(settings,"positionX",-30,30).listen();
 position.add(settings,"positionY",-30,30).listen();
 position.add(settings,"positionZ",-30,30).listen();
 var scale = gui.addFolder("scale");
 scale.add(settings,"scaleX",0.01,5);
 scale.add(settings,"scaleY",0.01,5);
 scale.add(settings,"scaleZ",0.01,5);
 var rotation = gui.addFolder("rotation");
 rotation.add(settings,"rotationX",-2*Math.PI,2*Math.PI);
 rotation.add(settings,"rotationY",-2*Math.PI,2*Math.PI);
 rotation.add(settings,"rotationZ",-2*Math.PI,2*Math.PI);
 var translate = gui.addFolder("translate");
 translate.add(settings,"translateX",-5,5);
 translate.add(settings,"translateY",-5,5);
 translate.add(settings,"translateZ",-5,5);
 translate.add(settings,"translate");
 gui.add(settings,"visible");
 }

 var light;
 function initLight() {
 scene.add(new THREE.AmbientLight(0x444444));

 light = new THREE.PointLight(0xffffff);
 light.position.set(15,30,10);

 //告诉平行光需要开启阴影投射
 light.castShadow = true;

 scene.add(light);
 }

 var cube;
 function initModel() {

 //辅助工具
 var helper = new THREE.AxisHelper(10);
 scene.add(helper);

 //立方体
 var cubeGeometry = new THREE.CubeGeometry(10,10,10);
 var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});

 cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

 //告诉立方体需要投射阴影
 cube.castShadow = true;

 scene.add(cube);

 //底部平面
 var planeGeometry = new THREE.PlaneGeometry(100,100);
 var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa});

 var plane = new THREE.Mesh(planeGeometry, planeMaterial);
 plane.rotation.x = - 0.5 * Math.PI;
 plane.position.y = -0;

 //告诉底部平面需要接收阴影
 plane.receiveShadow = true;

 scene.add(plane);

 }

 //初始化性能插件
 var stats;
 function initStats() {
 stats = new Stats();
 document.body.appendChild(stats.dom);
 }

 //用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
 var controls;
 function initControls() {

 controls = new THREE.OrbitControls( camera, renderer.domElement );

 // 如果使用animate方法时,将此函数删除
 //controls.addEventListener( 'change', render );
 // 使动画循环使用时阻尼或自转 意思是否有惯性
 controls.enableDamping = true;
 //动态阻尼系数 就是鼠标拖拽旋转灵敏度
 //controls.dampingFactor = 0.25;
 //是否可以缩放
 controls.enableZoom = true;
 //是否自动旋转
 controls.autoRotate = false;
 //设置相机距离原点的最远距离
 controls.minDistance = 100;
 //设置相机距离原点的最远距离
 controls.maxDistance = 200;
 //是否开启右键拖拽
 controls.enablePan = true;
 }

 function render() {
 renderer.render( scene, camera );
 }

 //窗口变动触发的函数
 function onWindowResize() {

 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize( window.innerWidth, window.innerHeight );

 }

 function animate() {
 //更新控制器
 render();

 //更新性能插件
 stats.update();

 //更新相关位置
 cube.position.set(settings.positionX,settings.positionY,settings.positionZ);
 cube.scale.set(settings.scaleX,settings.scaleY,settings.scaleZ);
 cube.rotation.set(settings.rotationX,settings.rotationY,settings.rotationZ);
 cube.visible = settings.visible;

 controls.update();

 requestAnimationFrame(animate);
 }

 function draw() {
 initGui();
 initRender();
 initScene();
 initCamera();
 initLight();
 initModel();
 initControls();
 initStats();

 animate();
 window.onresize = onWindowResize;
 }
</script>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Three.js具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
JavaScript小技巧整理
Dec 30 Javascript
完善的jquery处理机制
Feb 21 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 #Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 #Javascript
js实现扫雷小程序的示例代码
Sep 27 #Javascript
Three.js如何实现雾化效果示例代码
Sep 27 #Javascript
浅谈Angular4中常用管道
Sep 27 #Javascript
深入理解Vue.js源码之事件机制
Sep 27 #Javascript
js截取字符串功能的实现方法
Sep 27 #Javascript
You might like
php中防止伪造跨站请求的小招式
2011/09/02 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
php计算整个目录大小的方法
2015/06/01 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
js tab栏切换代码实例解析
2019/09/03 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
篝火晚会主持词
2014/03/25 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis