15-THREE.JS 方向光

<!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 方向光的更多相关文章

16-THREE.JS 半球光
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
如何伪装成为一名前端（JS方向）
作为一个菜鸟级别的.NET开发者,在连服务器都没搞定的情况下,要研究前端,这是在扯淡,不过,迫于工作的需要,时常需要去前端打杂,所以经常伪装成为一名前端,有时候竟产生错觉,去应聘Y一份前端work吧. ...
three.js 源码注释（三十九）Light/HemisphereLight.js 半球光、自然光（天光效果）
/*** * HemisphereLight类是在场景中创建半球光,就是天光效果,经常用在室外,将各个位置的物体都照亮,室内的光线大多是方向性的, * 无论是窗口还是灯槽,用平面光很方便,室外用平面 ...
15、js 原生基础总结
Day1 一.什么是JS? ==基于对象==和==事件驱动==的客户端脚本语言二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...
前端表单验证常用的15个JS正则表达式
在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的javaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...
15.Node.js REPL(交互式解释器)
转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电 ...
15 (H5*) JS第5天对象
目录 1:创建对象 2:工厂模式创建对象 3:自定义构造函数创建对象 4:自定义构造函数做了那些事情 5:字面量方式创建对象:一次性对象 6:对象总结 7:json数据类型 8:简单数据类型和复杂数据 ...
从微信小程序到鸿蒙js开发【15】——JS调用Java
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1.新建一个Service Ability2.完善代码逻辑3.JS端远程调用4.<从微信小 ...
在IIS服务器上本地部署 ArcGIS API for js 4.15
作为一名刚入门的小白,还没开始一个helloworld就在软件安装,环境部署时遇到了一大堆问题,简直太让人头秃了,脑壳疼.话不多说,这篇主要想分享一下自己部署ArcGIS API for js 4.1 ...

随机推荐

我的Android进阶之旅------>Android中查看应用签名信息
一.查看自己的证书签名信息如上一篇文章<我的Android进阶之旅------>Android中制作和查看自定义的Debug版本Android签名证书>地址:http://blog ...
Thrift官方安装手册（译）
本篇是Thrift官网安装文档的翻译,原地址点击这里.Thrift之前是不支持Windows的.但是似乎0.9版本以后已经支持Window了.介绍了Thrift安装的环境要求以及在centos,Deb ...
020-Spring Boot 监控和度量
一.概述通过配置使用actuator查看监控和度量信息二.使用 2.1.建立web项目,增加pom <dependency> <groupId>org.springfram ...
Java基础—数据类型
Java的两大数据类型基本数据类型引用类型 Java程序中,new出来的对象存储在堆中(引用类型),但当使用new创建一个小的.简单的对象时,往往不是很有效,所以对于这些类型,Java不用new来 ...
SMW0 上传问题？
*SMW0 和 OAOR 的区别在哪3个方面? SMW0 上传出现: 没有指派至MIME 类型
面向对象之继承（Day24）
一.继承 1.什么是继承继承是一种创建新类的方式,在Python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 2.继承与抽象(先抽象再继承) 抽象基抽取类似或 ...
Admin添加字段
后台扩展用户信息,注意要到settings里面进行设定,有关联和继承两种方式首先的关联表可以关联到user表但,主键在user表当中,所以没法直接在user表当中看到相关信息,要是通过继承扩展的话, ...
谷歌机器学习速成课程---3降低损失 (Reducing Loss)：梯度下降法
迭代方法图(图 1)包含一个标题为“计算参数更新”的华而不实的绿框.现在,我们将用更实质的方法代替这种华而不实的算法. 假设我们有时间和计算资源来计算 w1 的所有可能值的损失.对于我们一直在研究的回 ...
OC知识点(类方法,构造方法,组合模式,get,set方法,自动生成属性)
1.类方法的优势不用创建对象,节省了空间,直接用类名调用类方法,类方法为外界提供一个方便的调用接口.(特点:类方法以加号开头,不能使用自身的成员变量,它的调用不依赖成员变量) 2.构造方法(初始化成 ...
Linux CentOS7安装Mysql5.7
一.下载mysql mkdir /home/install #创建install目录在/home/install目录下下载mysql5.7 wget https://cdn.mysql.com//D ...

15-THREE.JS 方向光

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

随机推荐

热门专题