<!DOCTYPE html>

<html>

<head>

    <title>Example 03.02 - point Light</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(60, 20, 20, 20);

        var planeMaterial = new THREE.MeshPhongMaterial({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 = 0;

        plane.position.z = 0;

        // 把地面添加到场景中去

        scene.add(plane);

        // 创建一个正方体

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});

        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 = -25;

        camera.position.y = 30;

        camera.position.z = 25;

        camera.lookAt(new THREE.Vector3(10, 0, 0));

        // 添加自然光

        var ambiColor = "#0c0c0c";

        var ambientLight = new THREE.AmbientLight(ambiColor);

        scene.add(ambientLight);

        // 添加聚光灯

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

        spotLight.position.set(-40, 60, -10);

        spotLight.castShadow = true;

        // scene.add( spotLight );

        //添加点光源

        var pointColor = "#ccffcc";

        var pointLight = new THREE.PointLight(pointColor);

        pointLight.distance = 100;  //点光源距离

        scene.add(pointLight);

        // 添加一个小的圆形在点光源的光源头部

        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, 0, 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 = 1;

            this.distance = 100;

        };

        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) {

            pointLight.color = new THREE.Color(e);

        });

        gui.add(controls, 'intensity', 0, 3).onChange(function (e) {

            pointLight.intensity = e;

        });

        gui.add(controls, 'distance', 0, 100).onChange(function (e) {

            pointLight.distance = e;

        });

        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)));

            if (phase > 2 * Math.PI) {

                invert = invert * -1;

                phase -= 2 * Math.PI;

            } else {

                phase += controls.rotationSpeed;

            }

            sphereLightMesh.position.z = +(7 * (Math.sin(phase)));

            sphereLightMesh.position.x = +(14 * (Math.cos(phase)));

            sphereLightMesh.position.y = 5;

            if (invert < 0) {

                var pivot = 14;

                sphereLightMesh.position.x = (invert * (sphereLightMesh.position.x - pivot)) + pivot;

            }

            pointLight.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>

13-THREE.JS 点光源的更多相关文章

  1. Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...

  2. 总结ASP.NET C#中经常用到的13个JS脚本代码

    1.按钮前后台事件 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click ...

  3. 13 个 JS 数组精简技巧

    来自 https://juejin.im/post/5db62f1bf265da4d560906ab 侵删 数组是 JS 最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮 ...

  4. 13.Vue.js 组件

    组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽 ...

  5. 13 (H5*) JS第三天 数组、函数

    目录 1:数组的定义和创建方式 2:数组的总结 3:for循环遍历数组 4:数组的案例 5:冒泡排序 6:函数的定义 7:函数的参数 8:函数的返回值 复习 <script> /* * * ...

  6. JS 循环遍历JSON数据 分类： JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如：{&quot;options&quot;:&quot;[{

    JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...

  7. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  8. three.js 根据png生成heightmap

    Three.js: render real world terrain from heightmap using open data By jos.dirksen on Tue, 07/17/2012 ...

  9. JS疑难点和GC原理

    js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...

随机推荐

  1. Ubuntu部署jmeter

    一:ubuntu部署jdk 1:先下载jdk-8u74-linux-x64.tar.gz,上传到服务器,这里上传文件用到了ubuntu 下的 lrzsz. ubuntu下直接执行 sudo apt-g ...

  2. 022-Spring Boot 构建微服务实战

    一.概述 二. 2.1.微服务 将原来一个大的系统,拆分成小系统 每个小系统分别开发,测试,维护 2.2.调用方 服务提供方式:rest(http)[restTemplate,httpclient]. ...

  3. android学习一---搭建开发环境

    android基于Java并运行Linux内核上的轻量级操作系统.由于是基于java的,学习起来也不是太难,对java有一定了解并知道一些基本的图形用户界面,入门就很简单了. 一.了解JDK ,SDK ...

  4. PAT 天梯赛 L1-006. 连续因子 【循环】

    题目链接 https://www.patest.cn/contests/gplt/L1-006 思路 输出的连续因子 的乘积 也要是这个数的因子 就每个数先找它的单因子 然后每个单因子往上一个一个遍历 ...

  5. HTML5（。。。。不完整）

    <!DOCTYPE html>  不区分大小写 <header>.<nav>.<article>.<section>.<sidebar ...

  6. python对象类型----数字&字符串

    一数据类型:      float: 1.3e-3  1.3*10的负三次方 print (1.3e-3)    bin()  #转换为二进进制    oct() #转换为8进制    hex()#转 ...

  7. systemverilog新增的always_comb，always_ff，和always_latch语句

    在Verilog中,设计组合逻辑和时序逻辑时,都要用到always: always @(*) //组合逻辑 if(a > b) out = 1; else out = 0; always @(p ...

  8. PHP面试题 – 培训学校真实面试内部资料

    1.PHP解析URL是哪个函数? parse_url() 是讲URL解析成有固定键值的数组的函数. $ua=parse_url('http://username:password@hostname/p ...

  9. 20145230《Java程序设计》第4周学习总结

    20145230<Java程序设计>第4周学习总结 教材学习内容总结 继承共同行为 本周学习的首先是Java语言中的继承与多态.何为我们的继承呢?在我们面向对象中,子类继承父类,避免重复的 ...

  10. 20165101刘天野 2017-2018-2 《Java程序设计》第4周学习总结

    #20165101刘天野 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 第五章:子类与继承 面向对象程序设计语言有三大特性:封装.继承和多态性.继承是面向对 ...