Getting started with Three.js : Part2

Three.js(r55) skybox and cube reflection material tutorial 教學

skybox demo (for Chrome browser)

loading cube material:
var path = "images/";
var format = '.jpg';
var urls = [
path + 'snow_positive_x' + format, path + 'snow_negative_x' + format,
path + 'snow_positive_y' + format, path + 'snow_negative_y' + format,
path + 'snow_positive_z' + format, path + 'snow_negative_z' + format];
var textureCube = THREE.ImageUtils.loadTextureCube(urls);

ball - cube reflection material:
var ball = new THREE.Mesh( new THREE.SphereGeometry( 100, 32, 16 ), new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } ) );

skybox:
var shader = THREE.ShaderLib["cube"];
shader.uniforms["tCube"].value = textureCube;
var material = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
});

add mesh:

var skybox = new THREE.Mesh(new THREE.CubeGeometry(100000, 100000, 100000), material);

source code:

	window.onload = function() {
	// detector
	if (!Detector.webgl) Detector.addGetWebGLMessage();
	// main
	var container;
	var stats;
	var mouseX, mouseY;
	var camera, scene, renderer, light, sunLight;
	var cube;
	var mouseX = 0;
	var mouseY = 0;
	var windowHalfX = window.innerWidth * 0.5;
	var windowHalfY = window.innerHeight * 0.5;
	init();
	render();
	function init() {
	// create a div element to contain the render
	container = document.createElement('div');
	document.body.appendChild(container);
	// scene
	scene = new THREE.Scene();
	// camera
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 100000);
	camera.position.set(0, 500, 1000);
	camera.lookAt(scene.position);
	//scene.add(camera);
	// light
	sunLight = new THREE.DirectionalLight(0xffeedd, 1);
	sunLight.position.set(0.3, - 1, - 1).normalize();
	scene.add(sunLight);
	light = new THREE.PointLight(0xffffff, 1.5);
	light.position.set(-500, 1000, 500);
	scene.add(light);
	// This light's color gets applied to all the objects in the scene globally.
	scene.add(new THREE.AmbientLight(0x404040));
	// geometry + material
	// cube
	cube = new THREE.Mesh(new THREE.CubeGeometry(150, 150, 150), new THREE.MeshLambertMaterial({
	color: 0x660000
	}));
	cube.position.set(-100, 0, 0);
	scene.add(cube);
	// floor
	var floor = new THREE.Mesh(new THREE.PlaneGeometry(2000, 2000, 20, 20), new THREE.MeshBasicMaterial({
	color: 0x555555,
	wireframe: true
	}));
	floor.position.y = -150;
	floor.rotation.x = -Math.PI * 0.5;
	scene.add(floor);
	// loading cube material
	var path = "images/";
	var format = '.jpg';
	var urls = [
	path + 'snow_positive_x' + format, path + 'snow_negative_x' + format,
	path + 'snow_positive_y' + format, path + 'snow_negative_y' + format,
	path + 'snow_positive_z' + format, path + 'snow_negative_z' + format];
	var textureCube = THREE.ImageUtils.loadTextureCube(urls);
	// ball - cube reflection material
	var ball = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 16), new THREE.MeshBasicMaterial({
	color: 0xffffff,
	envMap: textureCube
	}));
	//ball.scale.x = ball.scale.y = ball.scale.z = Math.random() * 3 + 1;
	ball.position.set(150, 0, 0);
	scene.add(ball);
	// skybox
	var shader = THREE.ShaderLib["cube"];
	shader.uniforms["tCube"].value = textureCube;
	var material = new THREE.ShaderMaterial({
	fragmentShader: shader.fragmentShader,
	vertexShader: shader.vertexShader,
	uniforms: shader.uniforms,
	depthWrite: false,
	side: THREE.BackSide
	});
	var skybox = new THREE.Mesh(new THREE.CubeGeometry(100000, 100000, 100000), material);
	scene.add(skybox);
	//renderer
	renderer = new THREE.WebGLRenderer({
	antialias: true
	});
	renderer.setSize(window.innerWidth, window.innerHeight);
	// add renderer
	container.appendChild(renderer.domElement);
	// stats
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.left = '0px';
	stats.domElement.style.top = '0px';
	container.appendChild(stats.domElement);
	// addEventListener
	document.addEventListener('mousemove', onMouseMove, false);
	// stage resize
	window.addEventListener('resize', onWindowResize, false);
	}
	function onWindowResize(e) {
	windowHalfX = window.innerWidth * 0.5,
	windowHalfY = window.innerHeight * 0.5,
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}
	function onMouseMove(e) {
	mouseX = (e.clientX - windowHalfX) * 10;
	mouseY = (e.clientY - windowHalfY) * 10;
	}
	function render() {
	requestAnimationFrame(render);
	//cube.rotation.x += 0.01;
	//cube.rotation.y += 0.02;
	//cube.rotation.x = mouseY * 0.005;
	//cube.rotation.y = mouseX * 0.005;
	camera.position.x += (mouseX - camera.position.x) * .02;
	camera.position.y += (-mouseY - camera.position.y) * .02;
	camera.lookAt(scene.position);
	renderer.render(scene, camera);
	stats.update();
	}
	}

view raw skybox.js hosted with ❤ by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<title>Getting started with Three.js</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<script src="libs/three.min.js"></script>
	<script src="libs/stats.min.js"></script>
	<script src="libs/Detector.js"></script>
	<script src="js/skybox.js"></script>
	</head>
	<body>
	<div id="info">Getting started with Three.js - skybox and cube reflection material tutorial</div>
	</body>
	</html>

view raw three_skybox.html hosted with ❤ by GitHub