1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title></title>
  7.     < <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
  8.     <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
  9.     <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             overflow: hidden;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <div id="Stats-output">
  20. </div>
  21. <div id="WebGL-output">
  22. </div>
  23. <script type="text/javascript">
  24.  
  25.     // 初始化
  26.     function init() {
  27.  
  28.         var stats = initStats();
  29.  
  30.         // 创建一个场景
  31.         var scene = new THREE.Scene();
  32.  
  33.         // 创建一个相机
  34.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  35.  
  36.         // 创建一个渲染器
  37.         var renderer = new THREE.WebGLRenderer();
  38.  
  39.         renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  40.         renderer.setSize(window.innerWidth, window.innerHeight);
  41.         renderer.shadowMapEnabled = true;
  42.  
  43.         // 创建一个地板
  44.         var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
  45.         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  46.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  47.         plane.receiveShadow = true;
  48.  
  49.         // 旋转地板到水平位置
  50.         plane.rotation.x = -0.5 * Math.PI;
  51.         plane.position.x = 0;
  52.         plane.position.y = 0;
  53.         plane.position.z = 0;
  54.  
  55.         // 将地板添加到场景中去
  56.         scene.add(plane);
  57.  
  58.         // 旋转相机对准 new THREE.Vector3(5, 0, 0)
  59.         camera.position.x = -20;
  60.         camera.position.y = 25;
  61.         camera.position.z = 20;
  62.         camera.lookAt(new THREE.Vector3(5, 0, 0));
  63.  
  64.         // 添加聚光灯
  65.         var spotLight = new THREE.SpotLight(0xffffff);
  66.         spotLight.position.set(-40, 60, 10);
  67.         spotLight.castShadow = true;
  68.         scene.add(spotLight);
  69.  
  70.         // 渲染成功后添加到DOM元素中去
  71.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  72.  
  73.         var step = 0;
  74.  
  75.         //利用点 和面创建物体
  76.         var vertices = [
  77.             new THREE.Vector3(1, 3, 1),
  78.             new THREE.Vector3(1, 3, -1),
  79.             new THREE.Vector3(1, -1, 1),
  80.             new THREE.Vector3(1, -1, -1),
  81.             new THREE.Vector3(-1, 3, -1),
  82.             new THREE.Vector3(-1, 3, 1),
  83.             new THREE.Vector3(-1, -1, -1),
  84.             new THREE.Vector3(-1, -1, 1)
  85.         ];
  86.  
  87.         //three里面的正方体 12 个面 把每个面分成两个三角形
  88.         var faces = [
  89.             new THREE.Face3(0, 2, 1),
  90.             new THREE.Face3(2, 3, 1),
  91.             new THREE.Face3(4, 6, 5),
  92.             new THREE.Face3(6, 7, 5),
  93.             new THREE.Face3(4, 5, 1),
  94.             new THREE.Face3(5, 0, 1),
  95.             new THREE.Face3(7, 6, 2),
  96.             new THREE.Face3(6, 3, 2),
  97.             new THREE.Face3(5, 7, 0),
  98.             new THREE.Face3(7, 2, 0),
  99.             new THREE.Face3(1, 3, 4),
  100.             new THREE.Face3(3, 6, 4),
  101.         ];
  102.  
  103.         var geom = new THREE.Geometry();
  104.         geom.vertices = vertices;
  105.         geom.faces = faces;
  106.         //computeFaceNormals方法重新计算三角面对象的法线向量,计算法线向量，影响的是face数组中每个元素的normal属性，一个face只有1个
  107.         geom.computeFaceNormals();
  108.  
  109.         var materials = [
  110.             new THREE.MeshLambertMaterial({opacity: 0.6, color: 0x44ff44, transparent: true}),
  111.             new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
  112.  
  113.         ];
  114.  
  115.         // THREE.SceneUtils创建一个多材质对象
  116.         var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, materials);
  117.         mesh.children.forEach(function (e) {
  118.             e.castShadow = true
  119.         });
  120. //        mesh.children[0].translateX(0.5);
  121. //        mesh.children[0].translateZ(0.5);
  122.  
  123.         scene.add(mesh);
  124.  
  125.         //添加控制
  126.         function addControl(x, y, z) {
  127.             var controls = new function () {
  128.                 this.x = x;
  129.                 this.y = y;
  130.                 this.z = z;
  131.             };
  132.  
  133.             return controls;
  134.         }
  135.  
  136.         //多个控制点
  137.         var controlPoints = [];
  138.         controlPoints.push(addControl(3, 5, 3));
  139.         controlPoints.push(addControl(3, 5, 0));
  140.         controlPoints.push(addControl(3, 0, 3));
  141.         controlPoints.push(addControl(3, 0, 0));
  142.         controlPoints.push(addControl(0, 5, 0));
  143.         controlPoints.push(addControl(0, 5, 3));
  144.         controlPoints.push(addControl(0, 0, 0));
  145.         controlPoints.push(addControl(0, 0, 3));
  146.  
  147.         var gui = new dat.GUI();
  148.         gui.add(new function () {
  149.  
  150.             //克隆物体
  151.             this.clone = function () {
  152.  
  153.                 var clonedGeometry = mesh.children[0].geometry.clone();
  154.                 var materials = [
  155.                     new THREE.MeshLambertMaterial({opacity: 0.6, color: 0xff44ff, transparent: true}),
  156.                     new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true})
  157.  
  158.                 ];
  159.  
  160.                 var mesh2 = THREE.SceneUtils.createMultiMaterialObject(clonedGeometry, materials);
  161.                 mesh2.children.forEach(function (e) {
  162.                     e.castShadow = true
  163.                 });
  164.  
  165.                 mesh2.translateX(5);
  166.                 mesh2.translateZ(5);
  167.                 mesh2.name = "clone";
  168.                 scene.remove(scene.getChildByName("clone"));
  169.                 scene.add(mesh2);
  170.  
  171.             }
  172.         }, 'clone');
  173.  
  174.         for (var i = 0; i < 8; i++) {
  175.  
  176.             f1 = gui.addFolder('Vertices ' + (i + 1));
  177.             f1.add(controlPoints[i], 'x', -10, 10);
  178.             f1.add(controlPoints[i], 'y', -10, 10);
  179.             f1.add(controlPoints[i], 'z', -10, 10);
  180.  
  181.         }
  182.  
  183.         render();
  184.  
  185.         function addCube() {
  186.  
  187.         }
  188.  
  189.         function render() {
  190.             stats.update();
  191.  
  192.             var vertices = [];
  193.             for (var i = 0; i < 8; i++) {
  194.                 vertices.push(new THREE.Vector3(controlPoints[i].x, controlPoints[i].y, controlPoints[i].z));
  195.             }
  196.  
  197.             mesh.children.forEach(function (e) {
  198.                 e.geometry.vertices = vertices;
  199.                 e.geometry.verticesNeedUpdate = true;
  200.                 e.geometry.computeFaceNormals();
  201.             });
  202.  
  203.             requestAnimationFrame(render);
  204.             renderer.render(scene, camera);
  205.         }
  206.  
  207.         function initStats() {
  208.  
  209.             var stats = new Stats();
  210.  
  211.             stats.setMode(0); // 0: fps, 1: ms
  212.             stats.domElement.style.position = 'absolute';
  213.             stats.domElement.style.left = '0px';
  214.             stats.domElement.style.top = '0px';
  215.  
  216.             document.getElementById("Stats-output").appendChild(stats.domElement);
  217.  
  218.             return stats;
  219.         }
  220.     }
  221.     window.onload = init
  222.  
  223. </script>
  224. </body>
  225. </html>

08-THREE.JS 点面创建物体，克隆物体，多材质物体的更多相关文章

  1. JavaScript DOM实战：创建和克隆元素

    DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...

  2. js函数的创建

    1.js 函数的创建有几种方式: 1.1  直接声明 1.2 创建匿名函数,然后赋值 1.3 声明函数,然后赋值给变量 1.4 使用1.3 得到的变量再赋值给变量 1.5 使用函数对象创建函数 < ...

  3. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  4. Gerrit 服务器入门使用-项目的创建与克隆

    Gerrit 服务器入门使用-项目的创建与克隆 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.创建克隆项目 1>.点击"BROWSE" 2>.点 ...

  5. react快速上手一（使用js语法，创建虚拟DOM元素）

    1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...

  6. 本页面用来演示如何通过JS SDK，创建完整的QQ登录流程，并调用openapi接口

    QQ登录将用户信息存储在cookie中,命名为__qc__k ,请不要占用 __qc__k : 1) :: 在页面顶部引入JS SDK库: 将“js?”后面的appid参数(示例代码中的:100229 ...

  7. JAVA 对象的创建与克隆

    目录 一.对象的4种创建方式 二.通过new创建对象 三.反射 四.克隆对象 浅拷贝 深拷贝 五.反序列化 六.补充 一.对象的4种创建方式 new 创建 反射 克隆 反序列化 二.通过new创建对象 ...

  8. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  9. Three.js开发指南---创建，加载高级网格和几何体（第八章）

    本章的主要内容: 一, 通过Three.js自带的功能来组合和合并已有的几何体,创建出新的几何体 二, 从外部资源中加载网格和几何体 1 前面的章节中,我们学习到,一个几何体创建的网格,想使用多个材质 ...

随机推荐

  1. Hexo+yilia添加helper-live2d插件宠物动画，很好玩的哦~~

    个人主页:https://www.yuehan.online 现在博客:www.wangyurui.top 安装模块: 博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件 操作: ...

  2. Numpy用于数组的文件输入输出

    这一章比较简单,内容也比较少.而且对于文件的读写,还是使用pandas比较好.numpy主要是读写文本数据和二进制数据的. 将数组以二进制的格式保存到硬盘上 主要的函数有numpy.save和nump ...

  3. 流量分析系统----讲解-echarts模拟迁移(结合china.js)

    百度 Echarts 地图->模拟迁徙,实现自动切换地图 小航哥注释: 1.本文主要是把模拟迁移的流程讲了一遍,讲的很好.具体实现参考航哥这篇随笔“流量分析系统----实现-echarts模拟迁 ...

  4. 如何成为专业的PHP开发者

    如何才能成为一名专业的PHP开发者?资深Web开发者Bruno Skvorc在其博客上分享了一些心得. 当阅读各种和PHP相关的博客.Quora问题.Google+社区.资讯和杂志的时候,Bruno ...

  5. IBM的SOA方法论之一——五个切入点和八个场景

    一.什么是SOA: 面向服务的体系结构(Service-Oriented Architecture,SOA)是一种 IT 体系结构风格,支持将您的业务转换为一组相互链接的服务或可重复业务任务,可在需要 ...

  6. flex label 换行

    Flex中label换行有两种情况 在AS中赋值: label.text="Online\r\nResources" 在mxml中赋值: text="Online Res ...

  7. SpringBoot整合集成redis

    Redis安装:https://www.cnblogs.com/zwcry/p/9505949.html 1.pom.xml <project xmlns="http://maven. ...

  8. 主攻ASP.NET MVC4.0之重生:使用反射获取Controller的ActionResult

    示例代码 public ActionResult TypeOfForName() { Type typeinfo = typeof(CustomerClassController); //typeof ...

  9. 超酷Loading进度条

    在线演示 本地下载

  10. 使用awk来提取内容

    1.提取gff文件中的HLA基因的相关bed文件. gff的格式: zcat *gz|gawk 'BGIN{FS="\t";OFS="\t"}$3==" ...