Three.js学习之网格

2024-11-01 22:11:02

前言

　　小编之前发布过关于几何形状和材质，相信大家看过学习之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（Mesh），网格是由顶点、边、面等组成的物体；其他物体包括线段（Line）、骨骼（Bone）、粒子系统（ParticleSystem）等。创建物体需要指定几何形状和材质，其中，几何形状决定了物体的顶点位置等信息，材质决定了物体的颜色、纹理等信息。

1.创建网格

　　在前几篇中，我们学习了如何创建几何形状与材质，而网格的创建非常简单，只要把几何形状与材质传入其构造函数。最常用的物体是网格（Mesh），它代表包含点、线、面的几何体，其构造函数是：

Mesh(geometry, material)

　　下面，让我们通过一个具体的例子了解如何创建网格：

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

　　如果material和geometry之后不会复用的话，也可以合在一起写为：

var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),

 new THREE.MeshLambertMaterial({

  color: 0xffff00

 })

);

scene.add(mesh);

　　添加光照后，得到的效果为：

　　如果不指定material，则每次会随机分配一种wireframe为true的材质，每次刷新页面后的颜色是不同的，一种可能的效果是：

　　源码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.1</title>
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();

   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);

   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
//   var material = new THREE.MeshBasicMaterial({
//    color: 0xffff00,
//    wireframe: true
//   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);

   // render
   renderer.render(scene, camera);
  }
 </script>
</html>

2.修改属性

　　2.1 修改材质

　　除了在构造函数中指定材质，在网格被创建后，也能对材质进行修改：

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

 scene.add(mesh);

mesh.material = new THREE.MeshLambertMaterial({

 color: 0xff0000

});

　　最终显示的颜色是红色：

　　源码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.2</title>
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();

   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);

   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

   mesh.material = new THREE.MeshLambertMaterial({
    color: 0xff0000
   });

   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);

   // render
   renderer.render(scene, camera);
  }
 </script>
</html>

　　2.2 位置、缩放、旋转

　　位置、缩放、旋转是物体三个常用属性。由于THREE.Mesh基础自THREE.Object3D，因此包含scale、rotation、position三个属性。它们都是THREE.Vector3实例，因此修改其值的方法是相同的，这里以位置为例。

　　THREE.Vector3有x、y、z三个属性，如果只设置其中一个属性，则可以用以下方法：

mesh.position.z = 1;

　　如果需要同时设置多个属性，可以使用以下两种方法：

mesh.position.set(1.5, -0.5, 0);

　　或者：

mesh.position = new THREE.Vector3(1.5, -0.5, 0);

　　缩放对应的属性是scale，旋转对应的属性是rotation，具体方法与上例相同，分别表示沿x、y、z三轴缩放或旋转。

　　源码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.3</title>
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();

   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);

   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

   mesh.position.set(1.5, -0.5, 0);
   mesh.position = new THREE.Vector3(1.5, -0.5, 0);
   mesh.position.z = 1;

   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);

   drawAxes(scene);

   // render
   renderer.render(scene, camera);
  }

  function drawAxes(scene) {
   // x-axis
   var xGeo = new THREE.Geometry();
   xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
   var xMat = new THREE.LineBasicMaterial({
    color: 0xff0000
   });
   var xAxis = new THREE.Line(xGeo, xMat);
   scene.add(xAxis);

   // y-axis
   var yGeo = new THREE.Geometry();
   yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
   var yMat = new THREE.LineBasicMaterial({
    color: 0x00ff00
   });
   var yAxis = new THREE.Line(yGeo, yMat);
   scene.add(yAxis);

   // z-axis
   var zGeo = new THREE.Geometry();
   zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
   var zMat = new THREE.LineBasicMaterial({
    color: 0x00ccff
   });
   var zAxis = new THREE.Line(zGeo, zMat);
   scene.add(zAxis);
  }
 </script>
</html>

本文的内容到这就结束了，文章通过详细实例及图片介绍了Three.js中的网格，希望本文对大家学习Three.js有所帮助。

Three.js入门之hello world以及如何绘制线

前言本文属于学习Three.js 的入门教程,文中通过示例介绍了hello world和线的实现,下面话不多说了,来一起看看详细的介绍吧. hello world 首先使用我们先用three.js创建一个立方体的hello world类型的案例. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=
Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件 <场景 A scene.相机a camera.渲染器 a renderer 三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the
Three.js中网格对象MESH的属性与方法详解

前言本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质.当网格创建好之后,我们就可以将它添加到场景中并进行渲染.网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果. 如下: 还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中. mesh对象的前三个属性position,rotation和scal
Three.js快速入门教程

引言本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,
JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章
three.js快速入门【推荐】

Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie
Three.js学习之网格

前言小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网
Three.js学习之正交投影照相机

前言 Three.js是一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器,调试建议使用Chrome或者Firefox. 1.照相机图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机. 2.两种相机的区别与适用范围正交投影: 透视投影: 正交投影就像数学课上画的:而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小. 对于制图.建模软件通常使用正
正则表达式创建方式的区别及编写简单的正则方式(js学习总结)

在字面量方式中,我们//之间包起来的所有的内容都是元字符,有的具有特殊意义,大部分都是代表本身含义的普通的元字符 var name = 'wo'; var reg = /^\d+"+name+"\d+$/ 为了解决上述想在正则里面加上一个变量这样的需求,我们只能使用实例创建的方式了 var reg = new RegExp("^\\d+"+name+"\\d+$","g") 字面量方式和实例创建的方式在正则中的区别? 1.字面
Vue.js学习笔记之 helloworld

Vue.js 是用于构建交互式的 Web 界面的库. Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API. 先来看一个简单的示例,Hello,World! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue学习</title> <script src="/vue/1.0.11/vue.m
类之Prototype.js学习

Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^ 1.类的创建 prototype.js已经封装好了,这个很简单. var Person=Class.create(); 这样就创建了一个Person类,这个Pers
Three.js学习之文字形状及自定义形状

1.文字形状说起3d文字想起了早年word里的一些艺术字: 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例. 引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.TextG
Three.js学习之Lamber材质和Phong材质

前言材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. MeshBasicMaterial:对光照无感,给几何体一种简单的颜色或显示线框. MeshLambertMaterial:这种材质对光照有反应,用于创建暗淡的不发光的物体. MeshPhongMaterial:这种材质对光照也有反应,用于创建金属类明亮的物体. 1.基本材质使用基本材质(BasicMaterial)的物体,渲染后物体的颜色始终为该材质的颜色,而
Three.js学习之几何形状

1.立方体虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 widthSegments:x方向上的分段数(可选,缺省值1) heightSegments:y方向上的分段数(同
JS 学习总结之正则表达式的懒惰性和贪婪性

exec - > 正则的捕获每一次捕获的时候都是先进行默认的匹配,如果没有匹配成功的,捕获的结果是null:只有有匹配的内容我们才能捕获到: 捕获的内容格式 1.捕获到的内容是一个数组,数组中的第一项是当前正则捕获的内容 index:捕获内容在字符串中开始的索引位置 input:捕获的原始字符串 var reg = /\d+/; var str = 'woshi2016ni2017'; var res = reg.exec(str); console.log(res) // ['2016',i
Node.js学习之TCP/IP数据通讯(实例讲解)

1.使用net模块实现基于TCP的数据通讯提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器在Node.js利用net模块创建TCP服务器 var server = net.createServer([options],[connectionListener]) //options:false当TCP服务器接收到客户端发送的一个FIN包时将会回发一个FIN包 true当TCP服务器接收到客户端发送的一个FIN包时将不会回发FIN包,这使得TCP服务器

Three.js学习之网格

相关推荐

随机推荐