<!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. 通过存储过程创建SQL作业

    USE dbNameGO/****** Object: StoredProcedure [dbo].[usp_Createjob] Script Date: 03/26/2014 14:36:30 * ...

  2. React组件绑定this的四种方式

    题图 By HymChu From lnstagram 用react进行开发组件时,我们需要关注一下组件内部方法this的指向,react定义组件的方式有两种,一种为函数组件,一种为类组件,类组件内部 ...

  3. 同时执行2条不同sql

    select * from  a: select *from b; 用分号结束.

  4. HCNP学习笔记之PXE原理详解及实践

    一.PXE简介 PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...

  5. saltstack常用模块

    介绍一些常用的saltstack模块,更多模块参考官方网站 1.跟安装包相关的模块:salt.states.pkg salt.states.pkg.downloaded(name, version=N ...

  6. vsftpd搭建ftp服务，并实现虚拟用户访问

    安装vsftpd服务: yum install vsftpd -y [root@wadeson ~]# rpm -ql vsftpd /etc/logrotate.d/vsftpd /etc/pam. ...

  7. 20145335郝昊 Java学习心得 密码学代码复写

    20145335郝昊 Java学习心得 密码学代码复写 本学期我们学习了现代密码学这门课程,在上课的时候接触到了很多种类型的密码体制,对于一些典型很通用的密码体制有自己的学习和设计.不论是从密码体制还 ...

  8. linux input输入子系统分析《四》：input子系统整体流程全面分析

    1      input输入子系统整体流程 本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备 ...

  9. python-内置函数及捕获异常

    eval:把字符串转换成有效表达式 repr:把有效表达式转换成字符串 round(...) round(number[, ndigits]) -> number     Round a num ...

  10. 快速升级openwrt的linux内核版本

    一.分析 要升级openwrt的linux内核版本,关键是要制作内核配置文件 二.内核配置文件制作方法 2.1当前openwrt对应的某个开发板有对应的内核配置文件,比如此时的openwrt的linu ...