看下运行效果：

源码解释：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>First Scene</title>

    <style type="text/css">

        body {    /*移除所有的滚动条*/

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

    <div id="WebGL-output"></div>

    <script type="text/javascript" src="./libs/three.js"></script>

    <script type="text/javascript" src="./libs/stats.js"></script>

    <script type="text/javascript" src="./libs/dat.gui.js"></script>

    <script>

        function init() {

            var scene = new THREE.Scene();    // 场景容器, 用来保存并跟踪所有我们想渲染的物体

            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);    // 相机变量, 我们能够在渲染好的场景scence里看到什么

            var renderer = new THREE.WebGLRenderer();    // 渲染器对象, 负责计算指定相机角度下浏览器中scene的样子

            renderer.setClearColorHex(0xEEEEEE, 1.0);    // 将renderer对象的背景色设置为0xEEEEEE

            renderer.setSize(window.innerWidth, window.innerHeight);    // 让renderer对象将scene渲染成多大尺寸

            renderer.shadowMapEnabled = true;    // 告诉渲染器需要阴影

            var axes = new THREE.AxisHelper(20);    // axes坐标轴对象

            scene.add(axes);    // 把坐标轴添加到场景中去

            var planceGeometry = new THREE.PlaneGeometry(60, 20);    // PlaneGeometry: 翻译 平面几何    (参数: 宽60, 高20)

            var planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });    // MeshLambertMaterial: 翻译 网格材质    (用来设置平面的外观, 颜色，透明度等)

            var plane = new THREE.Mesh(planceGeometry, planeMaterial);    // 把这2个对象合并到一个名为plane(平面)的Mesh(网格)对象中

            plane.receiveShadow = true;    // 平面接收阴影

            plane.rotation.x = -0.5*Math.PI;    // 绕x轴旋转90度

            plane.position.x = 15;    // 平面坐标位置

            plane.position.y = 0;

            plane.position.z = 0;

            scene.add(plane);    // 将平面添加到场景

            var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);    // Geometry: 翻译 立方体几何

            var cubeMaterial = new THREE.MeshLambertMaterial({ color: '#12B7F5'});    // 立方体是0xff0000颜色

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);    // 把立方体和他的外观合并一下

            cube.castShadow = true;    // 立方体的阴影

            cube.position.x = -3;    // 立方体的坐标位置

            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.castShadow = true;    // 球的阴影

            sphere.position.x = 20;    // 球体的位置

            sphere.position.y = 4;

            sphere.position.z = 2;

            scene.add(sphere);    // 把球体添加进场景去

            camera.position.x = -30;

            camera.position.y = 40;

            camera.position.z = 30;

            camera.lookAt(scene.position);    // lookAt函数指向场景的中心

            // 添加一个光源

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

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

            spotLight.castShadow = true;    // 让光源产生阴影

            scene.add(spotLight);

            document.querySelector('#WebGL-output').appendChild(renderer.domElement);    // 把canvas添加到指定的dom中

            renderer.render(scene, camera);    // 使用渲染器渲染

        };

        window.onload = init;

    </script>

</body>

</html>

和上一个demo的差别：
1. 添加了一个光源
2. 改变材质, 把 MeshBasicMaterial材质 改成 MeshLambertMaterial材质(MeshLambertMaterial和MeshPhoneMaterial材质可以对光源产生反应),把属性wireframe去掉了
3. 给要添加阴影的物体设置 cube/sphere.castShadow = true; 前提让光源产生阴影 spotLight.castShadow = true; 平面接收阴影 plane.receiveShadow = true;

three.js - 添加材质 灯光 阴影的更多相关文章

  1. Three.js开发指南---使用three.js的材质（第四章）

    材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...

  2. 一、threejs————灯光阴影

    threejs设置阴影有三个注意点 1.只有支持阴影的灯光才可以 pointLight,spotlight,directionallight 2.添加摄像机辅助器 THREE.CameraHelper ...

  3. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  4. JS 添加千分位，测试可以使用

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. 用JS添加文本框案例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  8. Revit Family API 添加材质参数设置可见性

    start //添加类型 void AddType(FamilyManager familyMgr, string name, double w, double d) {     FamilyType ...

  9. Js添加、读取、删除cookie，判断cookie是否有效，指定domain域下主路径path下设置cookie，设置expires过期时间

    有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!=”这样的写法. 正确方法是:判断是否存在名为username3的cookie,使用do ...

随机推荐

  1. react中这些细节你注意过没有？

    react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...

  2. HTML的语义化和一些简单优化

    1.什么是语义化? 必应网典的解释 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...

  3. IOS7如何获取设备唯一标识

    WWDC 2013已经闭幕,IOS7 Beta随即发布,界面之难看无以言表...,简直就是山寨Android. 更让IOS程序猿悲催的是,设备唯一标识的MAC Address在IOS7中也失效了. I ...

  4. Network-Emulator Network-Emulator-Toolkit网络模拟器使用详细介绍

    Network-Emulator-Toolkit网络模拟器使用详细介绍 by:授客 QQ:1033553122 原理介绍 图1 如上图,一个ADSL用户通过modem连接到网络,通过网络应用如IE,M ...

  5. U8 应付款管理 单据类型 分析

    Ap_CloseBill   收付款单主表 Ap_CloseBills 收付款单子表 cVouchType 在收付款单主表中  ,用于区分单据为收款单还是付款单(48,49)  49:付款单 48:收 ...

  6. 13.1、多进程：进程锁Lock、信号量、事件

    进程锁: 为什么要有进程锁:假如现在有一台打印机,qq要使用打印机,word文档也要使用打印机,如果没有使用进程锁,可能会导致一些问题,比如QQ的任务打印到一半,Word插进来,于是打印出来的结果是各 ...

  7. Python创建空DataFrame及添加行数据

    # 创建空DataFrame df = pd.DataFrame(columns = ['YJML','EJML','SJML','WZLB','GGXHPZ','CGMS']) # 插入数据(忽略索 ...

  8. [20171206]rman与truncate2.txt

    [20171206]rman与truncate2.txt --//上午测试发现truncate的表在做rman备份时还要做8个extents的备份.--//不知道自己的猜测是否正确,选择一个使用UNI ...

  9. Java 中声明和语句

    public class Example { int[] arr = new int[4]; // OK! 定义属性并初始化 arr[0] = 1; // 错误! 这是语句,必须写在方法体里 arr[ ...

  10. centos6.5下oracle11g开机自动启动方法一

    转裁于 方法一 https://blog.csdn.net/wx5040257/article/details/77875690 方法二  https://blog.csdn.net/wx504025 ...