21-THREE.JS 将法线矢量映射到RGB颜色的材质

<!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>

    <script type="text/javascript" src="../libs/CanvasRenderer.js"></script>

    <script type="text/javascript" src="../libs/Projector.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 renderer;

        var webGLRenderer = new THREE.WebGLRenderer();

        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        webGLRenderer.shadowMapEnabled = true;

		// 创建一个canvas渲染器

        var canvasRenderer = new THREE.CanvasRenderer();

        canvasRenderer.setSize(window.innerWidth, window.innerHeight);

        renderer = webGLRenderer;

		//  创建一个地板

        var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);

        var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({color: 0x777777}));

        groundMesh.rotation.x = -Math.PI / 2;

        groundMesh.position.y = -20;

        scene.add(groundMesh);

        var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);

        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);

        var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

        var meshMaterial = new THREE.MeshNormalMaterial({color: 0x7777ff});

        var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);

        var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

        var plane = new THREE.Mesh(planeGeometry, meshMaterial);

        // 设置圆球的坐标

        sphere.position.x = 0;

        sphere.position.y = 3;

        sphere.position.z = 2;

        for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {

            var face = sphere.geometry.faces[f];

            var centroid = new THREE.Vector3(0, 0, 0);

            centroid.add(sphere.geometry.vertices[face.a]);

            centroid.add(sphere.geometry.vertices[face.b]);

            centroid.add(sphere.geometry.vertices[face.c]);

            centroid.divideScalar(3);

            var arrow = new THREE.ArrowHelper(

                    face.normal,

                    centroid,

                    2,

                    0x3333FF,

                    0.5,

                    0.5);

            sphere.add(arrow);

        }

        cube.position = sphere.position;

        plane.position = sphere.position;

        // 把正方体添加到场景中去

        scene.add(cube);

        // 设置相机的坐标

        camera.position.x = -20;

        camera.position.y = 30;

        camera.position.z = 40;

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

        // 添加自然光

        var ambientLight = new THREE.AmbientLight(0x0c0c0c);

        scene.add(ambientLight);

        // 添加聚光灯

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

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

        spotLight.castShadow = true;

        scene.add(spotLight);

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

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

        var step = 0;

        var oldContext = null;

        var controls = new function () {

            this.rotationSpeed = 0.02;

            this.bouncingSpeed = 0.03;

            this.opacity = meshMaterial.opacity;

            this.transparent = meshMaterial.transparent;

            this.visible = meshMaterial.visible;

            this.side = "front";

            this.wireframe = meshMaterial.wireframe;

            this.wireframeLinewidth = meshMaterial.wireframeLinewidth;

            this.selectedMesh = "cube";

            this.shadow = "flat";

        };

        var gui = new dat.GUI();

        var spGui = gui.addFolder("Mesh");

        spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {

            meshMaterial.opacity = e

        });

        spGui.add(controls, 'transparent').onChange(function (e) {

            meshMaterial.transparent = e

        });

        spGui.add(controls, 'wireframe').onChange(function (e) {

            meshMaterial.wireframe = e

        });

        spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) {

            meshMaterial.wireframeLinewidth = e

        });

        spGui.add(controls, 'visible').onChange(function (e) {

            meshMaterial.visible = e

        });

        spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) {

            console.log(e);

            switch (e) {

                case "front":

                    meshMaterial.side = THREE.FrontSide;

                    break;

                case "back":

                    meshMaterial.side = THREE.BackSide;

                    break;

                case "double":

                    meshMaterial.side = THREE.DoubleSide;

                    break;

            }

            meshMaterial.needsUpdate = true;

        });

        spGui.add(controls, 'shadow', ["flat", "smooth"]).onChange(function (e) {

            switch (e) {

                case "flat":

                    // https://github.com/mrdoob/three.js/issues/1929

                    meshMaterial.shading = THREE.FlatShading;

                    break;

                case "smooth":

                    meshMaterial.shading = THREE.SmoothShading;

                    break;

            }

            var oldPos = sphere.position.clone();

            scene.remove(sphere);

            scene.remove(plane);

            scene.remove(cube);

            sphere = new THREE.Mesh(sphere.geometry.clone(), meshMaterial);

            cube = new THREE.Mesh(cube.geometry.clone(), meshMaterial);

            plane = new THREE.Mesh(plane.geometry.clone(), meshMaterial);

            sphere.position = oldPos;

            cube.position = oldPos;

            plane.position = oldPos;

            switch (controls.selectedMesh) {

                case "cube":

                    scene.add(cube);

                    break;

                case "sphere":

                    scene.add(sphere);

                    break;

                case "plane":

                    scene.add(plane);

                    break;

            }

            meshMaterial.needsUpdate = true;

            console.log(meshMaterial);

        });

        spGui.add(controls, 'selectedMesh', ["cube", "sphere", "plane"]).onChange(function (e) {

            scene.remove(plane);

            scene.remove(cube);

            scene.remove(sphere);

            switch (e) {

                case "cube":

                    scene.add(cube);

                    break;

                case "sphere":

                    scene.add(sphere);

                    break;

                case "plane":

                    scene.add(plane);

                    break;

            }

            scene.add(e);

        });

        render();

        function render() {

            stats.update();

            cube.rotation.y = step += 0.01;

            plane.rotation.y = step;

            sphere.rotation.y = step;

            requestAnimationFrame(render);

            renderer.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>

21-THREE.JS 将法线矢量映射到RGB颜色的材质的更多相关文章

21个js 技巧收藏
1 Javascript数组转换为CSV格式首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...
第21篇 js四种继承方式
js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法.继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承. 1.原型继承 ...
21. Node.Js Buffer类（缓冲区）-（一）
转自:https://blog.csdn.net/u011127019/article/details/52512242
js实现选中当前元素并改变颜色（js、jq的各种循环）
1.jq伪类选择器(:not)的使用 2.js jq运用数组循环 3.checkbox的选中循环事件 4.select的选中事件 <select class="ssss" o ...
js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
JS实现鼠标移入DIV随机变换颜色
今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...
jquery.nicescroll.js可全屏可改滚动条颜色的滚动条插件-推荐
有一款很棒的插件 http://www.ijquery.cn/?p=666
js方法实现rgb颜色转换成16进制格式的代码的方法
原文地址:http://www.cnblogs.com/vaal-water/archive/2013/04/08/3008880.html 自己试过很好用 function zero_fill_he ...
JS怎么控制input框的背景颜色
$("input").css("background-color","red"); 参考:https://zhidao.baidu.com/ ...

随机推荐

django自带过滤器大全
1.可以通过过滤器来修改变量的显示,过滤器的形式是:{{ variable | filter }},管道符号'|'代表使用过滤器 2.过滤器能够采用链式的方式使用,例如:{{ text | escap ...
hadoop namenode
存储文件系统元数据,例如:文件目录结构,不同文件的分块情况,每块存储在那个节点,权限等这些元数据全部存储在内存中,所以,namenode要求内存比较大 hdfs在存文件的时候会按照块存储,每一块默认 ...
【转】记一次SQLServer的分页优化兼谈谈使用Row_Number()分页存在的问题
最近有项目反应,在服务器CPU使用较高的时候,我们的事件查询页面非常的慢,查询几条记录竟然要4分钟甚至更长,而且在翻第二页的时候也是要这么多的时间,这肯定是不能接受的,也是让现场用SQLServe ...
Windows 7 下 Node.js 连接 Oracle
原创作者: sailtseng 1. 安装 Oracle 11g express 详见: <Windows 7 x64 安装 Oracle 11g Express> 2. 安装 Micr ...
Mark一下 mysql 误删除root用户的解决方法
今天学习mysql用户管理,不小心将mysql.user表中的root用户给删掉了,然后就无法登录mysql了,网上找到了linux下的解决方法,我做了简单的修改,改成了我的windows版,恢复方法 ...
s5_day11作业
# 1 文件内容如下,标题为:姓名,性别,年纪,薪资 # # egon male 18 3000 # alex male 38 30000 # wupeiqi female 28 20000 # yu ...
Leaflet API 翻译（一）
摘自:http://jsrookie.iteye.com/blog/2318972 L.Map API各种类中的核心部分,用来在页面中创建地图并操纵地图. Constructor(构造器) 通过div ...
Linux curl命令参数详解（6/23）
linux curl是通过url语法在命令行下上传或下载文件的工具软件,它支持http,https,ftp,ftps,telnet等多种协议,常被用来抓取网页和监控Web服务器状态. 在Linux中c ...
java类执行顺序
1. 静态初始化块 > 初始化块 > 构造器 2. 父类 > 子类综合下来顺序就是: 父类静态初始化块和静态成员变量子类静态初始化块和静态成员变量父类初始化块和普通成员变量父 ...
LongestValidParentheses, 求最长合法括号子串长度-----同类问题ValidParentheses，GenerateParentheses
问题描述:求括号字符串中最长合法子串长度.例如:()((),返回2,而不是4. 算法分析:还是利用栈,和判断合法括号对是一样的. public static int longestValidParen ...

21-THREE.JS 将法线矢量映射到RGB颜色的材质

21-THREE.JS 将法线矢量映射到RGB颜色的材质的更多相关文章

随机推荐

热门专题