1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title>Example 05.04 - Basic 2D geometries - Cube</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 webGLRenderer = new THREE.WebGLRenderer();
  38.         webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  39.         webGLRenderer.setSize(window.innerWidth, window.innerHeight);
  40.         webGLRenderer.shadowMapEnabled = true;
  41.  
  42.         var cube = createMesh(new THREE.BoxGeometry(10, 10, 10, 1, 1, 1));
  43.         // 把正方体添加到场景中去
  44.         scene.add(cube);
  45.  
  46.         // 设置相机的坐标和朝向
  47.         camera.position.x = -20;
  48.         camera.position.y = 30;
  49.         camera.position.z = 40;
  50.         camera.lookAt(new THREE.Vector3(10, 0, 0));
  51.  
  52.         // 添加聚光灯
  53.         var spotLight = new THREE.SpotLight(0xffffff);
  54.         spotLight.position.set(-40, 60, -10);
  55.         scene.add(spotLight);
  56.  
  57.         // 把渲染的结果放到DOM元素中去
  58.         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
  59.  
  60.         var step = 0;
  61.  
  62.         var controls = new function () {
  63.  
  64.             this.width = cube.children[0].geometry.parameters.width;
  65.             this.height = cube.children[0].geometry.parameters.height;
  66.             this.depth = cube.children[0].geometry.parameters.depth;
  67.  
  68.             this.widthSegments = cube.children[0].geometry.parameters.widthSegments;
  69.             this.heightSegments = cube.children[0].geometry.parameters.heightSegments;
  70.             this.depthSegments = cube.children[0].geometry.parameters.depthSegments;
  71.  
  72.             this.redraw = function () {
  73.                 // remove the old plane
  74.                 scene.remove(cube);
  75.                 // create a new one
  76.                 cube = createMesh(new THREE.BoxGeometry(controls.width, controls.height, controls.depth, Math.round(controls.widthSegments), Math.round(controls.heightSegments), Math.round(controls.depthSegments)));
  77.                 // add it to the scene.
  78.                 scene.add(cube);
  79.             };
  80.         };
  81.  
  82.         var gui = new dat.GUI();
  83.         gui.add(controls, 'width', 0, 40).onChange(controls.redraw);
  84.         gui.add(controls, 'height', 0, 40).onChange(controls.redraw);
  85.         gui.add(controls, 'depth', 0, 40).onChange(controls.redraw);
  86.         gui.add(controls, 'widthSegments', 0, 10).onChange(controls.redraw);
  87.         gui.add(controls, 'heightSegments', 0, 10).onChange(controls.redraw);
  88.         gui.add(controls, 'depthSegments', 0, 10).onChange(controls.redraw);
  89.         render();
  90.  
  91.         function createMesh(geom) {
  92.  
  93.             // 两种材质
  94.             var meshMaterial = new THREE.MeshNormalMaterial();
  95.             meshMaterial.side = THREE.DoubleSide;
  96.             var wireFrameMat = new THREE.MeshBasicMaterial();
  97.             wireFrameMat.wireframe = true;
  98.  
  99.             // 混合材质
  100.             var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
  101.  
  102.             return mesh;
  103.         }
  104.  
  105.         function render() {
  106.             stats.update();
  107.  
  108.             cube.rotation.y = step += 0.01;
  109.             requestAnimationFrame(render);
  110.             webGLRenderer.render(scene, camera);
  111.         }
  112.  
  113.         function initStats() {
  114.  
  115.             var stats = new Stats();
  116.             stats.setMode(0); // 0: fps, 1: ms
  117.             stats.domElement.style.position = 'absolute';
  118.             stats.domElement.style.left = '0px';
  119.             stats.domElement.style.top = '0px';
  120.  
  121.             document.getElementById("Stats-output").appendChild(stats.domElement);
  122.  
  123.             return stats;
  124.         }
  125.     }
  126.     window.onload = init;
  127. </script>
  128. </body>
  129. </html>

　　

31-THREE.JS 正方体的更多相关文章

  1. 31.Node.js 常用工具 util

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html util 是一个Node.js 核心模块,提供常用函数的集合,用于弥补核心JavaS ...

  2. 前端必备的js知识点（转载）

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  3. chenxi的js学习笔记

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的. 2.js是一门什么样的语言及特点? j ...

  4. NodeJs>------->>第三章：Node.js基础知识

    第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info  方法 console.log(" node app1.js 1> ...

  5. vs2010中关于HTML控件与服务器控件分别和js函数混合使用的问题

    此文档解决以下问题: 1.在.cs文件中如何访问html控件? 在html控件中添加属性runat="server"即可 2.在html控件中,如何调用js函数? 在html控件中 ...

  6. Node.js进程通信模块child_process

    前言 Node.js是一种单线程的编程模型,对Node.js的赞美和诟病的也都是因为它的单线程模型,所有的任务都在一个线程中完成(I/O等例外).单线程模型,不仅让代码非常简洁,更是直接避免了线程调度 ...

  7. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

  8. 基于express框架的应用程序骨架生成器介绍

    作者:zhanhailiang 日期:2014-11-09 本文将介绍怎样使用express-generator工具高速生成基于express框架的应用程序骨架: 1. 安装express-gener ...

  9. Best JavaScript Tools for Developers

    JavaScript solves multiple purposes; it helps you to create interactive websites, web applications, ...

随机推荐

  1. 4.Data Types in the mongo Shell-官方文档摘录

    总结: 1.MongoDB 的BSON格式支持额外的数据类型 2 Date 对象内部存储64位字节存整数,存储使用NumberLong()这个类来存,使用NumberInt()存32位整数,128位十 ...

  2. Linux下如何安装Anaconda？

    下载 从https://repo.continuum.io/archive/index.html上下载对应版本的Anaconda. 或者到官网:https://www.anaconda.com/dow ...

  3. 解释一下python中的成员运算符

    通过成员运算符‘in’ 和 ‘not in’,我们可以确认一个值是否是另一个值的成员 print('me' in 'disappointment')#True print('us' in 'disap ...

  4. 第七课 GDB调试 (下)

    1序言: 通过前面一节第六课 GDB调试 (下)文章,可以掌握理解了gdb调试:怎么启动.运行,打断点.查看变量.甚至改变变量等的知识,今天来大概讲解下调试bug的类型. 2知识点: 2.1 就像之前 ...

  5. Mysql数据表字段设置了默认值，插入数据后默认字段的值却为null，不是默认值

    我将mysql的数据表的某个字段设置了默认值为1,当向该表插入数据的时候该字段的值不是默认值,而是null. 我的错误原因: 对数据库的操作我使用了持久化工具mybatis,插入数据的时候插入的是整个 ...

  6. springmvc 自定义拦截器

    <mvc:interceptors> <!-- 配置自定义的拦截器 --> <bean class="com.atguigu.springmvc.interce ...

  7. PAT 天梯赛 L1-019. 谁先倒 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-019 AC代码 #include <iostream> #include <cstdio&g ...

  8. LightOJ - 1236 (唯一分解定理)

    题意:求有多少对数对(i,j)满足lcm(i,j) = n,1<=i<=j, 1<=n<=1e14. 分析:根据整数的唯一分解定理,n可以分解为(p1^e1)*(p2^e2)* ...

  9. 分组函数NTILE函数

    这个分组函数 并不是 group by的分组.

  10. 20165101刘天野 2018-2019-2《网络对抗技术》Exp5 MSF基础应用

    目录 20165101刘天野 2018-2019-2<网络对抗技术>Exp5 MSF基础应用 1. 实践内容 1.1一个主动攻击实践,如ms08_067; (1分) 1.2 一个针对浏览器 ...