three.js - 添加材質燈光陰影

時間 2019-11-10

原文原文鏈接

看下運行效果：javascript

源碼解釋：css

<!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;html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

three.js - 添加材質 燈光 陰影

three.js - 添加材質燈光陰影