<!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: 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.MeshLambertMaterial({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));

        // 添加自然光

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

        scene.add(ambientLight);

        // 添加聚光灯

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

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

        spotLight.castShadow = true;

        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.side = "front";

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

            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.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.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, '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>

　　

23-THREE.JS 光照材质的更多相关文章

  1. Three.js开发指南---使用three.js的材质（第四章）

    材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...

  2. three.js各种材质的实现源码

    three.js常用材质:基本材质.兰伯特材质.冯氏材质.标准材质. 我们可以自己使用着色器实现这些材质,用于批量渲染等用途. 为了简单,假设物体只有一张漫反射贴图,场景中只存在一个环境光和一个平行光 ...

  3. 使用Three.js的材质

    1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...

  4. three.js - 添加材质 灯光 阴影

    看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. 20-THREE.JS 混合材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  6. 2015年10月23日JS笔记

    ECMAScript标准:JavaScript核心语法 微软:Jscript ECMAScript标准:一纸空文 JavaScript和JScritp都号称完全实现了 ECMAScript标准 W3C ...

  7. 第23篇 js快速学习知识

    前面说了js的一些高级方面的基础知识,这些都是比较容易出错的和比较难理解的东西,除了这些之外其它的知识都比较简单了,基础学好了,扩展起来就是小意思.今天说说js方面可以快速学习和入门的知识. 1.闭包 ...

  8. 22-THREE.JS 面材质

    <!DOCTYPE html> <html> <head> <title>Example 04.05 - Mesh face material</ ...

  9. 19-THREE.JS 深度材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

随机推荐

  1. Leetcode 之 Kth Largest Element in an Array

    636.Kth Largest Element in an Array 1.Problem Find the kth largest element in an unsorted array. Not ...

  2. Python3+Selenium3自动化测试-(五)

    这里来说一说selenium中的等待方式,其实在webdriver只有两种类型等待方式,显式等待和隐式等待,之前是在程序运行过程中使用time模块中的sleep进行代码的休眠进行强制等待,是显式等待中 ...

  3. 海报工厂之（一）android 如何给图片添加水印和文字

    在Android中如何给图片添加水印,下面截取了部分核心代码,仅供参考: /**      * 获取图片缩小的图片      * @param src      * @return      */   ...

  4. Library Cache优化与SQL游标

    Library Cache主要用于存放SQL游标,而SQL游标最大化共享是Library Cache优化的重要途径,可以使SQL运行开销最低.性能最优. 1 SQL语句与父游标及子游标 在PL/SQL ...

  5. scc

    CSS简介 CSS介绍 CSS(cascading style sheet,层叠样式表)是一种制作网页的新技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一 CSS语法 CSS实例 每 ...

  6. Codeforces Round #475 (Div. 2)

    B. Messages 题意:有n个消息分别在ti的时候收到.设所有消息收到时初始值为A,每过一秒,其值减去B.当在某一秒选择读某个消息时,获值为当前消息的值:如果在某一秒结束的时候,手上有k则消息未 ...

  7. Android MVP Presenter 中引发的空指针异常

    一.概述 最近对 googlesamples/android-architecture 中的 MVP-dagger 进行了学习.对照项目的 MVP-dagger 分支,对 MVP-dagger 进行了 ...

  8. Codeforces Round #395 (Div. 2)B. Timofey and cubes

    地址:http://codeforces.com/contest/764/problem/B 题目: B. Timofey and cubes time limit per test 1 second ...

  9. 牛客网暑期ACM多校训练营（第一场）- J Different Integers （莫队）

    题意:裸的莫队题,每个查询Li,Ri,返回区间[1,Li]和[Ri,N]区间中不同的数的个数. 分析:正常的离线查询,是求区间[Li,Ri]中要求的答案,而该题所求答案为外侧两个区间中的答案,那么cn ...

  10. 20145201 《Java程序设计》第五周学习总结

    20145201 <Java程序设计>第五周学习总结 教材学习内容总结 本周学习了课本第八.九章内容,即异常处理.Collection与Map. 第八章 异常处理 8.1 语法与集成架构 ...