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.  
  24. <script type="text/javascript">
  25.  
  26.     // 初始化
  27.     function init() {
  28.  
  29.         var stats = initStats();
  30.  
  31.         // 创建一个场景
  32.         var scene = new THREE.Scene();
  33.         scene.fog = new THREE.Fog(0xaaaaaa, 0.010, 200);
  34.  
  35.         // 创建一个相机
  36.         var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  37.  
  38.         // 创建一个渲染器
  39.         var renderer = new THREE.WebGLRenderer();
  40.  
  41.         renderer.setClearColor(new THREE.Color(0xaaaaff, 1.0));
  42.         renderer.setSize(window.innerWidth, window.innerHeight);
  43.         renderer.shadowMapEnabled = true;
  44.  
  45.         // 创建草坪
  46.         var textureGrass = THREE.ImageUtils.loadTexture("../assets/textures/ground/grasslight-big.jpg");
  47.         textureGrass.wrapS = THREE.RepeatWrapping; //表示边缘被夹到纹理单元（texels）的外边界
  48.         textureGrass.wrapT = THREE.RepeatWrapping; //表示边缘被夹到纹理单元（texels）的外边界
  49.         textureGrass.repeat.set(4, 4);
  50.  
  51. 		//
  52.         var planeGeometry = new THREE.PlaneGeometry(1000, 200, 20, 20);
  53.         var planeMaterial = new THREE.MeshLambertMaterial({map: textureGrass});
  54. //      //地面材料
  55.         var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  56.         plane.receiveShadow = true;
  57.  
  58.         // 旋转这个地面
  59.         plane.rotation.x = -0.5 * Math.PI;
  60.         plane.position.x = 15;
  61.         plane.position.y = 0;
  62.         plane.position.z = 0;
  63.  
  64.         // 把地面添加到场景中去
  65.         scene.add(plane);
  66.  
  67.         // 创建一个正方体
  68.         var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  69.         var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});
  70.         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  71.         cube.castShadow = true;
  72.  
  73.         // 给正方体坐标
  74.         cube.position.x = -4;
  75.         cube.position.y = 3;
  76.         cube.position.z = 0;
  77.  
  78.         // 把正方体添加到场景中去
  79.         scene.add(cube);
  80.  
  81.         var sphereGeometry = new THREE.SphereGeometry(4, 25, 25);
  82.         var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
  83.         var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  84.  
  85.         // 球体坐标
  86.         sphere.position.x = 10;
  87.         sphere.position.y = 5;
  88.         sphere.position.z = 10;
  89.         sphere.castShadow = true;
  90.  
  91.         // 把球体添加到场景中去
  92.         scene.add(sphere);
  93.  
  94.         // 相机坐标 和 参考点
  95.         camera.position.x = -20;
  96.         camera.position.y = 15;
  97.         camera.position.z = 45;
  98. //        camera.position.x = -120;
  99. //        camera.position.y = 165;
  100. //        camera.position.z = 145;
  101.         camera.lookAt(new THREE.Vector3(10, 0, 0));
  102.  
  103.         // 添加聚光灯
  104.         var spotLight0 = new THREE.SpotLight(0xcccccc);
  105.         spotLight0.position.set(-40, 60, -10);
  106.         spotLight0.lookAt(plane);
  107.         scene.add(spotLight0);
  108.  
  109.         var target = new THREE.Object3D();
  110.         target.position = new THREE.Vector3(5, 0, 0);
  111.  
  112. 		//添加半球光
  113.         var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
  114.         hemiLight.position.set(0, 500, 0);
  115.         scene.add(hemiLight);
  116.  
  117.         var pointColor = "#ffffff";
  118. //    var dirLight = new THREE.SpotLight( pointColor);
  119.         var dirLight = new THREE.DirectionalLight(pointColor);
  120.         dirLight.position.set(30, 10, -50);
  121.         dirLight.castShadow = true;
  122. //        dirLight.shadowCameraNear = 0.1;
  123. //        dirLight.shadowCameraFar = 100;
  124. //        dirLight.shadowCameraFov = 50;
  125.         dirLight.target = plane;
  126.         dirLight.shadowCameraNear = 0.1;
  127.         dirLight.shadowCameraFar = 200;
  128.         dirLight.shadowCameraLeft = -50;
  129.         dirLight.shadowCameraRight = 50;
  130.         dirLight.shadowCameraTop = 50;
  131.         dirLight.shadowCameraBottom = -50;
  132.         dirLight.shadowMapWidth = 2048;
  133.         dirLight.shadowMapHeight = 2048;
  134.  
  135.         scene.add(dirLight);
  136.  
  137.         //将渲染后的效果放到DOM元素中去
  138.         document.getElementById("WebGL-output").appendChild(renderer.domElement);
  139.  
  140.         var step = 0;
  141.  
  142.         var invert = 1;
  143.         var phase = 0;
  144.  
  145.         var controls = new function () {
  146.             this.rotationSpeed = 0.03;
  147.             this.bouncingSpeed = 0.03;
  148.  
  149.             this.hemisphere = true;
  150.             this.color = 0x00ff00;
  151.             this.skyColor = 0x0000ff;
  152.             this.intensity = 0.6;
  153.  
  154.         };
  155.  
  156.         var gui = new dat.GUI();
  157.  
  158.         gui.add(controls, 'hemisphere').onChange(function (e) {
  159.  
  160.             if (!e) {
  161.                 hemiLight.intensity = 0;
  162.             } else {
  163.                 hemiLight.intensity = controls.intensity;
  164.             }
  165.         });
  166.         gui.addColor(controls, 'color').onChange(function (e) {
  167.             hemiLight.groundColor = new THREE.Color(e);
  168.         });
  169.         gui.addColor(controls, 'skyColor').onChange(function (e) {
  170.             hemiLight.color = new THREE.Color(e);
  171.         });
  172.         gui.add(controls, 'intensity', 0, 5).onChange(function (e) {
  173.             hemiLight.intensity = e;
  174.         });
  175.  
  176.         render();
  177.  
  178.         function render() {
  179.             stats.update();
  180.             // 转动正方体
  181.             cube.rotation.x += controls.rotationSpeed;
  182.             cube.rotation.y += controls.rotationSpeed;
  183.             cube.rotation.z += controls.rotationSpeed;
  184.  
  185.             // 滚动球体
  186.             step += controls.bouncingSpeed;
  187.             sphere.position.x = 20 + ( 10 * (Math.cos(step)));
  188.             sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));
  189.  
  190.             requestAnimationFrame(render);
  191.             renderer.render(scene, camera);
  192.         }
  193.  
  194.         function initStats() {
  195.  
  196.             var stats = new Stats();
  197.  
  198.             stats.setMode(0); // 0: fps, 1: ms
  199.             stats.domElement.style.position = 'absolute';
  200.             stats.domElement.style.left = '0px';
  201.             stats.domElement.style.top = '0px';
  202.  
  203.             document.getElementById("Stats-output").appendChild(stats.domElement);
  204.  
  205.             return stats;
  206.         }
  207.     }
  208.     window.onload = init;
  209. </script>
  210. </body>
  211. </html>

　　

16-THREE.JS 半球光的更多相关文章

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

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

  2. 15-THREE.JS 方向光

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

  3. 《selenium2 python 自动化测试实战》（16）——js操作补充

    js修改readonly属性 我们看到这里日期框标签中有readonly属性,如果我们直接send_keys就无法输入内容,这时我们需要先去掉readonly属性: js ='document.get ...

  4. 16 (H5*) JS第6天 日期、字符串、数组

    目录 1:date 2:格式化日期 3:字符串 4:字符串的方法 5:字符串的案例 6:数组的方法 7:包装类型 复习 正文 1:日期:date <script> //创建实例对象 // ...

  5. three.js光源

    在Threejs中,光源用Light表示,它是所有光源的基类.它的构造函数是: THREE.Light ( hex ) 它有一个参数hex,接受一个16进制的颜色值.例如要定义一种红色的光源,我们可以 ...

  6. three.js一个简单demo学些和讲解

    叉口裁剪球体案例 二话不说先上效果图: 全部代码带注释 <!DOCTYPE html> <html lang="en"> <head> < ...

  7. 1000粉！使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  8. Three.js开发指南---使用three.js里的各种光源（第三章）

    本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光 一 光源 光源大概有7种, 其中基础光源有4种 环境光(AmbientL ...

  9. 使用 Babylon.js 在 HTML 页面加载 3D 对象

    五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...

随机推荐

  1. 我的Android进阶之旅------>Android使用9Patch图片作为不失真背景

    做人要大度,海纳百川,做事要圆滑,左右逢源,这让我想到了编程也是如此,代码要扩展,界面也要考虑自适应. 这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. 1 ...

  2. Android程序运行时权限与文件系统权限的区别

    apk程序是运行在虚拟机上的,对应的是Android独特的权限机制,只有体现到文件系统上时才使用linux的权限设置. (1)Android中的apk必须签名 (2)基于UserID的进程级别的安全机 ...

  3. git钩子

    定义: 钩子:由事件触发的函数 分类: 客户端钩子:由诸如提交和合并这样的操作触发 服务器端钩子:由诸如接收被推送的提交这样的联网操作触发 安装: a.钩子都被存储在 .git 目录下的 hooks ...

  4. ABAP发邮件函数

    步骤: 一.检查输入参数, (1)未指定文件類別代碼,(2)未指定郵件主題, (3)未指定郵件內容, (4)未指定發送人郵件地址, (5)未指定接收人郵件地址, 二.调用发送功能, (1)创建发送请求 ...

  5. 从SignalTap II中获取“最真实”的仿真测试向量(ZZ)

         在实际工作中,经常会遇到这样的情况:在硬件调试中采用SignalTap II反复多次编译并最终捕获到问题的原因时,才会发现,原来这个问题是逻辑问题,是可以在仿真环境下发现并快速解决的.先前没 ...

  6. asp.net mvc webform和razor的page基类区别

    接触过asp.net mvc的都知道,在传统的webform的模式下,page页面的基类是这样声明的: <%@ Page Language="C#" MasterPageFi ...

  7. KVM虚拟化虚拟机支持虚拟化

    一.开启的时候需要关闭所有虚拟机: 首先检查 KVM host(宿主机/母机)上的kvm_intel模块是否打开了嵌套虚拟机功能(默认是开启的): 1.modinfo kvm_intel | grep ...

  8. maven 项目打包时无法解析读取properties文件

    在做项目时遇见一个问题,无法解析properties文件的 内容 异常为 Could not resolve placeholder ......... 在此之前均有做相关的 配置 但是从未出现过如上 ...

  9. iOS 几种常用的 crash log 崩溃信息调试方法

    前言:crash log 对 定位崩溃问题 ,并且不容易复现,尤其是及时对appstore 上正在运营的 app 的迭代改进来说 非常重要. 1 crash两种情况 1.1 测试环境下 追踪bug 1 ...

  10. P4317 花神的数论题

    题目 洛谷 数学方法学不会%>_<% 做法 爆搜二进制下存在\(i\)位\(1\)的情况,然后快速幂乘起来 My complete code #include<bits/stdc++ ...