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

随机推荐

4.Data Types in the mongo Shell-官方文档摘录
总结: 1.MongoDB 的BSON格式支持额外的数据类型 2 Date 对象内部存储64位字节存整数,存储使用NumberLong()这个类来存,使用NumberInt()存32位整数,128位十 ...
python创建进程的两种方式
1.方式1 import time import multiprocessing def task(arg): time.sleep(2) print(arg) def run(): # 进程1 p1 ...
使用.gitignore忽略文件
单个项目配置在.git文件夹同目录下打开git bash,执行命令: touch .gitignore 生成“.gitignore”文件. 在”.gitignore” 文件里输入你要忽略的文件夹及其 ...
Open Source VOIP applications, both clients and servers (开源sip server & sip client 和开发库)
SIP Proxies SBO SIP Proxy Bypass All types of Internet Firewall JAIN-SIP Proxy Mini-SIP-Proxy A very ...
BioinfomaticsPPT-1-Introduction
1.人类基因基础 2.基因组规模 3.基因分化表达 4.遗传信息流 5.基因基础知识相关 6.遗传编码 7.序列比对的意义 8.
PAT 1047 Student List for Course[一般]
1047 Student List for Course (25 分) Zhejiang University has 40,000 students and provides 2,500 cours ...
python16_day18【Django_Form表单、分页】
一.表单 Django的Form主要具有一下几大功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 1.Form类创建Form类时,主 ...
Flask 请求源码分析
执行app.run()方法: def run(self, host=None, port=None, debug=None, **options): from werkzeug.serving imp ...
Delphi 正则表达式语法(2): 或者与重复
Delphi 正则表达式语法(2): 或者与重复 // | 号的使用, | 是或者的意思 var reg: TPerlRegEx; begin reg := TPerlRegEx.Create ...
数据库权限分配(远程共享数据库)(mysql)
1. 数据库远程权限 mysql -uroot -proot grant all privileges on formal.* to root@'192.168.3.40' identified by ...

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

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

随机推荐

热门专题