<!DOCTYPE html>

<html>

<head>

    <title></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 shape = createMesh(new THREE.ShapeGeometry(drawShape()));

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

        scene.add(shape);

        // 设置相机的场景

        camera.position.x = -30;

        camera.position.y = 70;

        camera.position.z = 70;

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

        // 添加聚光灯

        var spotLight = new THREE.SpotLight(0xffffff);

        spotLight.position.set(-40, 60, -10);

        scene.add(spotLight);

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

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

        var step = 0;

        var controls = new function () {

            this.asGeom = function () {

                // remove the old plane

                scene.remove(shape);

                // create a new one

                shape = createMesh(new THREE.ShapeGeometry(drawShape()));

                // add it to the scene.

                scene.add(shape);

            };

            this.asPoints = function () {

                // remove the old plane

                scene.remove(shape);

                // create a new one

                shape = createLine(drawShape(), false);

                // add it to the scene.

                scene.add(shape);

            };

            this.asSpacedPoints = function () {

                // remove the old plane

                scene.remove(shape);

                // create a new one

                shape = createLine(drawShape(), true);

                // add it to the scene.

                scene.add(shape);

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'asGeom');

        gui.add(controls, 'asPoints');

        gui.add(controls, 'asSpacedPoints');

        render();

        function drawShape() {

            // create a basic shape

            var shape = new THREE.Shape();

            // startpoint

            shape.moveTo(10, 10);

            // straight line upwards

            shape.lineTo(10, 40);

            // the top of the figure, curve to the right

            shape.bezierCurveTo(15, 25, 25, 25, 30, 40);

            // spline back down

            shape.splineThru(

                    [new THREE.Vector2(32, 30),

                        new THREE.Vector2(28, 20),

                        new THREE.Vector2(30, 10),

                    ]);

            // curve at the bottom

            shape.quadraticCurveTo(20, 15, 10, 10);

            // add 'eye' hole one

            var hole1 = new THREE.Path();

            hole1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true);

            shape.holes.push(hole1);

            // add 'eye hole 2'

            var hole2 = new THREE.Path();

            hole2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true);

            shape.holes.push(hole2);

            // add 'mouth'

            var hole3 = new THREE.Path();

            hole3.absarc(20, 16, 2, 0, Math.PI, true);

            shape.holes.push(hole3);

            // return the shape

            return shape;

        }

        function createMesh(geom) {

            // assign two materials

            var meshMaterial = new THREE.MeshNormalMaterial();

            meshMaterial.side = THREE.DoubleSide;

            var wireFrameMat = new THREE.MeshBasicMaterial();

            wireFrameMat.wireframe = true;

            // create a multimaterial

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

            return mesh;

        }

        function createLine(shape, spaced) {

            console.log(shape);

            if (!spaced) {

                var mesh = new THREE.Line(shape.createPointsGeometry(10), new THREE.LineBasicMaterial({

                    color: 0xff3333,

                    linewidth: 2

                }));

                return mesh;

            } else {

                var mesh = new THREE.Line(shape.createSpacedPointsGeometry(3), new THREE.LineBasicMaterial({

                    color: 0xff3333,

                    linewidth: 2

                }));

                return mesh;

            }

        }

        function render() {

            stats.update();

            shape.rotation.y = step += 0.01;

            // render using requestAnimationFrame

            requestAnimationFrame(render);

            webGLRenderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

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

            // Align top-left

            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>

　　

29-THREE.JS 根据公式画形状的更多相关文章

  1. react项目中canvas之画形状（圆形，椭圆形，方形）

    组件DrawShape.jsx如下: import React, { Component } from 'react' // import ClassNames from 'classnames' i ...

  2. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  3. 交互式数据可视化－D3.js（四）形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  4. 教你用开源 JS 库快速画出 GitHub 章鱼猫

    本文作者:HelloGitHub-kalifun 在上一篇文章我们介绍了 Zdog 如何使用,接下来这篇文章我将带领各位利用 Zdog 画出一个 GitHub 章鱼猫(和官方的还是有些差别的). Zd ...

  5. （转）第04节：Fabric.js用路径画不规则图形

    在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径 ...

  6. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 4种方法生成二维码 （js 控制canvas 画出 二维码）

    随着网络的迅速发展 发展 发展,二维码的应用将会越来越多.同时很多只是很平凡的二维码,请拿起你的手 把这个二维码 设计起来吧.下面分享了几个非常好的二维码设计.  二维码原理: 二维条码/二维码可以分 ...

  8. JS动画公式

    // 效果: // Linear:无缓动效果 // Quadratic:二次方的缓动(t^2) // Cubic:三次方的缓动(t^3) // Quartic:四次方的缓动(t^4) // Quint ...

  9. html5 js canvas中画星星的函数

    function drawStar(cxt, x, y, outerR, innerR, rot) { cxt.beginPath(); ; i < ; i++) { cxt.lineTo(Ma ...

随机推荐

  1. Scrapy框架-scrapy框架架构详解

    1.Scrapy框架介绍 写一个爬虫,需要做很多的事情.比如:发送网络请求.数据解析.数据存储.反反爬虫机制(更换ip代理.设置请求头等).异步请求等.这些工作如果每次都要自己从零开始写的话,比较浪费 ...

  2. Java线程安全和非线程安全

    ArrayList是非线程安全的,Vector是线程安全的:HashMap是非线程安全的,HashTable是线程安全的:StringBuilder是非线程安全的,StringBuffer是线程安全的 ...

  3. [动态规划]UVA10285 - Longest Run on a Snowboard

    Problem C Longest Run on a Snowboard Input: standard input Output: standard output Time Limit: 5 sec ...

  4. 部署Node.js的应用

    原创:作者 mashihua 最近Node.js很火,让很多的前端看到了可以直接从前端写到后端的希望.但是每次部署一个Node.js的应用却让前端苦恼不已.每次登陆服务器,用自己不熟悉的方式从版本控制 ...

  5. App doesn't auto-start an app when booting the device in Android

    From Android 3.1, newly installed apps are always put into a "stopped" state and the only ...

  6. STL sort “invalid operator <”

    跟踪了下,是比较函数(下面的_Pred)的问题: template<class _Pr, class _Ty1, class _Ty2> inline bool _Debug_lt_pre ...

  7. java二叉排序树

    二叉排序树又称二叉查找树.它或者是一颗空树,或者是具有如下性质的二叉树: 1.如果左子树不空,那么左子树上的所有节点均小于它的根节点的值: 2.如果右子树不空,那么右子树上的所有节点均大于它的根节点的 ...

  8. 测试Windows live Writer

    private String GetRandomint(int codeCount) { Random random = new Random(); string min = "" ...

  9. Django_内置Admin

    Django内置Admin   Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contrib.auth django.co ...

  10. HYSBZ - 2243 染色 (树链剖分+线段树)

    题意:树上每个结点有自己的颜色,支持两种操作:1.将u到v路径上的点颜色修改为c; 2.求u到v路径上有多少段不同的颜色. 分析:树剖之后用线段树维护区间颜色段数.区间查询区间修改.线段树结点中维护的 ...