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

随机推荐

Tomcat Server
Tomcat Server的组成部分: 站在框架的顶层的是Server和ServiceServer:servletcontainer Service:Service是这样一个集合:它由一个或者多个Co ...
linux c编程：互斥锁条件变量
条件变量:等待与信号发送使用互斥锁虽然可以解决一些资源竞争的问题,但互斥锁只有两种状态(加锁和解锁),这限制了互斥锁的用途. 条件变量(条件锁)也可以解决线程同步和共享资源访问的问题,条件变量是对互 ...
0408-服务注册与发现-Eureka常用配置
一.概述参看地址:https://cloud.spring.io/spring-cloud-static/Edgware.SR3/single/spring-cloud.html#_appendix ...
asp.net Mvc Npoi 导出导入 excel
因近期项目遇到所以记录一下: 首先导出Excel : 首先引用NPOI包 http://pan.baidu.com/s/1i3Fosux (Action一定要用FileResult) /// < ...
C#检测两个文件内容是否相同
不知道为什么对Excel 2010 xlsx后缀的文件没有效果,求解! 对其他文件有效,如.txt,.csv using System; using System.Security.Cryptogra ...
[笔记]WiX制作msi安装包的例子
WiX是制作msi安装文件的工具,看了半天文档,感觉没有什么比一个例子更简单粗暴的了. <?xml version="1.0" encoding="UTF-8&qu ...
MAC brew软件安装
之前一直怀念ubuntu下的apt-get,因为实在是方便,需要安装什么,一个命令搞定,相关的依赖包统统由apt-get维护.下载,编译,安装,那叫一个痛快.什么软件用着不爽,一个命令卸载! 怀念ap ...
windows下线程库的使用
下载PTHREAD的WINDOWS开发包 pthreads-w32-2-4-0-release.exe(任何一个版本均可) http://sourceware.org/pthreads-win32 ...
centos7 firewall开放查看关闭端口
查看所有打开的端口: firewall-cmd --zone=public --list-ports 添加 firewall-cmd --zone=public --add-port=80/tcp - ...
c语言网络通信杂笔记
1.sin_addr.s_addr = INADDR_ANY;设置成本地IP 2.pthread_create();线程生成函数 3.在linux下,sleep(1)是睡眠1s

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

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

随机推荐

热门专题