黎明（dawn）

最新推荐文章于 2020-03-30 11:14:58 发布

Super_Calvin

最新推荐文章于 2020-03-30 11:14:58 发布

阅读量277

点赞数

分类专栏： # 光照与阴影文章标签： html css javascript 黎明流动光影

本文链接：https://blog.csdn.net/weixin_45544796/article/details/104813791

版权

光照与阴影专栏收录该内容

13 篇文章 0 订阅

订阅专栏

黎明（dawn）

示例
HTML
JS

更多有趣示例尽在 知屋安砖社区

示例

在这里插入图片描述

HTML

<html>
	<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>[dawn]</title>
		<style>
			body {
				margin: 0px;
    			overflow: hidden; 
    			background-color: #FF7F50;
    			font-family: 'Arial';
    		}
			
			#help{
				position: absolute;
			    top: 1%;
			    left: 1%;
			    font-size: 30px;
			    color: white;
			}

		</style>
	</head>
	<body>
		<div id="help">[dawn]</div>

	</body>
</html>

JS

//Created by XORXOR: 2016 - codevember
// Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
var container;
var camera, controls, scene, renderer;
var texture;
var sky, sunSphere;

var elements = [];
var uniforms;

var azimuth = 0.50;
var inclination = .3;
init()
animate();

function initSky() {

    // Add Sky Mesh
    sky = new THREE.Sky();
    scene.add( sky.mesh );

    // Add Sun Helper
    sunSphere = new THREE.Mesh(
        new THREE.SphereBufferGeometry( 20000, 16, 8 ),
        new THREE.MeshBasicMaterial( { color: 0xFF0000 } )
    );
    sunSphere.position.y = - 70000;
    sunSphere.visible = false;
    scene.add( sunSphere );

    uniforms = sky.uniforms;
    uniforms.turbidity.value = 16;
    uniforms.rayleigh.value =  1.027;
    uniforms.luminance.value = 1;
    uniforms.mieCoefficient.value = 0.01;
    uniforms.mieDirectionalG.value = 0.97;

    moveSun();

}

function moveSun(time){
    var distance = 4000;
    var theta = Math.PI * ( inclination - 0.5 );
    var phi = 2 * Math.PI * (azimuth - 0.5 );

    sunSphere.position.x = distance * Math.cos( phi );
    sunSphere.position.y = distance * Math.sin( phi ) * Math.sin( theta );
    sunSphere.position.z = distance * Math.sin( phi ) * Math.cos( theta );

    sky.uniforms.sunPosition.value.copy( sunSphere.position );
}

function init() {

    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, .1, 20000 );
    camera.position.set( -.6, 5.2, 0 );
    camera.rotation.set(-Math.PI/2,-Math.PI/2,-Math.PI/2)
    scene = new THREE.Scene();

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0xFF0000);

    document.body.appendChild( renderer.domElement );

    //LIGHT
    var ambient = new THREE.AmbientLight( 0xFFD700,1 );
    scene.add(ambient);
    //STUFF

    n = 100;
    for (var i = n - 1; i >= 0; i--) {
        var elementGeometry = new THREE.BoxGeometry(4, 4, 4);
        var elementMaterial = new THREE.MeshLambertMaterial({opacity:1, transparent:true,color:0xffffff});
        //elementMaterial.color.setHSL(Math.random(),.45,.51)
 
        var element = new THREE.Mesh(elementGeometry, elementMaterial);
        scene.add(element);   
        element.scale.set( (Math.random()*.8)*14,.3,.3 )
        element.position.y = 33 + (Math.random()-.5) * 70
        element.position.z = (Math.random()-.5) * 500

        element.position.x = Math.random()*1000
        elements.push(element) 
    }

    //mirrorball
    var radius = 5;
    mirrorCamera = new THREE.CubeCamera( 0.1, 5000, 1024 );
    mirrorCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
    scene.add( mirrorCamera );
    
    var geometry = new THREE.SphereGeometry( radius, 256,256 );
    var mat = new THREE.MeshBasicMaterial( { envMap: mirrorCamera.renderTarget.texture,fog:true,shading: THREE.SmoothShading});

    obj = new THREE.Mesh(geometry,mat);

    scene.add(obj);

    initSky();
    window.addEventListener( 'resize', onWindowResize, false );
}

function animate() {

    obj.visible = false; 
    mirrorCamera.updateCubeMap( renderer, scene );
    obj.visible = true; 

    for (var i = elements.length - 1; i >= 0; i--) {
        if (elements[i].position.x < -100) {
            elements[i].position.x = 1000
            elements[i].material.opacity = 0;
        }
        elements[i].position.x -= 1+4 * (i/elements.length);
        elements[i].material.opacity += .01;
    }
    
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.left = window.innerWidth / - 2;
    camera.right = window.innerWidth / 2;
    camera.top = window.innerHeight / 2;
    camera.bottom = window.innerHeight / - 2;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}