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); //效果同上
为了形象的显示这些效果，我书写了一个案例：
这个效果是使用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具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
Three.js快速入门教程
引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,
-
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.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie
-
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),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网
-
JS库之Three.js 简易入门教程(详解之一)
开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章
-
Three.js中网格对象MESH的属性与方法详解
前言 本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质.当网格创建好之后,我们就可以将它添加到场景中并进行渲染.网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果. 如下: 还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中. mesh对象的前三个属性position,rotation和scal
-
Node.js 中的 fs 模块与Path模块方法详解
概述: 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步版本. 文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参. 回调函数的构成由调用的异步方法所决定,通常情况下回调函数的第一个形参为返回的错误信息. 如果异步操作执行正确并返回,该错误形参则为null或者undefined.如果使用的是同步版本的操作方法,一旦出现错误,会以通常的抛出错误的形式返回
-
基于js对象,操作属性、方法详解
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很
-
JS实现给对象动态添加属性的方法
本文实例讲述了JS实现给对象动态添加属性的方法.分享给大家供大家参考,具体如下: 在工作用要用到给jd对象动态添加属性的要求,在网上找到了一种解决方式,实例如下: 1.demo var aa="maker"; var bb=123; var lists={}; eval("lists."+aa+"="+bb); eval('('+"lists."+aa+"="+bb+')'); console.log(li
-
浅谈js内置对象Math的属性和方法(推荐)
属性: constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 E 欧拉常量,自然对数的底(约等于2.718) LN2 2的自然对数(约等于0.693) LN10 10的自然对数(约等于2.302) LOG2E 以2为底的e的对数.(约等于1.442) LOG10E 以10为底的e的对数(约等于0.434) PI ∏的值(约等于3.14159) SQRT1_2 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707) SQRT2 2的平方根(约等于1
-
浅谈JS中的常用选择器及属性、方法的调用
选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="
-
JS中获取 DOM 元素的绝对位置实例详解
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien
-
JS中的Replace()传入函数时的用法详解
replace方法的语法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串.. 废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = "a1ba2b"; var reg = /a.b/g; str = str.replace(reg,func
-
利用JS hash制作单页Web应用的方法详解
前言 本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.何为hash 这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符.通常,我们可以通过location.hash的方式获取哈希值或设置哈希值.当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值. 例如: /** JS方式 **/ lo
-
Vue计算属性与监视属性实现方法详解
目录 一.计算属性 1.插值语法实现 2.通过方法实现 3.通过计算属性 二.监视属性 三.深度监视 一.计算属性 在开发中,可以有这样的需求,在属性(date)中,有fistName和lastName两个属性,需要将两个属性拼接起来,这种需求也很简单,有以下实现方式 1.插值语法实现 直接在body中将两个数据拼接 <div id="root"> 姓:<input type="text" v-model="fistName"&