<!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. Jquery each循环用法小结

    var str = res.ZhaoPian; var piclist = str.substring(0, str.length - 1).split(','); $.each(piclist, f ...

  2. XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017　Problem F. Matrix Game

    题目: Problem F. Matrix GameInput file: standard inputOutput file: standard inputTime limit: 1 secondM ...

  3. docker for spark

    项目需求,有一个spark-streaming的程序,读kafka的数据,需要构建一个不使用hadoop的spark 以下建立的镜像参考网络,可以稍加修改就可以使用不同的版本. 可单独启动master ...

  4. java中的重量级与轻量级概念

    首先轻量级与重量级是一个相对的概念,主要是对应用框架使用方便性和所提供服务特性等方面做比较的. 比方说EJB就是一个重量级的框架,因为它对所编写的代码有限制,同时它也提供分布式等复杂的功能. 相比之下 ...

  5. CF1153E Serval and Snake(交互题)

    题目 CF1153E Serval and Snake 很有意思的一道交互题 做法 我们观察到,每次查询一行,当这一行仅包含一端是返回的答案是奇数 根据这个性质查询每一行每一列,我们大体能知道两端的位 ...

  6. webform CustomValidator

    https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.customvalidator?view=netframew ...

  7. springMVC注解的入门案例

    1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=&qu ...

  8. 关于Visual Studio 2010自动添加头部注释信息

    作为一个万年潜水党,不关这一篇文章技术含量如何,也算是一个好的开始吧.   在日常的开发中我们经常需要为类库添加注释和版权等信息,这样我们就需要每次去拷贝粘贴同样的文字,为了减少这种重复性的工作,我们 ...

  9. R中去除为NA的行--转载

    下面用实例来说明这两个函数的作用: 这是一个数据框final: gene hsap mmul mmus rnor cfam 1 ENSG00000208234 0 NA NA NA NA 2 ENSG ...

  10. Dive into Spring framework -- 了解基本原理（一）

    在继续我们的分析之前,推荐各位静心来读一下<<Expert_OneOne_J2EE_Design_and_Development>> 第四章, 正如spring BeanFac ...