1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title>Example 05.08 - Basic 3D geometries - Torus</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 torus = createMesh(new THREE.TorusGeometry(10, 10, 8, 6, Math.PI * 2));
  43.         // 创建一个游泳圈 把它添加到场景中去
  44.         scene.add(torus);
  45.  
  46.         // 设置相机的坐标和朝向
  47.         camera.position.x = -30;
  48.         camera.position.y = 40;
  49.         camera.position.z = 50;
  50.         camera.lookAt(new THREE.Vector3(10, 0, 0));
  51.  
  52.         // 把渲染之后的效果放到DOM元素中去
  53.         document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
  54.  
  55.         var step = 0;
  56.  
  57.         var controls = new function () {
  58.  
  59.             this.radius = torus.children[0].geometry.parameters.radius;
  60.             this.tube = torus.children[0].geometry.parameters.tube;
  61.             this.radialSegments = torus.children[0].geometry.parameters.radialSegments;
  62.             this.tubularSegments = torus.children[0].geometry.parameters.tubularSegments;
  63.             this.arc = torus.children[0].geometry.parameters.arc;
  64.  
  65.             this.redraw = function () {
  66.                 // remove the old plane
  67.                 scene.remove(torus);
  68.                 // create a new one
  69.  
  70.                 torus = createMesh(new THREE.TorusGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), controls.arc));
  71.                 // add it to the scene.
  72.                 scene.add(torus);
  73.             };
  74.         };
  75.  
  76.         var gui = new dat.GUI();
  77.         gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);
  78.         gui.add(controls, 'tube', 0, 40).onChange(controls.redraw);
  79.         gui.add(controls, 'radialSegments', 0, 40).onChange(controls.redraw);
  80.         gui.add(controls, 'tubularSegments', 1, 20).onChange(controls.redraw);
  81.         gui.add(controls, 'arc', 0, Math.PI * 2).onChange(controls.redraw);
  82.  
  83.         render();
  84.  
  85.         function createMesh(geom) {
  86.  
  87.             // 申请两种材料
  88.             var meshMaterial = new THREE.MeshNormalMaterial();
  89.             meshMaterial.side = THREE.DoubleSide;
  90.             var wireFrameMat = new THREE.MeshBasicMaterial();
  91.             wireFrameMat.wireframe = true;
  92.  
  93.             // 创建多材料物体
  94.             var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);
  95.  
  96.             return mesh;
  97.         }
  98.  
  99.         function render() {
  100.             stats.update();
  101.  
  102.             torus.rotation.y = step += 0.01;
  103.  
  104.             requestAnimationFrame(render);
  105.             webGLRenderer.render(scene, camera);
  106.         }
  107.  
  108.         function initStats() {
  109.  
  110.             var stats = new Stats();
  111.             stats.setMode(0); // 0: fps, 1: ms
  112.             stats.domElement.style.position = 'absolute';
  113.             stats.domElement.style.left = '0px';
  114.             stats.domElement.style.top = '0px';
  115.  
  116.             document.getElementById("Stats-output").appendChild(stats.domElement);
  117.  
  118.             return stats;
  119.         }
  120.     }
  121.     window.onload = init;
  122. </script>
  123. </body>
  124. </html>

　　

34-THREE.JS 游泳圈的更多相关文章

  1. 34、JS/AJAX

      1)回顾JS中核心内容 2)了解WEB1.0和WEB2.0时代的技术与特点 3)理解AJAX的产生背景.工作原理与特点 4)掌握AJAX常用API及应用   声明:服务端使用Servlet技术 一 ...

  2. 34.node.js之Url & QueryString模块

    转自:https://i.cnblogs.com/posts?categoryid=1132005&page=6//引用 var url = require("url"); ...

  3. 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    写在前面 参考答案及资源在看云平台发布,如果大家想领取资源以及查看答案,可直接前去购买.一次购买永久可看,文档长期更新!有什么意见与建议欢迎您及时联系作者或留言回复! 文档描述 本文是关注微信小程序的 ...

  4. JS面试题第一弹

    1.javascript的typeof返回哪些数据类型  alert(typeof [1, 2]); //object     alert(typeof 'leipeng'); //string   ...

  5. js总结体会

    1.表单元素提交之后(不刷新)数据还是会存在的,想要提交之后清除数据可以在ajax提交数据后,用reset()方法清除数据. 2.js中怎么判断哪个单选控件被选中了呢,即表单控件被选中哪些属性发生了变 ...

  6. MongoDB学习笔记二—Shell操作

    数据类型 MongoDB在保留JSON基本键/值对特性的基础上,添加了其他一些数据类型. null null用于表示空值或者不存在的字段:{“x”:null} 布尔型 布尔类型有两个值true和fal ...

  7. 40 个让你的网站更加友好的 jQuery 插件

    一个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个jQuery插件是一个基本的可以扩充jQuery 原型对 ...

  8. 40个让你的网站屌到爆的jQuery插件

    一 个插件的基本功能是执行一个含有元素集合的函数数组.每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass().一个 jQuery插件是一个基本的可以扩充jQuery 原 ...

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

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

随机推荐

  1. react.js 引用 NavBar 报错svg-spite-loader

    Navbar   iconName="false"  配置 改为  iconName={this.props.bool}

  2. Android-服务中监听电源键和Home键的广播、在锁屏下仍然工作的方法

    Android-服务中监听电源键和Home键的广播  http://blog.csdn.net/u014657752/article/details/49512485 Android开发之如何监听让服 ...

  3. M4中遇到的问题

    MDK5的安装以及破解 这里遇到了一个问题,PDF上并没有扯个界面我就先截了个图然后点安装,后来看来这其中并没有什么问题 在这里就会出现卡死的情况,也就是说并不能从这个界面上下载两个相应的安装包 在M ...

  4. 20145312 《Java程序设计》第八周学习总结

    20145312 <Java程序设计>第八周学习总结 学习笔记 Chapter 15时间与日期 15.1 日志 15.1.1 日志API简介 java.util.logging包提供了日志 ...

  5. 解读：计数器Counter

    Counters: 44 File System Counters FILE: Number of bytes read=655771325 FILE: Number of bytes written ...

  6. JAVA链接数据库

    链接:http://www.cnblogs.com/centor/p/6142775.html 开发工具: MyEclipse MySQL JDBC驱动:mysql-connector-java-5. ...

  7. Oracle18c创建不带C##的用户

    18c数据库分两种数据库CDB(容器数据库).PDB(可插拔数据库) 数据库安装完成之后,默认是CDB 创建一个用户,必须要用C##开头,但使用PDB没有这个限制 1. 先查看PDB数据库servic ...

  8. kylin入门到实战：cube详述

    版权申明:转载请注明出处. 文章来源:http://bigdataer.net/?p=306 排版乱?请移步原文获得更好的阅读体验 1.什么是cube? cube是所有dimession的组合,每一种 ...

  9. [PyTorch]PyTorch/python常用语法/常见坑点

    目录 1. make_grid() 2. join与os.path.join() 3. 读文件写文件 4. json操作 5. tensorboard使用 6. python shutil.move ...

  10. 解题报告：51nod 加农炮

    2017-10-07 16:15:16 writer:pprp 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题   一个长度为M的正整 ...