30-THREE.JS 圆环

<!DOCTYPE html>

<html>

<head>

    <title>Example 05.03 - Basic 2D geometries - Ring</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.RingGeometry());

        // 把形状添加到场景中去

        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.innerRadius = 0;

            this.outerRadius = 50;

            this.thetaSegments = 8;

            this.phiSegments = 8;

            this.thetaStart = 0;

            this.thetaLength = Math.PI * 2;

            this.redraw = function () {

                scene.remove(torus);

                torus = createMesh(new THREE.RingGeometry(controls.innerRadius, controls.outerRadius, controls.thetaSegments, controls.phiSegments, controls.thetaStart, controls.thetaLength));

                scene.add(torus);

            };

        };

        var gui = new dat.GUI();

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

        gui.add(controls, 'outerRadius', 0, 100).onChange(controls.redraw);

        gui.add(controls, 'thetaSegments', 1, 40).step(1).onChange(controls.redraw);

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

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

        gui.add(controls, 'thetaLength', 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>

30-THREE.JS 圆环的更多相关文章

不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...
30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)
用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...
30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)
用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...
30.Node.js 全局对象
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 学习要点: - __filename - __dirname - setTimeou ...
30行js rem弹性布局适配所有分辨率
<script> /* # 按照宽高比例设定html字体, width=device-width initial-scale=1版 # @pargam win 窗口window对象 # @ ...
超棒的30款JS类库和工具
http://www.csdn.net/article/2013-07-01/2816068-best-javascript-libraries-and-tools
前端必备的js知识点（转载）
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点? ...
chenxi的js学习笔记
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的. 2.js是一门什么样的语言及特点? j ...
js原生捕鱼达人（三）--完结
先给分享下我写完的效果,github有点卡,我没有压缩代码,不过效果可以看到 https://jasonwang911.github.io/ 转载请注明'转载于Jason齐齐的博客http://www ...

随机推荐

Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
java 使用LinkedList模拟一个堆栈或者队列数据结构
近期在复习下java基础,看了下java基础,在看到集合时突然发现想起来曾经面试有一道笔试题:模拟一个堆栈或者队列数据结构,当时还没做出来,今天就写一下,首先得明确堆栈和队列的数据结构堆栈:先进后出 ...
golang的极简流式编程实现
传统的过程编码方式带来的弊端是显而易见,我们经常有这样的经验,一段时间不维护的代码或者别人的代码,突然拉回来看需要花费较长的时间,理解原来的思路,如果此时有个文档或者注释写的很好的话,可能花的时间会短 ...
Redis五（其他操作命令）
其他常用操作 delete(*names) # 根据删除redis中的任意数据类型 exists(name) # 检测redis的name是否存在 keys(pattern='*') # 根据模型获取 ...
python 各种魔法方法
目录自定义序列反射
10046 trace详解(2)--tkprof
10046或10053生成的文件格式比较乱,直接查看有一定的困难,ORACLE自带的一个格式化命令工具tkprof可以将生成的.trc文件进行格式化,具体用说如下: 一.直接输入tkprof不带任 ...
解锁CHM文件
刚在网上下载了CHM格式的文件,打开之后,右侧部分一片空白. 原因:可能是,系统针对来源不明文件的一种保存措施吧解决方法: 1.选中文件,右键打开属性对话框,在 “常规”选项卡中勾选 [解除锁定] ...
SQLAlchemy_定义(一对一/一对多/多对多)关系
目录 Basic Relationship Patterns One To Many One To One Many To Many Basic Relationship Patterns 基本关系模 ...
HDU - 3605 Escape (缩点+最大流/二分图多重匹配)
题意:有N(1<=N<=1e5)个人要移民到M(1<=M<=10)个星球上,每个人有自己想去的星球,每个星球有最大承载人数.问这N个人能否移民成功. 分析:可以用最大流的思路求 ...
oracle 数据泵
Oracle数据库导入导出工具,可以使用exp/imp,但这是比较早期的工具.本文主要介绍数据泵expdp/impdp工具的使用. 1.建立数据泵目录使用数据泵需要先建directory c ...

30-THREE.JS 圆环

30-THREE.JS 圆环的更多相关文章

随机推荐

热门专题