24-THREE.JS 镜面高光材质

<!DOCTYPE html>

<html>

<head>

    <title>Example 04.07 - Mesh Phong material</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;

        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: 0x555555}));

        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.MeshPhongMaterial({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;

        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));

        // add subtle ambient lighting

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

//        scene.add(ambientLight);

        // 添加聚光灯

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

        spotLight.position.set(-0, 30, 60);

        spotLight.castShadow = true;

        spotLight.intensity = 0.6;

        scene.add(spotLight);

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

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

        var step = 0;

        var controls = new function () {

            this.rotationSpeed = 0.02;

            this.bouncingSpeed = 0.03;

            this.opacity = meshMaterial.opacity;

            this.transparent = meshMaterial.transparent;

            this.overdraw = meshMaterial.overdraw;

            this.visible = meshMaterial.visible;

            this.emissive = meshMaterial.emissive.getHex();

            this.ambient = meshMaterial.ambient.getHex();

            this.specular = meshMaterial.specular.getHex();

            this.shininess = meshMaterial.shininess;

            this.side = "front";

            this.color = meshMaterial.color.getStyle();

            this.metal = false;

            this.wrapAround = false;

            this.wrapR = 1;

            this.wrapG = 1;

            this.wrapB = 1;

            this.selectedMesh = "cube";

        };

        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, 'visible').onChange(function (e) {

            meshMaterial.visible = e

        });

        spGui.addColor(controls, 'ambient').onChange(function (e) {

            meshMaterial.ambient = new THREE.Color(e)

        });

        spGui.addColor(controls, 'emissive').onChange(function (e) {

            meshMaterial.emissive = new THREE.Color(e)

        });

        spGui.addColor(controls, 'specular').onChange(function (e) {

            meshMaterial.specular = new THREE.Color(e)

        });

        spGui.add(controls, 'shininess', 0, 200).onChange(function (e) {

            meshMaterial.shininess = 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;

            console.log(meshMaterial);

        });

        spGui.addColor(controls, 'color').onChange(function (e) {

            meshMaterial.color.setStyle(e)

        });

        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);

        });

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

            meshMaterial.metal = e;

            meshMaterial.needsUpdate = true;

        });

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

            meshMaterial.wrapAround = e;

            meshMaterial.needsUpdate = true;

        });

        spGui.add(controls, 'wrapR', 0, 1).step(0.01).onChange(function (e) {

            meshMaterial.wrapRGB.x = e;

        });

        spGui.add(controls, 'wrapG', 0, 1).step(0.01).onChange(function (e) {

            meshMaterial.wrapRGB.y = e;

        });

        spGui.add(controls, 'wrapB', 0, 1).step(0.01).onChange(function (e) {

            meshMaterial.wrapRGB.z = 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>

24-THREE.JS 镜面高光材质的更多相关文章

Vertex中实现每顶点光照的镜面高光效果
1,基础知识讲解一个物体在自然界会收到三种光的影响,周围的环境光.漫反射和镜面反射.那么对于计算机要想模拟现实中的光照,就应该也会实现这三种基本光照->环境光.漫反射.镜面高光.对于这三种光照 ...
three.js 着色器材质之glsl内置函数
郭先生发现在开始学习three.js着色器材质时,我们经常会无从下手,辛苦写下的着色器,也会因莫名的报错而手足无措.原因是着色器材质它涉及到另一种语言–GLSL,只有懂了这个语言,我们才能更好的写出着 ...
第24篇 js小知识和“坑”
前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...
2019.4.24（js）
1. 取得正数和负数的绝对值 Math.abs(7.25) Math.abs(-7.25) 2.利用JS刷新页面方法 https://www.cnblogs.com/Chen-XiaoJun/p/62 ...
2017年12月24日 JS跟Jquery基础
js基础 alert();confirm(); 基础语法:与C#一致数据类型及类型转换var (string,decimal)parseInt()parseFloat();isNaN(); 运算符:数 ...
24.Node.js Stream(流)
转自:http://www.runoob.com/nodejs/nodejs-stream.html Stream 是一个抽象接口,Node 中有很多对象实现了这个接口.例如,对http 服务器发起请 ...
24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
转自:https://blog.csdn.net/oscar999/article/details/27176791
Three.js基础探寻七——Lamber材质与Phong材质
材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...
使用Three.js的材质
1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...

随机推荐

Flask（4）- flask请求上下文源码解读、http聊天室单聊/群聊（基于gevent-websocket）
一.flask请求上下文源码解读通过上篇源码分析,我们知道了有请求发来的时候就执行了app(Flask的实例化对象)的__call__方法,而__call__方法返回了app的wsgi_app(en ...
Touch事件分发机制
原文:http://www.cnblogs.com/linjzong/p/4191891.html Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实 ...
简明python教程
linux查询python版本:python -V linux进入python:python 退出python:CTRL+D 使用源文件:helloworld.py 运行这个程序:python hel ...
decorator ＆ generator ＆ iterator
装饰器(decorator): @staticmethod @classmethod 都既可以使用类名访问,也可以使用对象名访问, 但classmethod在定义时需要cls参数生成器(genera ...
ArcGis 获取数据表中某字段唯一值
from:http://www.cnblogs.com/3echo/archive/2006/08/16/478094.html 1 /// <summary> ...
springmvc map
/** * 目标方法可以添加 Map 类型(实际上也可以是 Model 类型或 ModelMap 类型)的参数. * @param map * @return */ @RequestMapping(& ...
iOS 多线程安全与可变字典
这周最大的收获是稍稍通透了多线程安全字典的重要性. 诱因是,发现了有字典坏地址错误果断以为是 value 或者 key 是可能出现了空值,补充了潜在的判断,虽然有的位置已经预判断的,但 ...
mapreduce编程--（准备篇）
mapreduce编程准备学习mapreduce编程之前需要做一些概念性的了解,这是做的一些课程学习笔记,以便以后时不时的翻出来学习下,之前看过一篇文章大神们都是时不时的翻出基础知识复习下,我也做点 ...
Mybatis中trim的使用
trim标记是一个格式化的标记,可以完成set或者是where标记的功能,如下代码: 1. select * from user <trim prefix="WHERE" p ...
CF961G Partitions(第二类斯特林数)
题目 CF961G 前置斯特林数\(\Longrightarrow\)斯特林数及反演总结做法相信大家能得出一个一眼式:\[Ans=\sum\limits_{i=1}^n w_i\sum\limi ...

24-THREE.JS 镜面高光材质

24-THREE.JS 镜面高光材质的更多相关文章

随机推荐

热门专题