iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Three.js中网格对象MESH属性与方法的示例分析
  • 936
分享到

Three.js中网格对象MESH属性与方法的示例分析

2024-04-02 19:04:59 936人浏览 八月长安
摘要

这篇文章给大家分享的是有关Three.js中网格对象MESH属性与方法的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。创建一个网格需要一个几何体,以及一个或多个材质。当网

这篇文章给大家分享的是有关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中网格对象MESH属性与方法的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: Three.js中网格对象MESH属性与方法的示例分析

本文链接: https://www.lsjlt.com/news/78867.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Three.js中网格对象MESH属性与方法的示例分析
    这篇文章给大家分享的是有关Three.js中网格对象MESH属性与方法的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。创建一个网格需要一个几何体,以及一个或多个材质。当网...
    99+
    2024-04-02
  • JavaScript对象、对象属性、对象方法的示例分析
    这篇文章主要介绍JavaScript对象、对象属性、对象方法的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!JavaScript 变量是数据值的容器。 这段代码把一个单一值...
    99+
    2024-04-02
  • JavaScript中RegExp对象属性的示例分析
    这篇文章主要介绍了JavaScript中RegExp对象属性的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。解释每个RegExp对象...
    99+
    2024-04-02
  • WScript.Shell对象SpecialFolders属性的示例分析
    这篇文章主要介绍WScript.Shell对象SpecialFolders属性的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!特殊文件夹名称用于索引该集合以检索所需的特殊文件夹,文档中列出了下面的特殊文件夹:...
    99+
    2023-06-08
  • JavaScript中对象属性和添加新属性的示例分析
    这篇文章主要为大家展示了“JavaScript中对象属性和添加新属性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中对象属性和添加...
    99+
    2024-04-02
  • JSP中对象和范围属性的示例分析
    小编给大家分享一下JSP中对象和范围属性的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JSP技术使用Java编程语言编写类XML的tags和script...
    99+
    2023-06-17
  • Vue路由对象属性.meta $route.matched的示例分析
    这篇文章主要介绍Vue路由对象属性.meta $route.matched的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!$route.fullPath1 路由是:/path...
    99+
    2024-04-02
  • javascript中location对象方法的示例分析
    这篇文章将为大家详细讲解有关javascript中location对象方法的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript是一种什么语言javascript是一种动态类型、弱类...
    99+
    2023-06-14
  • java基础之方法与对象的示例分析
    这篇文章主要介绍java基础之方法与对象的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、方法的基本定义限制条件:本次所讲解的方法指的是在主类中定义,并且由主方法由主方法直接调用。方法是指就是一段可以被重复...
    99+
    2023-06-20
  • Java中类与对象的示例分析
    这篇文章主要介绍Java中类与对象的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!类和对象在面向对象中,类和对象是最基本、最重要的组成单元。类实际上是表示一个客观世界某类群体的一些基本特征抽象。对象就是表示一...
    99+
    2023-06-20
  • C++中类与对象的示例分析
    这篇文章将为大家详细讲解有关C++中类与对象的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言:C 语言是面向过程的,关注的是过程,分析出求解的步骤,通过函数逐步调用解决问题。C++是基于面向对...
    99+
    2023-06-22
  • JavaScript中Class私有属性与私有方法的示例分析
    小编给大家分享一下JavaScript中Class私有属性与私有方法的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!pr...
    99+
    2024-04-02
  • HTML属性与值的示例分析
    这篇文章主要介绍了HTML属性与值的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 1.属性是用来修饰元素的 属性必须位于开始标...
    99+
    2024-04-02
  • C++类与对象的示例分析
    这篇文章主要介绍了C++类与对象的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。类的引入在引入类之前,先来回忆一下C语言中的结构体。结构体是一种自定义类型,可以在其中...
    99+
    2023-06-29
  • Vue之Vue.set动态新增对象属性的示例分析
    这篇文章给大家分享的是有关Vue之Vue.set动态新增对象属性的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。当我们给一个比如props中,或者data中被观测的对象添...
    99+
    2024-04-02
  • jquery对象与DOM对象转化的示例分析
    这篇文章主要介绍了jquery对象与DOM对象转化的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。jquery对象是一个集合,相当于...
    99+
    2024-04-02
  • Java对象结构与对象锁的示例分析
    这篇文章主要介绍Java对象结构与对象锁的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1. Java对象结构Java对象结构包括三部分:对象头、对象体和填充字节,如图所示:对象头又包括三个字段:第一个字段叫...
    99+
    2023-06-29
  • JavaScript中window对象的成员属性实例分析
    这篇文章主要介绍“JavaScript中window对象的成员属性实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中window对象的成员...
    99+
    2024-04-02
  • JavaScript中Array对象基本方法的示例分析
    这篇文章主要为大家展示了“JavaScript中Array对象基本方法的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中Array对...
    99+
    2024-04-02
  • es6中class类静态方法,静态属性,实例属性,实例方法的示例分析
    这篇文章主要为大家展示了“es6中class类静态方法,静态属性,实例属性,实例方法的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“es6中class类...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作