<!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>
<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 = new THREE.WebGLRenderer(); renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true; // 创建一个地板
var planeGeometry = new THREE.PlaneGeometry(600, 200, 20, 20);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true; // 让地板保持水平
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = -5;
plane.position.z = 0; // 把地板添加到场景中去
scene.add(plane); // 创建一个正方体
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff3333});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true; // 给正方体坐标
cube.position.x = -4;
cube.position.y = 3;
cube.position.z = 0; // 添加正方体到场景中去
scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); // 正方体坐标
sphere.position.x = 20;
sphere.position.y = 0;
sphere.position.z = 2;
sphere.castShadow = true; // 把正方体添加到场景中去
scene.add(sphere); // 设置相机的坐标
camera.position.x = -35;
camera.position.y = 30;
camera.position.z = 25;
camera.lookAt(new THREE.Vector3(10, 0, 0)); // 添加自然光
var ambiColor = "#1c1c1c";
var ambientLight = new THREE.AmbientLight(ambiColor);
scene.add(ambientLight); var target = new THREE.Object3D();
target.position = new THREE.Vector3(5, 0, 0); //添加方向光
var pointColor = "#ff5808";
var directionalLight = new THREE.DirectionalLight(pointColor);
directionalLight.position.set(-40, 60, -10);
directionalLight.castShadow = true;
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50; directionalLight.distance = 0;
directionalLight.intensity = 0.5;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowMapWidth = 1024; scene.add(directionalLight); // 添加一个小圆形作为光点
var sphereLight = new THREE.SphereGeometry(0.2);
var sphereLightMaterial = new THREE.MeshBasicMaterial({color: 0xac6c25});
var sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial);
sphereLightMesh.castShadow = true; sphereLightMesh.position = new THREE.Vector3(3, 20, 3);
scene.add(sphereLightMesh); // 渲染效果放到DOM元素中去
document.getElementById("WebGL-output").appendChild(renderer.domElement); var step = 0; var invert = 1;
var phase = 0; var controls = new function () {
this.rotationSpeed = 0.03;
this.bouncingSpeed = 0.03;
this.ambientColor = ambiColor;
this.pointColor = pointColor;
this.intensity = 0.5;
this.distance = 0;
this.exponent = 30;
this.angle = 0.1;
this.debug = false;
this.castShadow = true;
this.onlyShadow = false;
this.target = "Plane"; }; var gui = new dat.GUI();
gui.addColor(controls, 'ambientColor').onChange(function (e) {
ambientLight.color = new THREE.Color(e);
}); gui.addColor(controls, 'pointColor').onChange(function (e) {
directionalLight.color = new THREE.Color(e);
}); gui.add(controls, 'intensity', 0, 5).onChange(function (e) {
directionalLight.intensity = e;
}); gui.add(controls, 'distance', 0, 200).onChange(function (e) {
directionalLight.distance = e;
}); gui.add(controls, 'debug').onChange(function (e) {
directionalLight.shadowCameraVisible = e;
}); gui.add(controls, 'castShadow').onChange(function (e) {
directionalLight.castShadow = e;
}); gui.add(controls, 'onlyShadow').onChange(function (e) {
directionalLight.onlyShadow = e;
}); gui.add(controls, 'target', ['Plane', 'Sphere', 'Cube']).onChange(function (e) {
console.log(e);
switch (e) {
case "Plane":
directionalLight.target = plane;
break;
case "Sphere":
directionalLight.target = sphere;
break;
case "Cube":
directionalLight.target = cube;
break;
} }); render(); function render() {
stats.update();
//旋转正方形
cube.rotation.x += controls.rotationSpeed;
cube.rotation.y += controls.rotationSpeed;
cube.rotation.z += controls.rotationSpeed; // 滚动球体
step += controls.bouncingSpeed;
sphere.position.x = 20 + ( 10 * (Math.cos(step)));
sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step))); sphereLightMesh.position.z = -8;
sphereLightMesh.position.y = +(27 * (Math.sin(step / 3)));
sphereLightMesh.position.x = 10 + (26 * (Math.cos(step / 3))); directionalLight.position.copy(sphereLightMesh.position); 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>

  

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. python3爬虫-分析Ajax,抓取今日头条街拍美图

    # coding=utf-8 from urllib.parse import urlencode import requests from requests.exceptions import Re ...

  2. iOS应用生命周期

    作为应用程序的委托对象,AppDelegate类在应用生命周期的不同阶段会回调不同的方法.首先,让我们先了解一下iOS 应用的不同状态及它们彼此间的关系,见图1 . 图1 iOS应用状态图 下面简要介 ...

  3. VS 无法调试 IIS

    用附加的方式断点无效时.   解决方案: 一.VS设置的  .Net版本 与 IIS应用程序池的版本  不一致.   操作步骤: 1. 在VS-> 项目属性, 配置 自定义Web服务器 , 这里 ...

  4. docker多个容器连接 将 Rails 程序部署到 Docker 容器中

    在docker中使用MySQL数据库 https://yq.aliyun.com/articles/583765 将 Rails 程序部署到 Docker 容器中

  5. 值得关注的10个Python语言学习博客

    大家好,还记得我当时学习python的时候,我一直努力地寻找关于python的博客,但我发现它们的数量很少.这也是我建立这个博客的原因,向大家分享我自己学到的新知识.今天我向大家推荐10个值得我们关注 ...

  6. MyBatis传入多个参数 ,List集合

    一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...

  7. 【HackerRank】Halloween party

    Change language : Alex is attending a Halloween party with his girlfriend Silvia. At the party, Silv ...

  8. centos 下安装python3.6.2

    具体详情: http://www.cnblogs.com/vurtne-lu/p/7068521.html

  9. memcached 高级机制(一)

    memcached的高级机制 memcached内存机制 (1)我们知道操作系统对进程的处理方法,在多进程并发的操作系统中,程序的执行不可避免的会产生碎片.同样对于memcached,在存储value ...

  10. Linux操作系统的安装以及基本的操作命令详解

    背景:使用的虚拟机安装Linux  虚拟机使用的是VMware  Linux版本:CentOS-6.7-X86    自行下载:CentOS-6.7-x86_64-bin-DVD1.iso 打开VMw ...