<!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. django博客项目7

    ................

  2. 安卓项目eclipse有用教程：设置应用名字和图标、屏幕、签名、真机调试、clean、logcat、json解析

    怎样在安卓项目中.设置游戏的应用名字和图标? 我们在Androidproject的res资源目录下.会看到3个drawable的目录和一个values目录.就是在这里改动即可.   关于改动应用程序名 ...

  3. MySQL 数据类型（Day41）

    一.介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的高度,但宽度是可选的. mysql数据类型概览 #1.数字:(默认都是有符号,宽度指的是显示宽度,与存储无关) ...

  4. rsync高级同步

    rsync是一款开源的.快速的.多功能的.可实现全量及增量的本地或远程数据同步备份工具.适用于unix/linux/windows等多种操作系统平台. 两台机器拷贝数据scp,nfs(linux之间) ...

  5. zend studio设置utf8

    1. windows -> preference -> general -> workspace 2.项目右键 -> properities -> resource 3. ...

  6. 第一课 GCC入门

    1序言 gcc是一个可移植的编译器,支持多种硬件平台:也不仅仅是一个本地编译器也是一个跨平台编译器:支持多张语言编译时按照模块化设计支持多种语言. gcc编译过程:预处理(预处理器):编译(编译器): ...

  7. LightOJ - 1138 (二分+阶乘分解)

    题意:求阶乘尾部有Q(1 ≤ Q ≤ 108)个0的最小N 分析:如果给出N,然后求N!尾部0的个数的话,直接对N除5分解即可(因为尾部0肯定是由5*2构成,那么而在阶乘种,2的因子个数要比5少,所以 ...

  8. LightOJ - 1336 Sigma Function(约数和+整数拆分)

    题干中给出函数公式: 其中pi为n的每个素因数,ei为其个数.设该函数为F(x),其意义为x的约数之和.问在1-n中有多少x,令F(x)为偶数. 分析:设f(p)为(p^(e+1)-1)/(p-1). ...

  9. canvas笔记1

    w3c定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. canvas 对象 属性: width he ...

  10. 【c++习题】【17/4/13】stack

    1.stack 模板.动态内存分配.析构 #include "stack2.cpp" #include <iostream> using namespace std; ...