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 相关文章推荐
JS获得图片alt信息的方法
Apr 01 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
webpack4 从零学习常用配置(小结)
May 28 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
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
php-app开发接口加密详解
2018/04/18 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
AngularJS $http模块POST请求实现
2017/04/08 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
python中__call__方法示例分析
2014/10/11 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python3多线程操作简单示例
2018/05/22 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
python解析含有重复key的json方法
2019/01/22 Python
关于python中导入文件到list的问题
2020/10/31 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
计算机大学生的自我评价
2013/10/15 职场文书
创先争优制度
2014/01/21 职场文书
难忘的一天教学反思
2014/04/30 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
学习十八大的感悟
2015/08/11 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
原生JS中应该禁止出现的写法
2021/05/05 Javascript
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python