首页 / JAVASCRIPT / Three.js利用顶点绘制立方体方法

Three.js利用顶点绘制立方体方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Three.js利用顶点绘制立方体方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6833字，纯文字阅读大概需要10分钟。

内容图文

本文主要给大家介绍了关于Three.js利用顶点绘制立方体的方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。希望能帮助到大家。

前言

之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置，法向量，绘制下标什么的。虽然复杂，但是毕竟原生，性能没得说。

three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型，下面话不多说了，来一起看看详细的介绍吧。

下面是我的个人一个案例。

首先，我创建了一个空白的形状：

  //立方体
  var cubeGeometry = new THREE.Geometry();

立方体的形状如下：

  // 创建一个立方体
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3

然后添加了立方体的顶点，一共8个

  //创建立方体的顶点
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;

接着通过顶点的坐标生成了立方体的面

  //创建立方的面
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;

在这里需要注意：

（1）面是由三个顶点组成的一个三角形面，也是WebGL的实现面的方式。如果需要一个长方形，那就需要由两个三角形组合而成。

（2）如果要绘制的面是朝向相机的，那这个面的顶点的书写方式是逆时针绘制的，比如图上模型的第一个面的添加里面书写的是(0,1,2)。

（3）如果能使模型有灯光的效果，还需要设置法向量，让three.js自动生成即可，如下

  //生成法向量
  cubeGeometry.computeFaceNormals();

当前的这些步骤只是生成了形状，还需要和以前一样设置一个纹理，再通过THTEE.Mesh()方法生成网格

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

这样就实现了一个立方体的绘制：

Three.js利用顶点绘制立方体方法 - 文章图片

全部代码如下：

<!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 gui;
 function initGui() {
  //声明一个保存需求修改的相关数据的对象
  gui = {
   lightY: 30, //灯光y轴的位置
   cubeX: 25, //立方体的x轴位置
   cubeY: 10, //立方体的x轴位置
   cubeZ: -5 //立方体的z轴的位置
  };
  var datGui = new dat.GUI();
  //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
  datGui.add(gui, "lightY", 0, 100);
  datGui.add(gui, "cubeX", -30, 30);
  datGui.add(gui, "cubeY", -30, 30);
  datGui.add(gui, "cubeZ", -30, 30);
 }

 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);

  // 创建一个立方体
  // v6----- v5
  // /|  /|
  // v1------v0|
  // | |  | |
  // | |v7---|-|v4
  // |/  |/
  // v2------v3

  //立方体
  var cubeGeometry = new THREE.Geometry();

  //创建立方体的顶点
  var vertices = [
   new THREE.Vector3(10, 10, 10), //v0
   new THREE.Vector3(-10, 10, 10), //v1
   new THREE.Vector3(-10, -10, 10), //v2
   new THREE.Vector3(10, -10, 10), //v3
   new THREE.Vector3(10, -10, -10), //v4
   new THREE.Vector3(10, 10, -10), //v5
   new THREE.Vector3(-10, 10, -10), //v6
   new THREE.Vector3(-10, -10, -10) //v7
  ];

  cubeGeometry.vertices = vertices;

  //创建立方的面
  var faces=[
   new THREE.Face3(0,1,2),
   new THREE.Face3(0,2,3),
   new THREE.Face3(0,3,4),
   new THREE.Face3(0,4,5),
   new THREE.Face3(1,6,7),
   new THREE.Face3(1,7,2),
   new THREE.Face3(6,5,4),
   new THREE.Face3(6,4,7),
   new THREE.Face3(5,6,1),
   new THREE.Face3(5,1,0),
   new THREE.Face3(3,2,7),
   new THREE.Face3(3,7,4)
  ];

  cubeGeometry.faces = faces;

  //生成法向量
  cubeGeometry.computeFaceNormals();

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});

  cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  cube.position.x = 25;
  cube.position.y = 5;
  cube.position.z = -5;

  //告诉立方体需要投射阴影
  cube.castShadow = true;

  scene.add(cube);

  //底部平面
  var planeGeometry = new THREE.PlaneGeometry(100, 100);
  var planeMaterial = new THREE.MeshLambertMaterial({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 = 50;
  //设置相机距离原点的最远距离
  controls.maxDistance = 200;
  //是否开启右键拖拽
  controls.enablePan = true;
 }

 function render() {
  renderer.render(scene, camera);
 }

 //窗口变动触发的函数
 function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  render();
  renderer.setSize(window.innerWidth, window.innerHeight);

 }

 function animate() {
  //更新控制器
  render();

  //更新性能插件
  stats.update();

  //更新相关位置
  light.position.y = gui.lightY;
  cube.position.x = gui.cubeX;
  cube.position.y = gui.cubeY;
  cube.position.z = gui.cubeZ;

  controls.update();

  requestAnimationFrame(animate);
 }

 function draw() {
  initGui();
  initRender();
  initScene();
  initCamera();
  initLight();
  initModel();
  initControls();
  initStats();

  animate();
  window.onresize = onWindowResize;
 }
</script>
</html>

内容总结

以上是互联网集市为您收集整理的Three.js利用顶点绘制立方体方法全部内容，希望文章能够帮你解决Three.js利用顶点绘制立方体方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295435.html

来源：【匿名】

【上一篇】JavaScript随机数生成器实现方法【下一篇】javascript 怎么调用php方法

更多 ►

【Three.js利用顶点绘制立方体方法】教程文章相关的互联网学习教程文章

两种动态加载JavaScript文件的方法【代码】【图】

两种动态加载JavaScript文件的方法第一种便是利用ajax方式，第二种是，动静创建一个script标签，配置其src属性，经过把script标签拔出到页面head来加载js，感乐趣的网友可以看下动态加载script到页面大约有俩方法第一种便是利用ajax方式，把script文件代码从背景加载到前台，而后对加载到的内容经过eval()实施代码。第二种是，动静创建一个script标签，配置其src属性，经过把script标签插入到页面head来加载js，相当于正在head中写...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

JavaScript addEventListener()事件监听方法【代码】

文章链接：https://www.cnblogs.com/jc2182/p/11307165.htmladdEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制...

JavaScript辅助方法系列：（1）用正则表达式判断手机号和邮箱【代码】

判断是否为邮箱//jquery验证邮箱 function checkSubmitEmail() {if ($("#email").val() == "") {// $("#confirmMsg").html("<font color=‘red‘>邮箱地址不能为空！</font>");alert("邮箱不能为空!")$("#email").focus();return false;}if (!$("#email").val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {alert("邮箱格式不正确");// $("#confirmMsg").html("<font color=‘red‘>邮箱...

JavaScript常用方法函数收集【代码】

本文中，收集了一些比较常用的Javascript函数，希望对学习JS的朋友们有所帮助。1. 字符串长度截取function cutstr(str, len) {var temp,icount = 0,patrn = /[^\x00-\xff]/，strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break;}}return strre + "..." } 2. 替换全部S...

JavaScript常用方法【代码】

判断运行客户端 function isPhone() {var flag = false;var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];for (var i = 0; i < Agents.length; i++) {if (userAgentInfo.indexOf(Agents[i]) > 0) {flag = true;break;}}return flag;}计算带中文的字符串长度（中文2字符） function getRealLength(str) {str = String(str);var len = str.match(/...

JavaScript------生成Guid方法【代码】

转载：http://blog.csdn.net/limm33/article/details/51536529代码：function newGuid() {var guid = "";for (var i = 1; i <= 32; i++){var n = Math.floor(Math.random()*16.0).toString(16);guid += n;if((i==8)||(i==12)||(i==16)||(i==20))guid += "-";}return guid; } 原文：http://www.cnblogs.com/tianhengblogs/p/7075439.html

javascript调用的一些常用方法

getElementsByName()方法实列:<bordy><from method="post" action="test"><fieldset>　　<legend>颜色</legend>　　<input type="radio" name="radColor" value="red"/>红<br/><fieldset></from><script>var i = document.getElementByName("radColor");</script></body>getElementById()方法这个是DOM定义的第二种方法，它将返回ID特性等于指定元素。列:<div id="div1">你好</div>调用var div = document.getElementByid("div1");...

javascript 行间样式与非行间样式获取方法【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px grey solid;background-color: lightgray;display: inline-block;}</style><script type="text/javascript">window.onload =function(){var oDiv1 = document.getElementsByClassName(‘style001‘)[0];var oDiv2 = document.getElementsByCla...

Javascript 方法大全

原文:Javascript 方法大全一、基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript code goes here 3: </script> 2 隐藏脚本代码 1: <script language=”JavaScript”> 2:  5: </script> 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 1: <noscript> 2: Hello to the non-JavaScript browser. 3: </noscript> 4 链接外部脚本...

javascript实现保留两位小数的多种方法

这篇文章主要介绍了javascript实现保留两位小数的多种方法，如果数字的原本小数位数不到两位，那么缺少的就自动补零，感兴趣的小伙伴们可以参考一下第一种方法：javascript实现保留两位小数一位自动补零代码实例:第一种方法介绍一下如何实现对数字保留两位小数效果，如果数字的原本小数位数不到两位，那么缺少的就自动补零，这个也是为了统一的效果，先看代码实例:?12345678910111213141516functionreturnFloat(value){ varvalue=M...

Jquery第四课 Javascript中this的使用方法【代码】

thiskeyword的使用在JavaScript中使用thiskeyword表示调用方法的对象，这与大部分面向对象语言是一样的。可是因为call、apply、bind等函数的影响。我们能够改变this所代指的对象。使用call或者apply调用的函数中，this代指传入的第一个參数对象，假设传入null或者undefined。则表示全局对象(window)。通过对象调用函数（方法），函数中的this表示调用该函数的对象。单独调用的函数中this表示全局对象。varmyObject={sayHello:func...

javascript 常用方法1

js 常用方法(1)startWithvar startsWith = function (str, regex) {if (regex == undefined || str == undefined || (!str) || (!regex)) {return false;}return str.indexOf(regex) == 0; };测试:console.log(startsWith(‘123abc‘,‘‘));??(2)trimvar trim = function (str) { //if (typeof str === "object") {return str;}if (str == null || str == "" || str == undefined) {return str;}if (typeof str === "number") {re...

JavaScript数组的方法

push() :删除数组的第一个元素,返回删除的值。这里是0 pop() 　:删除数组的最后一个元素，返回删除的值shift() :删除数组的第一个元素,返回删除的值unshift() :把参数加载数组的前面，返回数组的长度splice() :插入/删除或替换数组元素sort() :对数组的元素进行排序reverse() :方法用于颠倒数组中元素的顺序(反序)原文：http://www.cnblogs.com/jyichen/p/5387406.html

javascript 寻找错误方法

这篇博客必须写了，它浪费我了一个上午的时间。为了以后能快速寻找到这方面的错误，节约更多的时间。情况是这样的：我写了一个后台管理系统是引用Marix Admin的，因为这个系统包含了很多很多框架，如jquery，bootstrap，还有它自身的框架系统marix，一大堆的js和css文件。你想引入外面的框架时，就会和原来的库文件产生冲突，还有就是书写的格式问题。针对上面两大问题，解决方案如下：首先查看网站效果，如果html没有显示出来，可...

首页 / JAVASCRIPT / Three.js利用顶点绘制立方体方法

Three.js利用顶点绘制立方体方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【Three.js利用顶点绘制立方体方法】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程