Three.js光与影

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var renderer, scene, camera, geometry, mouse;

var ww = window.innerWidth,
wh = window.innerHeight;

function init(){
	renderer = new THREE.WebGLRenderer();

renderer.setSize(ww,wh);
	renderer.setClearColor(0x000000);
	document.getElementById("stage").appendChild(renderer.domElement);

scene = new THREE.Scene();
	scene.fog = new THREE.FogExp2( 0x000000, 0.0010 );

camera = new THREE.PerspectiveCamera(50,ww/wh, 0.1, 10000 );
	camera.position.set(0,500,1000);
	camera.lookAt(new THREE.Vector3(0,0,0));
	scene.add(camera);

directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
	directionalLight.position.set( 0, 60, 600 );
	directionalLight.castShadow = true;
	scene.add( directionalLight );
	console.log(directionalLight.position);

var light = new THREE.AmbientLight( 0x222222 );
	scene.add( light );

renderer.shadowMapEnabled = true;
	renderer.shadowMapSoft = false;

renderer.shadowCameraNear = 3;
	renderer.shadowCameraFar = camera.far;
	renderer.shadowCameraFov = 50;

renderer.shadowMapBias = 0.0039;
	renderer.shadowMapDarkness = 0.5;
	renderer.shadowMapWidth = 1024;

mouse = new THREE.Vector2(0, 0);

document.addEventListener("mousemove", mouseMove);
	document.addEventListener("mousewheel", mouseWheel);

city();

}

var particles = new THREE.Object3D();

var mouseWheel = function(e){
	camera.position.y += e.deltaY;
};

var mouseMove =  function(e){
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};

var city = function(){

var city = new THREE.Object3D();

scene.add( city );

var geometry = new THREE.PlaneGeometry( length*60,  length*60, 1 );
	var material = new THREE.MeshLambertMaterial( { color:0xff0000, side: THREE.DoubleSide} );
	var ground   = new THREE.Mesh( geometry, material );
	ground.rotation.x = -Math.PI/2;
	ground.position.y = -1;
	ground.receiveShadow = true;
	scene.add(ground);

render();

}

var render = function (a) {
	requestAnimationFrame(render);

directionalLight.position.x = mouse.x*1000;	
	directionalLight.position.y = mouse.y*1000;

camera.lookAt(new THREE.Vector3(0,0,0));

renderer.render(scene, camera);
};

init();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg