源链接:https://www.youtube.com/watch?v=MtlSIRh5r_E
源链接:https://www.bilibili.com/video/BV16Y4y1w7oY/?spm_id_from=333.788.recommend_more_video.0&vd_source=36d4e6a338b4da1890ddbdd4fd2af24e
运行地址https://playground.babylonjs.com/#TH2XS4#26
材质
https://nme.babylonjs.com/#N8UNHX#22
代码:
var createScene = function () {
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);
var hdrTexture = new BABYLON.HDRCubeTexture("https://smashelbow.github.io/test/chun.hdr", scene, 128, false, true, false, true);
// This creates and positions a free camera (non-mesh)
var camera = new BABYLON.ArcRotateCamera("camera", 3.3, 1.33, 120, BABYLON.Vector3.Zero(), scene)
scene.environmentTexture = hdrTexture
scene.environmentIntensity = 0.5
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
camera.wheelPrecision = 100
camera.minZ = 10
camera.lowerRadiusLimit = 1
camera.inertia = 0.9
camera.panningInertia = 0.9
camera.panningSensibility = 300
camera.angularSensibilityX = 800
camera.angularSensibilityY = 800
var rect = engine.getRenderingCanvasClientRect();
var hw = rect.width
var hh = rect.height
console.log(rect.width);
var ortCamFOV = 1000
scene.registerBeforeRender(function () {
rect = engine.getRenderingCanvasClientRect();
hw = rect.width / ortCamFOV;
hh = rect.height / ortCamFOV;
camera.orthoLeft = -hw * camera.radius;
camera.orthoRight = hw * camera.radius;
camera.orthoBottom = -hh * camera.radius;
camera.orthoTop = hh * camera.radius;
// camera.beta = 0.01 - 0.01
camera.wheelPrecision = 200 / camera.radius
camera.panningSensibility = 3000 / camera.radius
})
var sun = new BABYLON.DirectionalLight("sun",new BABYLON.Vector3(0.6, -1, 0.8),scene)
sun.diffuse = new BABYLON.Color3(1, 0.99, 0.87)
var moonSky = new BABYLON.HemisphericLight("moonSky", new BABYLON.Vector3(0, 1, 0), scene)
moonSky.specular = BABYLON.Color3.Black()
moonSky.diffuse = new BABYLON.Color3(0.05, 0.08, 0.33)
moonSky.intensity = 5
var moon = new BABYLON.DirectionalLight("moon", new BABYLON.Vector3(-0.6, -1, -0.8), scene)
moon.diffuse = new BABYLON.Color3(1, 0.98, 0.89)
// moon.specular = new BABYLON.Color3.Black()
moon.intensity = 1
// Our built-in 'sphere' shape.
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 6000, segments: 32 }, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// var knot = new BABYLON.CreateTorusKnot("knot",{},scene)
// knot.position.y = 4
BABYLON.SceneLoader.Append("https://smashelbow.github.io/test/", "landscape.glb", scene, function (scene) {
scene.getMeshByName("__root__").scalingDeterminant = 100
scene.getMeshByName("__root__").position.y = 0.5
BABYLON.NodeMaterial.ParseFromSnippetAsync("#N8UNHX#22", scene).then((node) => {
scene.getMeshByName("landscape_0.002").material = node;
// node.getInputBlockByPredicate((b) => b.name === "diffuseCut").value = 0.21
// node.getInputBlockByPredicate((b) => b.name === "shadowItensity").value = 0.71
// node.getInputBlockByPredicate((b) => b.name === "rimIntensity").value = 0.08
});
})
// Our built-in 'ground' shape.
// var ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 99999, height: 99999 }, scene);
BABYLON.NodeMaterial.ParseFromSnippetAsync("#4YYWPX#12", scene).then((skymat) => {
skymat.backFaceCulling = false
sphere.material = skymat
skymat.getInputBlockByPredicate((b) => b.name === "masterSpeed").value = 2.5
skymat.getInputBlockByPredicate((b) => b.name === "masterScale").value = 6
var i = 1
scene.registerBeforeRender(function () {
i += 0.005
skymat.getInputBlockByPredicate((b) => b.name === "day").value = Math.cos(i) * 0.4 + 0.6
scene.environmentIntensity = Math.cos(i) * 0.48 + 0.52
scene.environmentTexture.level = Math.cos(i) * 0.45 + 0.55
moonSky.intensity = (1 - (Math.cos(i) * 0.4 + 0.6))
moon.intensity =(1 - (Math.cos(i) * 0.4 + 0.6))*3
sun.intensity = Math.max(Math.cos(i)+0.5,0)*2
})
// scene.meshes.forEach(m => {
// if (m.name.indexOf("sphere") !== 1 ) {
// m.material = skymat
// }
// })
});
return scene;
};