
- BabylonJS 教程
- BabylonJS - 主頁
- BabylonJS - 簡介
- BabylonJS - 環境設定
- BabylonJS - 概述
- BabylonJS - 基本元素
- BabylonJS - 材質
- BabylonJS - 動畫
- BabylonJS - 攝像機
- BabylonJS - 燈光
- BabylonJS - 引數形狀
- BabylonJS - 網格
- VectorPosition and Rotation(向量位置和旋轉)
- BabylonJS - 貼花
- BabylonJS - Curve3
- BabylonJS - 動態紋理
- BabylonJS - 視差對映
- BabylonJS - 鏡頭眩光
- BabylonJS - 建立螢幕截圖
- BabylonJS - 反射探針
- 標準渲染管道
- BabylonJS - ShaderMaterial(著色器材質)
- BabylonJS - 骨骼
- BabylonJS - 物理引擎
- BabylonJS - 播放聲音和音樂
- BabylonJS 有用資源
- BabylonJS - 快速指南
- BabylonJS - 有用資源
- BabylonJS - 討論
BabylonJS - 高光
當光線照射到 Specular(高光)屬性時,該屬性會反射出像鏡子一樣的效果。Specular(高光)提供了兩個屬性:specularColor 和 specularTexture。顏色和紋理在光線照射的方向上顯示。它就像網格上的聚光燈。可以在下面的示例中看到相同的效果。
高光顏色的語法
materialforbox.specularColor = new BABYLON.Color3(1.0, 0.2, 0.7);
高光紋理的語法
materialforbox.specularTexture = new BABYLON.Texture("grass.png", scene);
高光顏色的示例
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.7; var materialforbox = new BABYLON.StandardMaterial("texture1", scene); var box = BABYLON.Mesh.CreateBox("box", '3', scene); box.material = materialforbox; materialforbox.specularColor = new BABYLON.Color3(1, 0.8, 0.8); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html>
高光顏色的輸出
以上程式碼會生成以下輸出 -

高光紋理的示例
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function() { var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); light.intensity = 0.7; var materialforbox = new BABYLON.StandardMaterial("texture1", scene); var box = BABYLON.Mesh.CreateBox("box", '3', scene); box.material = materialforbox; materialforbox.specularTexture = new BABYLON.Texture("images/rainbow.png", scene); return scene; }; var scene = createScene(); engine.runRenderLoop(function() { scene.render(); }); </script> </body> </html>
高光紋理的輸出
以上程式碼會生成以下輸出 -

在此示例中,我們使用了名為 rainbow.png 的影像。這些影像儲存在 images/ 資料夾中,並如下方貼上以供參考。你可以下載你選擇的任何影像,然後將其用於示例連結。
用於盒子的紋理 - images/rainbow.png

babylonjs_materials.htm
廣告