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

随机推荐

安全必须作为基础，融入到产品开发过程——By Me
安全必须作为基础融入,让公司兄弟姐妹具备足够的安全意识,且逐渐具备必要的安全经验,带着安全思维去执行产品的架构设计.研发.测试.运维(甚至完整的产品生命周期),这是一种有远见.负责人的产品过程!! 下 ...
JavaScript-4.2函数,变量作用域---ShinePans
<html> <head> <meta http-equiv="content-type" content="text/html;chars ...
oracle 禁用索引
同步数据的时候有索引会比较慢可以暂时禁用索引 --禁用索引 ALTER INDEX PK_T_AUTH_USERROLE_ID UNUSABLE; --恢复索引ALTER INDEX UK_T_A ...
Android图片加载框架Picasso最全使用教程4
通过前几篇的学习,我们已经对Picasso的加载图片的用法有了很深的了解,接下来我们开始分析Picasso为我们提供的其他高级功能及内存分析,Let’sGo ! Picasso进行图片的旋转(Rota ...
go——安装与设置
1.下载安装官方下载地址:https://golang.org/dl/ 备用下载地址:https://golang.google.cn/dl/ 在windows下面直接运行.msi程序文件就可以安装 ...
VK Cup 2018 - Round 1+Codeforces Round #470
A. Primal Sport 题意:有两个人轮流玩游戏.给出数X(i-1),轮到的人需要找到一个小于X(i-1)的素数x,然后得到Xi,Xi是x的倍数中大于等于X(i-1)的最小的数.现在已知X2, ...
Linux开发工具教程
今天把上个星期写的Linux开发工具相关的教程整理一下,方便阅读: 1.第一课 GCC入门: 2.第二课 GCC入门之静态库以及共享库: 3.第三课 Makefile文件的制作(上) : 4.第四课 ...
CNN学习笔记：目标函数
CNN学习笔记:目标函数分类任务中的目标函数目标函数,亦称损失函数或代价函数,是整个网络模型的指挥棒,通过样本的预测结果与真实标记产生的误差来反向传播指导网络参数学习和表示学习. 假设某分类任务共 ...
iOS 多线程安全与可变数组
完全来自于iOS 多线程安全与可变字典的学习基本相同,举一反三直接上样例代码是我参照网上,根据当前业务需求改的. 其实好多人在这里喜欢用类别处理.我个人觉得用类别极其容易和普通方法混淆,所以 ...
VRChat简易教程4-使用VRC的接口实现物体的移动（VRC的action和trigger接口）
这个教程我们学习如何实现载具的驾驶一.准备工作 1 最简单的载具驾驶需要至少两个元素,一是需要一个载具,二是需要一个前进的按钮(这里我们只做前进功能),为了直观的能感受到载具的移动,我们还得创造一个 ...

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

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

随机推荐

热门专题