1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title></title>
  7.     <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
  8.     <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
  9.     <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
  10.     <style>
  11.         body {
  12.             margin: 0;
  13.             overflow: hidden;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.  
  19. <div id="Stats-output">
  20. </div>
  21. <div id="WebGL-output">
  22. </div>
  23. <script type="text/javascript">
  24.  
  25.     //初始化
  26.     function init() {
  27.  
  28.         var stats = initStats();
  29.  
  30.         // 创建一个场景
  31.         var scene = new THREE.Scene();
  32.  
  33.         // 创建一个相机
  34.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  35.  
  36.         // 创建一个渲染器
  37.         var renderer = new THREE.WebGLRenderer();
  38.  
  39.         renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
  40.         renderer.setSize(window.innerWidth, window.innerHeight);
  41.         renderer.shadowMapEnabled = true;
  42.  
  43.         // 创建一个地板
  44.         var planeGeometry = new THREE.PlaneGeometry(600, 200, 20, 20);
  45.         var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
  46.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  47.         plane.receiveShadow = true;
  48.  
  49.         // 让地板保持水平
  50.         plane.rotation.x = -0.5 * Math.PI;
  51.         plane.position.x = 15;
  52.         plane.position.y = -5;
  53.         plane.position.z = 0;
  54.  
  55.         // 把地板添加到场景中去
  56.         scene.add(plane);
  57.  
  58.         // 创建一个正方体
  59.         var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  60.         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});
  61.         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  62.         cube.castShadow = true;
  63.  
  64.         // 给正方体坐标
  65.         cube.position.x = -4;
  66.         cube.position.y = 3;
  67.         cube.position.z = 0;
  68.  
  69.         // 添加正方体到场景中去
  70.         scene.add(cube);
  71.  
  72.         var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  73.         var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
  74.         var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  75.  
  76.         // 正方体坐标
  77.         sphere.position.x = 20;
  78.         sphere.position.y = 0;
  79.         sphere.position.z = 2;
  80.         sphere.castShadow = true;
  81.  
  82.         // 把正方体添加到场景中去
  83.         scene.add(sphere);
  84.  
  85.         // 设置相机的坐标
  86.         camera.position.x = -35;
  87.         camera.position.y = 30;
  88.         camera.position.z = 25;
  89.         camera.lookAt(new THREE.Vector3(10, 0, 0));
  90.  
  91.         // 添加自然光
  92.         var ambiColor = "#1c1c1c";
  93.         var ambientLight = new THREE.AmbientLight(ambiColor);
  94.         scene.add(ambientLight);
  95.  
  96.         var target = new THREE.Object3D();
  97.         target.position = new THREE.Vector3(5, 0, 0);
  98.  
  99. 		//添加方向光
  100.         var pointColor = "#ff5808";
  101.         var directionalLight = new THREE.DirectionalLight(pointColor);
  102.         directionalLight.position.set(-40, 60, -10);
  103.         directionalLight.castShadow = true;
  104.         directionalLight.shadowCameraNear = 2;
  105.         directionalLight.shadowCameraFar = 200;
  106.         directionalLight.shadowCameraLeft = -50;
  107.         directionalLight.shadowCameraRight = 50;
  108.         directionalLight.shadowCameraTop = 50;
  109.         directionalLight.shadowCameraBottom = -50;
  110.  
  111.         directionalLight.distance = 0;
  112.         directionalLight.intensity = 0.5;
  113.         directionalLight.shadowMapHeight = 1024;
  114.         directionalLight.shadowMapWidth = 1024;
  115.  
  116.         scene.add(directionalLight);
  117.  
  118.         // 添加一个小圆形作为光点
  119.         var sphereLight = new THREE.SphereGeometry(0.2);
  120.         var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});
  121.         var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
  122.         sphereLightMesh.castShadow = true;
  123.  
  124.         sphereLightMesh.position = new THREE.Vector3(3, 20, 3);
  125.         scene.add(sphereLightMesh);
  126.  
  127.         // 渲染效果放到DOM元素中去
  128.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  129.  
  130.         var step = 0;
  131.  
  132.         var invert = 1;
  133.         var phase = 0;
  134.  
  135.         var controls = new function () {
  136.             this.rotationSpeed = 0.03;
  137.             this.bouncingSpeed = 0.03;
  138.             this.ambientColor = ambiColor;
  139.             this.pointColor = pointColor;
  140.             this.intensity = 0.5;
  141.             this.distance = 0;
  142.             this.exponent = 30;
  143.             this.angle = 0.1;
  144.             this.debug = false;
  145.             this.castShadow = true;
  146.             this.onlyShadow = false;
  147.             this.target = "Plane";
  148.  
  149.         };
  150.  
  151.         var gui = new dat.GUI();
  152.         gui.addColor(controls, 'ambientColor').onChange(function (e) {
  153.             ambientLight.color = new THREE.Color(e);
  154.         });
  155.  
  156.         gui.addColor(controls, 'pointColor').onChange(function (e) {
  157.             directionalLight.color = new THREE.Color(e);
  158.         });
  159.  
  160.         gui.add(controls, 'intensity', 0, 5).onChange(function (e) {
  161.             directionalLight.intensity = e;
  162.         });
  163.  
  164.         gui.add(controls, 'distance', 0, 200).onChange(function (e) {
  165.             directionalLight.distance = e;
  166.         });
  167.  
  168.         gui.add(controls, 'debug').onChange(function (e) {
  169.             directionalLight.shadowCameraVisible = e;
  170.         });
  171.  
  172.         gui.add(controls, 'castShadow').onChange(function (e) {
  173.             directionalLight.castShadow = e;
  174.         });
  175.  
  176.         gui.add(controls, 'onlyShadow').onChange(function (e) {
  177.             directionalLight.onlyShadow = e;
  178.         });
  179.  
  180.         gui.add(controls, 'target', ['Plane', 'Sphere', 'Cube']).onChange(function (e) {
  181.             console.log(e);
  182.             switch (e) {
  183.                 case "Plane":
  184.                     directionalLight.target = plane;
  185.                     break;
  186.                 case "Sphere":
  187.                     directionalLight.target = sphere;
  188.                     break;
  189.                 case "Cube":
  190.                     directionalLight.target = cube;
  191.                     break;
  192.             }
  193.  
  194.         });
  195.  
  196.         render();
  197.  
  198.         function render() {
  199.             stats.update();
  200.             //旋转正方形
  201.             cube.rotation.x += controls.rotationSpeed;
  202.             cube.rotation.y += controls.rotationSpeed;
  203.             cube.rotation.z += controls.rotationSpeed;
  204.  
  205.             // 滚动球体
  206.             step += controls.bouncingSpeed;
  207.             sphere.position.x = 20 + ( 10 * (Math.cos(step)));
  208.             sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
  209.  
  210.             sphereLightMesh.position.z = -8;
  211.             sphereLightMesh.position.y = +(27 * (Math.sin(step / 3)));
  212.             sphereLightMesh.position.x = 10 + (26 * (Math.cos(step / 3)));
  213.  
  214.             directionalLight.position.copy(sphereLightMesh.position);
  215.  
  216.             requestAnimationFrame(render);
  217.  
  218.             renderer.render(scene, camera);
  219.         }
  220.  
  221.         function initStats() {
  222.  
  223.             var stats = new Stats();
  224.  
  225.             stats.setMode(0); // 0: fps, 1: ms
  226.             stats.domElement.style.position = 'absolute';
  227.             stats.domElement.style.left = '0px';
  228.             stats.domElement.style.top = '0px';
  229.  
  230.             document.getElementById("Stats-output").appendChild(stats.domElement);
  231.  
  232.             return stats;
  233.         }
  234.     }
  235.  
  236.     window.onload = init
  237.  
  238. </script>
  239. </body>
  240. </html>

　　

15-THREE.JS 方向光的更多相关文章

  1. 16-THREE.JS 半球光

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

  2. 如何伪装成为一名前端（JS方向）

    作为一个菜鸟级别的.NET开发者,在连服务器都没搞定的情况下,要研究前端,这是在扯淡,不过,迫于工作的需要,时常需要去前端打杂,所以经常伪装成为一名前端,有时候竟产生错觉,去应聘Y一份前端work吧. ...

  3. three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、 自然光（天光效果）

    /*** * HemisphereLight类 是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...

  4. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  5. 前端表单验证常用的15个JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  6. 15.Node.js REPL(交互式解释器)

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电 ...

  7. 15 (H5*) JS第5天 对象

    目录 1:创建对象 2:工厂模式创建对象 3:自定义构造函数创建对象 4:自定义构造函数做了那些事情 5:字面量方式创建对象:一次性对象 6:对象总结 7:json数据类型 8:简单数据类型和复杂数据 ...

  8. 从微信小程序到鸿蒙js开发【15】——JS调用Java

    鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...

  9. 在IIS服务器上本地部署 ArcGIS API for js 4.15

    作为一名刚入门的小白,还没开始一个helloworld就在软件安装,环境部署时遇到了一大堆问题,简直太让人头秃了,脑壳疼.话不多说,这篇主要想分享一下自己部署ArcGIS API for js 4.1 ...

随机推荐

  1. ios 避免两个button同一时候被点击

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/superchaoxian/article/details/24631293 这个能够通过[btn   ...

  2. mapper文件提示：No data sources are configured to run this sql

    mapper文件发出黄色警告. 输入数据库用户名和密码等等. 自动同步ok 就会发现代码变绿了,ok

  3. 《Tensorflow技术解析与实战》第四章

    Tensorflow基础知识 Tensorflow设计理念 (1)将图的定义和图的运行完全分开,因此Tensorflow被认为是一个"符合主义"的库 (2)Tensorflow中涉 ...

  4. Latex技巧：在图表序号中加入章节号（实现诸如“图1.1.2”这样的图表序号）

    平时看书经常看到"图1.2"这样的编号,含义是第1章的第2幅插图:或者"图1.1.2",含义是第1章第1节的第2幅插图.而在LaTeX中如果直接插图的话只会显示 ...

  5. NPOI 导入 导出

    using NPOI.XSSF.UserModel;   using System.IO; 导入 /// <summary> /// Excel转换DataTable /// </s ...

  6. Django序列化

    一.Django序列化    1.序列化应用场景     1.关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户,由于httpresponse只能返回字符串或者是字节,而从数据库 ...

  7. 面试题2：实现Singleton模式(Java实现)

    SIngleton(单例)设计模式 它是最简单的常用的设计模式之一,设计模式在面向对象程序设计中起着举足轻重的作用,Singleton是唯一一个能够用短短几十行代码完整实现的模式. public cl ...

  8. Django——缓存机制

    1.缓存介绍 (1)概论 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次的的后台 ...

  9. Zuul

    一.zuul是什么 zuul 是netflix开源的一个API Gateway 服务器, 本质上是一个web servlet应用. Zuul 在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架. ...

  10. Python学习进程（4）运算符

        本节主要介绍Python的运算符.     (1)Python语言支持的运算符类型: .算术运算符 .比较(关系)运算符 .赋值运算符 .逻辑运算符 .位运算符 .成员运算符 .身份运算符 . ...