看下运行效果：

源码解释：

<!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. JS如何判断一个对象是否为空、是否有某个属性

    一.js判断一个对象是否为空 方法一: let obj1 = {} let obj2 = {a:1} function empty(obj){ for (let key in obj){ return ...

  2. OneMap Client API

    MapSystem.Map.SmMap类 方法 mergerGeo:function(geoList) 将多个几何图形合并(支持面.线),组合成一个复合对象 例子: var geo=this.myMa ...

  3. MVVM 和 VUE

    一,使用jquery和使用vue的区别 二,对MVVM的理解 三,vue中如何实现响应式 四,vue如何解析模版 五,vue整个实现流程   一,使用jquery和使用vue的区别 jquery实现t ...

  4. 在Apex中使用sObject

    sObject对象的定义 Salesforce中的标准对象或自定义对象在Apex中使用时被称作"sObject".sObject对象的一个实例相当于Salesforce中的一条记录 ...

  5. Android常用数据类型转换

    String转int.float.double.byte[].bitmap Int i = Integer.parseInt(str); Float f = Float.parseFloat(str) ...

  6. Android View体系（六）从源码解析Activity的构成

    前言 本来这篇是要讲View的工作流程的,View的工作流程主要指的measure.layout.draw这三大流程,在讲到这三大流程之前我们有必要要先了解下Activity的构成,所以就有了这篇文章 ...

  7. [IDEA] IntelliJ IDEA 安装教程

    原文地址:https://www.cnblogs.com/memento/p/9147477.html 下载地址:https://www.jetbrains.com/idea/ 本文以 64 位的 U ...

  8. 在td中的输入英文为什么不自动换行？？？

    在表格中如果输入纯汉字,表格中的内容会根据表格大小进行换行,若果一个老外不会写汉字,写了一堆英文,表格的宽度会拉的很长,超过规定宽度 解决方法是在table中加上style="table-l ...

  9. 平板电脑安装Ubuntu教程

    平板电脑安装Ubuntu教程-以V975w为例,Z3735系列CPU通用 最近尝试在昂达V975w平板电脑和intel stick中安装ubuntu,经过分析,发现存在一个非常大的坑.但因为这个坑,此 ...

  10. charles系列破解激活办法（最高charles4.2都可以激活）

    // Charles Proxy License // 适用于Charles任意版本的注册码,谁还会想要使用破解版呢. // Charles 4.2目前是最新版,可用.   Registered Na ...