<!DOCTYPE html>

<html>

<head>

    <title>Example 05.08 - Basic 3D geometries - Torus</title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 创建一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // 创建渲染器

        var webGLRenderer = new THREE.WebGLRenderer();

        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        webGLRenderer.shadowMapEnabled = true;

        var torus = createMesh(new THREE.TorusGeometry(10, 10, 8, 6, Math.PI * 2));

        // 创建一个游泳圈 把它添加到场景中去

        scene.add(torus);

        // 设置相机的坐标和朝向

        camera.position.x = -30;

        camera.position.y = 40;

        camera.position.z = 50;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 把渲染之后的效果放到DOM元素中去

        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        var step = 0;

        var controls = new function () {

            this.radius = torus.children[0].geometry.parameters.radius;

            this.tube = torus.children[0].geometry.parameters.tube;

            this.radialSegments = torus.children[0].geometry.parameters.radialSegments;

            this.tubularSegments = torus.children[0].geometry.parameters.tubularSegments;

            this.arc = torus.children[0].geometry.parameters.arc;

            this.redraw = function () {

                // remove the old plane

                scene.remove(torus);

                // create a new one

                torus = createMesh(new THREE.TorusGeometry(controls.radius, controls.tube, Math.round(controls.radialSegments), Math.round(controls.tubularSegments), controls.arc));

                // add it to the scene.

                scene.add(torus);

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'radius', 0, 40).onChange(controls.redraw);

        gui.add(controls, 'tube', 0, 40).onChange(controls.redraw);

        gui.add(controls, 'radialSegments', 0, 40).onChange(controls.redraw);

        gui.add(controls, 'tubularSegments', 1, 20).onChange(controls.redraw);

        gui.add(controls, 'arc', 0, Math.PI * 2).onChange(controls.redraw);

        render();

        function createMesh(geom) {

            // 申请两种材料

            var meshMaterial = new THREE.MeshNormalMaterial();

            meshMaterial.side = THREE.DoubleSide;

            var wireFrameMat = new THREE.MeshBasicMaterial();

            wireFrameMat.wireframe = true;

            // 创建多材料物体

            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;

        }

        function render() {

            stats.update();

            torus.rotation.y = step += 0.01;

            requestAnimationFrame(render);

            webGLRenderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init;

</script>

</body>

</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. zabbix 4.0 安装配置

    1.安装软件包: 1.安装软件包: yum install -y httpd mariadb-server mariadb php php-mysql php-gd libjpeg* php-ldap ...

  2. 如何注册iClap账号？

    iClap是一个以产品为基础,集成员工日常所需工具,打通项目工作流程,实现员工自我工作管理.项目管理和企业管理三个体系协同的管理规范系统. 工具/原料 iPhone/Android/浏览器 Teamb ...

  3. 【android】 中文URL资源找不到的问题

    在博客园安卓客户端时,遇到过中文资源找不到的问题 背景:在使用PICASSO的时候,遇到过中文路径加载失败.比如 https://images0.cnblogs.com/news_topic/携程.j ...

  4. 某个php爬虫程序分析--来自wooyun

    乌云漏洞编号: WooYun-2014-68061 作者:hkAssassin 爬虫程序源码: <?php header("content-type:text/html;charset ...

  5. Druid学习之路 （四）Druid的数据采集格式

    作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9715735.html 转载请注明出处 Druid的数据采集格式 Druid可以采集非标准化的数据诸如J ...

  6. hadoop cgroup+container配置

    配置container-executor.cfg vim etc/hadoop/container-executor.cfg yarn.nodemanager.linux-container-exec ...

  7. 20145302张薇《Java程序设计》实验五报告

    20145302张薇 实验五:Java网络编程及安全 实验内容 掌握Socket程序的编写: 掌握密码技术的使用: 设计安全传输系统. 实验要求 基于Java Socket实现安全传输 基于TCP实现 ...

  8. 20145324 《Java程序设计》第9周学习总结

    20145324 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 1.JDBC是java联机数据库的标准规范.它定义了一组标准类与接口,标准API中的接口会有数据库厂商操作 ...

  9. Python Matplotlib简易教程【转】

    本文转载自:https://blog.csdn.net/Notzuonotdied/article/details/77876080 详情请见:Matplotlib python 数据可视化神器 简单 ...

  10. linux之磁盘配额(quota)使用方法（转）

    1.什么是quota 简单的说就是限制用户对磁盘空间的使用量. 因为Linux是多用户多任务的操作系统,许多人共用磁盘空间,为了合理的分配磁盘空间,于是就有了quota的出现. 2.quota的用途  ...