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 相关文章推荐
javascript中window.event事件用法详解
Dec 11 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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 dirname()与__FILE__常量的应用
2013/06/24 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP微信支付开发实例
2016/06/22 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
Python文件去除注释的方法
2015/05/25 Python
python实现识别相似图片小结
2016/02/22 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python开发的HTTP库requests详解
2017/08/29 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python opencv之SURF算法示例
2018/02/24 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
如何使用python操作vmware
2019/07/27 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
对python中list的五种查找方法说明
2020/07/13 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
工程力学硕士生的自我评价范文
2013/11/16 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle