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

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

案例查看地址:http://www.wjceo.com/blog/threejs/2018-02-12/24.html

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); //效果同上

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

这个效果是使用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.PCFShadowMapdocument.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};//初始化guivar 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>

22 Three.js的网格对象MESH的属性和方法相关推荐

  1. js如何修改对象的padding属性

    js如何修改对象的padding属性 $(".process_body").css("padding","16px 5px 5px 16px" ...

  2. js给数组添加数据的方式/js 向数组对象中添加属性和属性值

    参考:https://www.cnblogs.com/ayaa/p/14732349.html js给数组添加数据的方式有以下几种: 直接利用数组下标赋值来增加(数组的下标起始值是0) 例,先存在一个 ...

  3. js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数

    js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数 实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...

  4. JS中window对象的opener属性

    JS中window对象的opener属性 JS中window对象的opener属性 window.opener是js中window的一个属性,它返回的是打开当前窗口的窗口对象.如果窗口A弹出一个窗口B ...

  5. dom对象常用的属性和方法有哪些?

    dom对象常用的属性和方法有哪些? 一.总结 一句话总结: 1.document属性和方法:document的属性有head,body之类,方法有各种获取element的方法 2.element的属性 ...

  6. Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)

    一.概述 1.1 发展历程 在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...

  7. selenium提取数据之driver对象的常用属性和方法

    selenium提取数据之driver对象的常用属性和方法 在使用selenium过程中,实例化driver对象后,driver对象有一些常用的属性和方法 driver.page_source 当前标 ...

  8. TextField对象相关的属性和方法总结

    TextField对象相关的属性和方法,内容十分丰富,下面几个表格: 表一 TextField 对象的方法 方法 说明 TextField.addListener 加入接收触发事件如文本域内容变化或滚 ...

  9. null对象访问static属性或方法

    一道非常有趣的基础题 , 如下所示 , main方法正常运行还是报空指针异常呢 public class XUtil {public static int num = 10;public static ...

最新文章

  1. FFmpeg在Windows上通过dshow编解码方式设置为mjpeg并实时显示测试代码
  2. struts2文件下载及 param name=inputNameinputStream/param的理解
  3. SQL SERVER-日期按时区转换
  4. 如何生成 jMeter 结果分析统计图表
  5. C#中'??'符的使用
  6. 超搞笑之仙桃有没有毛?
  7. Openbox-桌面图标设置
  8. Phpmyadmin的一次渗透测试
  9. 人工鱼群算法及其python实现过程
  10. python database is locked_解决SQLite database is locked
  11. wget php mirror 地址,使用wget命令镜像网站
  12. 基于HTML和JS实现的保护海洋动物、保护环境的硬核小游戏
  13. UG NX 12 基准轴
  14. C++-二分查找库函数
  15. 中国本土便利店遍地开花,7-Eleven便利店入华为何“水土不服”?
  16. 自编码器(autoencoder)了解一下
  17. 声学——声源定位阅读笔记
  18. 保险知识(一):五大险种入门
  19. mysql日志备份命令是什么_mysql的常用命令以及备份和恢复
  20. MySQL之悲观锁场景举例

热门文章

  1. 短视频变现详解:抖音变现目前流行的是七种方式之广告营销
  2. nginx启动与关闭
  3. “城市女蛙人”她是全国第一个!水下科技工作者讲述潜水员的故事
  4. matlab 周期0-1,周期为2s的方波信号,在【-1 0】取值为-1,在【0 1】取值为1,利用matlab求该方波信号的傅里叶级数展开各项系数...
  5. C++ 从入门到入门 2-> C/C++ 一般的代码形式
  6. x550网卡linux驱动,Intel英特尔X520/X540/X550/82599系列万兆网卡虚拟功能驱动4.10.2版For Linux(2021年2月1日发布)...
  7. 简单的页面背景设计(001)
  8. redis的成功写入缓存但查不了
  9. 未分配利润与利润表不一致_​未分配利润与利润表不一致的原因有哪些
  10. TinyMCE 富文本编辑器 ━━ 一键排版功能所需正则表达式整理及学习