2013年2月6日 星期三

Getting started with Three.js : Part2

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


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:

沒有留言:

張貼留言