Three.JS 新增燈光、材質和陰影（第一個例子）

阿新 • • 發佈：2019-02-18

three.js中都多種燈光和材質，這裡只是添加了一種燈光，聚光燈spotLight。

首先構建一個spotLight物件：

var spotLight = new  THREE.SpotLight（0xFFFFFF）；

指定光源的位置，從何處開始照射：

spotLight.position.set（-40,60，-10）；

把光源變數加入到場景：

scene.add（spotLight）；

材質：MeshBasicMaterial是基本的材質模型，它對光源產生任何反應。
MeshLambertMaterial 材質和MeshPhongMaterial材質會對光源產生反應。具體的區別不太瞭解。如果要物體對光照產生反應，把材質改為上述中的一種。

把第一個例子中的立方體的材質修改為 MeshLambertMaterial ：

var  cubeMaterial = new THREE.MeshLambertMaterial（{color:0xffffff}）;

陰影：Three.JS預設是不渲染出陰影的，這是比較耗費計算資源的。但是可以指定讓渲染的時候渲染出陰影。

確定讓渲染器渲染出陰影：

renderer.shadowMapEnabled = true；

指出那個物體會接受物體投射出的陰影，就是說，物體投射出的陰影會顯示在哪個物體。例子中，指定平面會接受物體投射出的陰影，就是說其他物體投射出的陰影會出現在平面上，不會跑到其他地方。

指定平面接受物體投射出的陰影：

plane.receiveShadow = true；

指定那個物體會投射陰影，指定哪個物體會投射陰影，不指定的物體就不會投射陰影。
指定立方體投射會投射陰影：

cube.castShadow = true；

最後，指定由哪個光源照射物體來投射陰影，並不是所有的光源都可以產生陰影。物體有陰影，必須要有光源照射吧！

指定由前面建立的聚光燈spotLight來照射物體產生陰影：

spotLight.castShadow = true；

程式碼如下：

<!DOCTYPE html>
<html lang="en"> 

<head>
    <meta charset="UTF-8">
    <title>Three.js  第一章學習</title>
<!--需要的基本JS庫-->
    <script src="jquery19.js"></script>
    <script src="three.js"></script>
    <script src ="stats.js"></script>
    <script src = "dat.gui.js"></script>
    <script src = "controlKit.js"></script>
    <!--給body加入一個樣式，邊框為0（零，不顯示邊框）；滾動條隱藏-->
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<!--建立一個DIV，WebGL渲染的基本物體會在此處輸出-->
<div id="WebGL-output">

</div>

<!--定義一個JQuery函式，所有的WebGL操作展示將在該函式中進行-->
<script type="text/javascript">
$(function () {
    <!--構建場景-->
    var  scene = new THREE.Scene();
    <!--建立相機，檢視場景,透視相機-->
    var  camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    <!--構建渲染器，進行渲染-->
    var  renderer = new THREE.WebGLRenderer();
    <!--渲染背景色,不知道為什麼在此學習過程中，該函式setClearColorHex()老是提示錯誤？-->
   // renderer.setClearColorHex(0xEEEEEE);
    renderer.setClearColor(0xAAFFCC);
    <!--渲染尺寸-->
    renderer.setSize(window.innerWidth,window.innerHeight);

    <!--告訴渲染器需要渲染出陰影-->
    renderer.shadowMapEnabled = true;


    <!--新增一個輔助座標軸-->
    var  axes  = new THREE.AxisHelper(20);
    scene.add(axes);

    <!--構建一個平面，物體將會放置在這個平面上-->
    <!--平面尺寸，100x60，寬度方向平分幾分，高度方向平分幾分，如果引數最後2位不是（1,1），平面會顯示為網格平面-->
    var planeGeometry = new THREE.PlaneGeometry(100,60,10,10);
    <!--平面材質,僅僅指定顏色 0xcccccc-->
  //  var planeMaterial = new THREE.MeshBasicMaterial({color:0xccaacc});

    <!--臨時修改材質為MeshLambertMaterial-->
    var  planeMaterial = new THREE.MeshLambertMaterial({color:0xFFFFFF});

    <!--有尺寸和材質構建一個平面-->
    var  plane = new THREE.Mesh(planeGeometry,planeMaterial);
    <!--把平面選擇-90°，方便觀察-->
    plane.rotation.x = -0.5*Math.PI;
    <!--指定平面的位置-->
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    <!--指定平面接受陰影，就是物體投射出的陰影會出現在該平面上-->
    plane.receiveShadow = true;

    <!--把平面加入到場景中-->
    scene.add(plane);
    <!--建立物體，一個立方體，一個球體-->
    <!--建立一個立方體-->
    <!--指定立方體的幾何尺寸，長寬高，不包括位置-->
    var  cubeGeometry = new THREE.CubeGeometry(4,4,4);
    <!--指定立方體的材質，僅僅指定顏色：0xFF0000，是否使用線框模式顯示：是-->
   // var  cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000,wireframe:true});
    <!--臨時修改材質為MeshLambertMaterial-->
    var  cubeMaterial = new THREE.MeshLambertMaterial({color:0xFF0000});
    <!--以給定的幾何尺寸和材質構建一個立方體-->
    var  cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
    <!--指定立方體的具體位置xyz-->
    cube.position.x =-4;
    cube.position.y =3;
    cube.position.z = 0;

    <!--指出物體會投射陰影-->
    cube.castShadow = true;

    <!--把建立的立方體放入場景-->
     scene.add(cube);

    <!--建立一個球體sphere-->
    <!--指定球體的幾何尺寸，不包括位置；最後2個引數感覺是指定網格密度-->
    var  sphereGeometry = new THREE.SphereGeometry(4,50,50);
    <!--指定球體材質，僅僅指定顏色：0xFF0000，是否以線框形式顯示：是-->
   // var  sphereMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});

    <!--臨時修改材質為MeshLambertMaterial-->
    var  sphereMaterial = new THREE.MeshLambertMaterial({color:0x7777FF});

    <!--以給定的幾何尺寸和材質，建立一個球體-->
    var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
    <!--指定球體的位置 X Y Z-->
    sphere.position.x =20;
    sphere.position.y=4;
    sphere.position.z = 0;

    <!--指出物體會投射陰影-->
    sphere.castShadow = true;

    <!--把建立的球體加入到場景中-->
    scene.add(sphere);


    <!--建立一個聚光燈變數，用來照射物體來產生陰影-->
    <!--建立一個spotLight變數，指定顏色：0xFFFFFF-->
    var  spotLight = new THREE.SpotLight(0xFFFFFF);
    <!--指定spotLight的位置-->
    spotLight.position.set(-40,60,-10);

    <!--指出此光源照射物體，使物體產生陰影-->
    spotLight.castShadow = true;

    <!--把spotLight加入到場景中-->
    scene.add(spotLight);


    <!--指定相機的位置和方向，決定我們在場景中如何看，能看到什麼-->
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    <!--利用JQuery查詢到ID為WebGL-output的DIV，並把渲染到的東西輸出到該DIV-->
    $("#WebGL-output").append(renderer.domElement);
    <!--利用渲染器以給定的相機去渲染場景-->
    renderer.render(scene,camera);
})    ;
</script>


</body>
</html>

效果如下：
這裡寫圖片描述

Three.JS 新增燈光、材質和陰影（第一個例子）

three.js中都多種燈光和材質，這裡只是添加了一種燈光，聚光燈spotLight。首先構建一個spotLight物件： var spotLight = new THREE.SpotLight（0xFFFFFF）；指定光源的位置，從何處開始照

three.js入門系列之光和陰影

初中物理教過我們鏡面反射和漫反射，這是由於物體的材質直接導致的。在three.js中，由於物體的材料不同，對於光源的反應也是不一樣的，下面就讓我們一探究竟。一、材料據Three.js中描述，有兩種材料能對光源有所反應：就是圖中箭頭標識的兩種材料。二、檢驗編輯前例，設定光源位置：

安裝JDK、Tomcat和Mysql（CentOS 7.4）

pen state 需要密碼 bootstrap commands set register mysq 上傳軟件包 rz上傳jdk-8u181-linux-x64.tar.gz和apache-tomcat-8.5.32.tar.gz 或者FileZilla Client

java正則校驗必須包括字母、數字和字元（6-12位）

java正則校驗，必須包括字母數字字元 public static String checkPassword(String passwordStr) { if (passwordStr !=

用string容器實現大整數比較、加、減、乘和除（用減法實現）（函式版）

這些函式支援2~36進位制，採用的是STL中的string容器。 //big_number_f.h #ifndef BIG_NUMBER_F #define BIG_NUMBER_F #include<iostream> #include<string> #include

MySQL Server型別之MySQL客戶端工具的下載、安裝和使用（博主推薦）

本博文的主要內容有　　.MySQL Server 5.5系列的下載　　.MySQL Server 5.5系列的安裝　　.MySQL Server 5.5系列的使用　　.MySQL Server 5.5系列的解除安裝注意啊！　　對於noinstall方式安裝的MySQL，系統的

Navicat Premium之MySQL客戶端的下載、安裝和使用（博主推薦）

　　不多說，直接上乾貨！前期工作　　若需使用Navicat Premium，則需要先安裝MySQL，在此就不敘述了。具體可見我的部落格：　Navicat Premium是一套資料庫管理工具，結合其它Navicat成員，支援單

資料庫概述、mysql-5.7.11-winx64.zip 的下載、安裝、配置和使用（windows裡安裝）圖文詳解

本博文的主要內容有　　.資料庫的概述　　.mysql-5.7.11-winx64.zip 的下載　 .mysql-5.7.11-winx64.zip 的安裝　　.mysql-5.7.11-winx64.zip 的配置　　.mysql-5.7.11-winx64.zip 的使用

mysql樂觀鎖總結和實踐（含demo例子）

上一篇文章《MySQL悲觀鎖總結和實踐》談到了MySQL悲觀鎖，但是悲觀鎖並不是適用於任何場景，它也有它存在的一些不足，因為悲觀鎖大多數情況下依靠資料庫的鎖機制實現，以保證操作最大程度的獨佔性。如果加鎖的時間過長，其他使用者長時間無法訪問，影響了程式的併發訪問性，同時這樣

Js新增元素、刪除元素誤區詳解【push()和add()；splice()和remove()】

新增元素之誤區一，push()和add()使用及區別 push()方法是給陣列尾巴新增一個或多個元素,返回的是新增陣列後該陣列長度。測試程式碼： var arr = [1,2,3,4]; var arrlength = arr.push(5); console.log("arr

js中建立、新增、刪除、移動、複製和查詢（子）節點

1）建立新節點createDocumentFragment() //建立一個DOM片段createElement_x() //建立一個具體的元素createTextNode() //建立一個文字節點2）新增、移除、替換、插入appendChild() //新增removeC

JS中const、var和let區別

方法 pre 命令 con 使用它的 comm 作用影響在JavaScript中有三種聲明變量的方式：var、let、const。 1.const 聲明創建一個只讀的常量。這不意味著常量指向的值不可變，而是變量標識符的值只能賦值一次，必須初始化。 const b

js中toLocalString()、toString()和valueOf()方法

布爾 locals body 值類型屬於計算函數 pos 使用所有的對象都具有toLocaleString()、toString()和valueOf()方法,toString() 1、Array.toString()：將數組轉換成一個字符串，並且返回這個字符串。描述

Three.js導入gltf模型和動畫

var ble 播放 mode req begin stat mod animate 核心代碼復雜的3D模型一般都是用第三方建模工具生成，然後加載到three中 three官方推薦使用gltf格式的文件，代表編輯器是blender 本文生成了自定義生成了一個blend

three.js入門系列之視角和輔助線

假設你已經建立好了three.js的開發環境（我是寫在vue專案中的），那麼接下來，從頭開始演示是如何用three.js來構建3D圖形的。（筆記本寫的程式碼，螢幕小，所以為了能夠整屏看到完整程式碼，就將字型縮小了，如果覺得看不清的，可以另行放大）一、頁面DOM結構正如你所見，這就是一

three.js 變換大小、角度、位移控制元件 TransformControls.js

TransformControls.js：滑鼠操控物體移動、縮放、旋轉的控制元件（物體操作工具）該控制元件可以實現視覺化操作三維模型，通過選中一個三維模型，然後通過控制元件物件的方法attach()可以把選中的三維模型與控制元件TransformControls繫結，你

JS--理解call、apply和bind

call、apply和bind 　　call，apply是Function原型中的方法，它們的作用一樣，區別在於傳入引數的方式不同。 call(thisArg, arg1, arg2...) 　　傳入的引數不固定，第一個引數用來指定函式內部this的指向，從第二個引數往後的所有元素引數依

JS中建構函式與普通函式的區別及JS建構函式、原型和例項的關係

JS中建構函式與普通函式的區別: https://www.cnblogs.com/cindy79/p/7245566.html JS建構函式、原型和例項的關係: https://blog.csdn.net/u012443286/article/details/78823955 Java

three.js入門系列之材質

一、基礎網孔材料 MeshBasicMaterial 圖示（光源是(0,1,0)處的點光源）：二、深度網孔材料 MeshDepthMaterial （由於只是改了材料名，程式碼將不重複貼出）在這裡，有必要提一下遠景相機的屬性了：大概就是這麼個意思，下面，我們把上述兩個引

js中continue、break和return區別

很多人將continue、break和return混淆，不知道該怎麼用才對，下面我簡單講述一下這三個語句的作用； return：它是用在一個函式中的，他可以跳出這個迴圈（return後面的語句將不再執行），然後返回一個值（僅一個），如果你想返回多個值，那麼就要將多個值寫到一個物件中，

Three.JS 新增燈光、材質和陰影（第一個例子）

相關推薦