需要電子檔書籍或者源碼可以Q羣：828202939 希望可以和大家一起學習、一起進步！！
如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，博主會及時修改！！！！！
下面分享運用封裝好的最基本的shader寫的一個簡單小星系的案例！
錄屏：
代碼：
<html>
<head>
<title>threeJS25-shader04-簡單的小星系</title>
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
#WebGL {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
</style>
</head>
<body>
<div id="WebGL"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script src="../../../build/three.js"></script>
<script src="../../js/shaders/BasicShader.js"></script>
<script src="../../js/controls/OrbitControls.js"></script>
<script>
'use strict';
var container, camera, scene, renderer, animate, controls; //常用變量
var target = new THREE.Vector3(0, 0, 0);
var webGLW = $('#WebGL').width();
var webGLH = $('#WebGL').height();
init();
animate();
function init() {
container = document.getElementById('WebGL');
scene = new THREE.Scene();
// scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000); //霧
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 2000, 2000);
camera.lookAt(target);
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
loadModel(); //添加小球
rendererScene(); //場景渲染
OrbitControls(camera, renderer); //OrbitControls控件模塊，90版本鼠標右鍵上下是移動，96版本之後右鍵上下是縮放
window.addEventListener('resize', onWindowResize, false); //監聽屏幕變化
}
function loadModel() { //模型
var shader = THREE.BasicShader;
var uniforms = shader.uniforms;
var vertexShader = shader.vertexShader;
var fragmentShader = shader.fragmentShader;
var texture1 = new THREE.CanvasTexture(generateTexture(0, 0.5, 1), THREE.UVMapping);
var texture2 = new THREE.TextureLoader().load('../../textures/land_ocean_ice_cloud_2048.jpg');
var materials = [
new THREE.MeshNormalMaterial(),
new THREE.MeshDepthMaterial(),
new THREE.MeshBasicMaterial({
color: 0x0066ff,
blending: THREE.AdditiveBlending,
transparent: true,
depthWrite: false
}),
new THREE.MeshBasicMaterial({
color: 0xffaa00,
wireframe: true
}),
new THREE.MeshBasicMaterial({
map: texture1,
fog: false
}),
new THREE.MeshBasicMaterial({
map: texture2
}),
new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
transparent: true
}),
new THREE.MeshLambertMaterial({
map: texture2
}),
new THREE.MeshLambertMaterial({
color: 0xdddddd
}),
new THREE.MeshPhongMaterial({
color: 0xdddddd,
specular: 0x009900,
shininess: 30,
flatShading: true
}),
new THREE.MeshPhongMaterial({
color: 0xdddddd,
specular: 0x009900,
shininess: 30
})
];
var geometry = new THREE.SphereBufferGeometry(25, 32, 16);
for (var i = 0; i < 25; i++) {
// 隨機排序
var index = Math.floor( Math.random() * materials.length );
var material = materials[index];
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = Math.random() * 2000 - 1000;
// mesh.position.y = Math.random() * 2000 - 1000;
mesh.position.z = Math.random() * 2000 - 1000;
mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
// mesh.rotation.y = Math.random() * 2 * Math.PI;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 2 + 0.1;
scene.add(mesh);
}
}
function generateTexture(r, g, b) {
var canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
var context = canvas.getContext('2d');
var image = context.getImageData(0, 0, 256, 256);
var x = 0,
y = 0,
p;
for (var i = 0, j = 0, l = image.data.length; i < l; i += 4, j++) {
x = j % 256;
y = x == 0 ? y + 1 : y;
p = Math.floor(x ^ y);
image.data[i] = ~~p * r;
image.data[i + 1] = ~~p * g;
image.data[i + 2] = ~~p * b;
image.data[i + 3] = 255;
}
context.putImageData(image, 0, 0);
return canvas;
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function rendererScene() {
renderer = new THREE.WebGLRenderer({
antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
container.appendChild(renderer.domElement);
}
function OrbitControls(camera, renderer) {
//OrbitControls控件操作模塊
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = target; //控制的target
controls.autoRotate = true; //是否自動旋轉
controls.autoRotateSpeed = 0.5; //自動旋轉速度，正比
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
controls.update();
camera.lookAt(target);
renderer.render(scene, camera);
}
</script>
</body>
</html>