<!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中间件（含Django运行周期流程图）

    Django中的中间件(含Django完整生命周期图) Django中间件简介 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,djang ...

  2. wechat多开

    右键wechat查看属性,找到目标(wechat的执行路径),复制 然后在桌面新建文档,输入下面命令,想多开几个就复制几行 start 复制的目标 另存为bat文件,所有文件类型 双击运行

  3. Linux Shell编程第4章——sed和awk

    目录 sed命令基本用法 sed命令实例 命令选项 文本定位 编辑命令 awk编程模型 awk编程实例 1.awk模式匹配 2.记录和域 3.关系和布尔运算符 4.表达式 5.系统变量 6.格式化输出 ...

  4. Spring框架学习之IOC(二)

    Spring框架学习之IOC(二) 接着上一篇的内容,下面开始IOC基于注解装配相关的内容 在 classpath 中扫描组件 <context:component-scan> 特定组件包 ...

  5. 102. Binary Tree Level Order Traversal ------层序遍历

      Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to righ ...

  6. Java伪代码示例

    学习并转载自https://www.cnblogs.com/z245894546/p/7535261.html import.java.大道至简.*; import.java.愚公移山.*; publ ...

  7. bind方法代替闭包

    <a href="JavaScript:">a</a> <a href="JavaScript:">b</a> ...

  8. sq 如何创建全局的临时表。

    全局临时表的生命周期一直持续到创建会话(不是创建级别)才终止.例如,如果你在存储过程中创建全局临时表,当超出存储过程的范围时,该表并不会被销毁.当创建会话终止后,SQL Server才会自动尝试删除该 ...

  9. MySQL-5.7 创建及查看触发器

    触发器的作用是当表上有对应SQL语句发生时,则触发执行. 1.语法 CREATE [DEFINER = { user | CURRENT_USER }] TRIGGER trigger_name tr ...

  10. 新机git及github sshkey简单配置

    新机git简单配置,毕竟不常用,不用每次都查1.安装gitwindows:https://git-scm.com/download/winubuntu: apt install git 2.全局配置 ...