<!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. 深入Redis内部-Redis 源码讲解（转）

    Redis作为 NoSQL 数据库的杰出代表,一直广受关注,其轻量级的敏捷架构,向来有存储中的瑞士军刀之称.下面推荐的一篇文章,从源码的角度讲解了Redis 的整个工作流程,是了解 Redis 流程的 ...

  2. time 模块，random模块，os模块

    一 :time 模块 python中,通常有几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(t ...

  3. sql server中index的REBUILD和REORGANIZE的区别及工作方式

    sql server中index的REBUILD和REORGANIZE 转自:https://www.cnblogs.com/flysun0311/archive/2013/12/05/3459451 ...

  4. django重写用户模型

    重写一个UserProfile继承自带的AbstractUser # -*- coding: utf-8 -*- from __future__ import unicode_literals fro ...

  5. pandas(八)重塑和轴向旋转

    重塑层次化索引 层次化索引为DataFrame的重排提供了良好的一致性操作,主要方法有 stack :将数据的列旋转为行 unstack:将数据的行转换为列 用一个dataframe对象举例 In [ ...

  6. Mahout学习路线图-张丹老师

    前言 Mahout是Hadoop家族中与众不同的一个成员,是基于一个Hadoop的机器学习和数据挖掘的分布式计算框架.Mahout是一个跨学科产品,同时也是我认为Hadoop家族中,最有竞争力,最难掌 ...

  7. Python:笔记(4)——高级特性

    Python:笔记(4)——高级特性 切片 取一个list或tuple的部分元素是非常常见的操作.Python提供了切片操作符,来完成部分元素的选取 除了上例简单的下标范围取元素外,Python还支持 ...

  8. Redis整合Spring实现缓存

    一.Redis介绍 什么是Redis? redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set( ...

  9. cdoj1341卿学姐与城堡的墙

    地址:http://acm.uestc.edu.cn/#/problem/show/1341 题目: 卿学姐与城堡的墙 Time Limit: 2000/1000MS (Java/Others)    ...

  10. sql统计上周销售量的起止时间

    开始日期: >select DATEADD(Day, 1 - DATEPART(Weekday,CONVERT(varchar(10), GETDATE() - 7, 120)), CONVER ...