Three.js基础探寻九——网格

　　在学习了几何形状和材质之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（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入门指南》

时间： 2024-12-18 04:49:47

Three.js基础探寻九——网格的相关文章

Three.js基础探寻一

1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器. 这是一个开源项目. 3.环境 找一个喜欢的jsIDE.调试建议使用Chrome或者Firefox. 4.下载 传送门 5.使用 <head> <script type="text/javascript" src="js/three.js&quo

Three.js基础探寻四——立方体、平面与球体

前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 w

Three.js基础探寻十——动画

本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Three.js程序而言,动画的实现是通过在每秒中多次重绘画面实现的. 为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数.FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象. 那么FPS是不是越大越好呢?其实也未必

JavaScript基础--内部类(九)

js的内部类javascript 中本身提供一些,可以直接使用的类,这种类就是内部类,主要有:ObjectArrayMathBooleanStringRegExpDateNumber 1.内部类分类从使用的方式看:分为动态类和静态类(1) 动态类 使用 var对象 = new 动态类() 对象属性|方法 var newdate = new Date(); //显示当前日期 window.alert(newdate.toLocaleString()); (2) 静态类 使用 类名.属性|方法比如:

Web3D编程入门总结——WebGL与Three.js基础介绍

1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ 2 /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ 3 //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 4 //简单例程: 5 //根据To

Bootstrap &lt;基础十九&gt;分页

Bootstrap 支持的分页特性.分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页. 分页(Pagination) 下表列出了 Bootstrap 提供的处理分页的 class. Class 描述 示例代码 .pagination 添加该 class 来在页面上显示分页. <ul class="pagination"> <li><a href="#">«</a><

js基础练习之简易日历

今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月份上面进而改变当前月的背景颜色,并在下面的div中显示这个月的相应信息. 新增js知识:数组,innerHTML js代码: 1 <script type="text/javascript"> 2 var arr= ['一月,新年伊始,該做點什麽呢....','二月,春天來了.

【 js 基础 】Javascript “继承”

是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:"汽车"可以被看作是"交通工具"的一种特例.我们可以定义一个 Vehicle 类和一个 Car 类来对这种关系进行描述.Vehicle 的定义可能包含引擎.载人能力等,也就是 所有交通工具,比如飞机.火车和汽车等都有的通用的功能描述.在对 Car 类进行定义的

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留