shader04-简单的小星系

需要电子档书籍或者源码可以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; //控制的targetcontrols.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>

shader04-简单的小星系相关推荐

实用c语言函数源码,C语言编写简单朗读小工具（有源码）
原标题:C语言编写简单朗读小工具(有源码) 最近不少人在后台留言说学C都是面对枯燥的控制台程序,能不能体现一下C语言的实际用途,今天我们就理论结合实践一把:C语言结合VBS脚本编写一个简单的朗读小工具 ...
小程序生命周期_来，简单说说小程序的生命周期?
简单说说小程序的生命周期? 在小程序中生命周期分为三大类应用生命周期页面生命周期组件生命周期应用生命周期 onLaunch(){ console.log('onLaunch监听小程序初始化') ...
java简单通讯录的实现02person类_用java实现简单的小游戏（你一定玩过）
用java实现简单的小游戏(你一定玩过) 对于java初学者来说,通过一些学习小游戏来对swing学习以及对java基础的学习是一个好的方法,同时也给学习带来了很多的乐趣,接下来就给大家分享一个jav ...
java实现简单窗体小游戏----球球大作战
java实现简单窗体小游戏----球球大作战需求分析 1.分析小球的属性: 坐标.大小.颜色.方向.速度 2.抽象类:Ball 设计类:BallMain-创建窗体 BallJPanel- ...
python做好的程序如何变成小程序-使用python编写简单的小程序编译成exe跑在win10上...
每天的工作其实很无聊,早知道应该去IT公司闯荡的.最近的工作内容是每逢一个整点,从早7点到晚11点,去查一次客流数据,整理到表格中,上交给素未蒙面的上线,由他呈交领导查阅. 人的精力毕竟是有限的,所以 ...
python基础代码事例-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
python程序实例教程基础-Python简单基础小程序的实例代码
1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i, ...
简单的小程序实现ATM机操作
简单的小程序实现ATM机操作代码如下: package Day06; import java.util.Scanner; public class TestAccount { public stat ...
基于vue-cli、elementUI的Vue超简单入门小例子
基于vue-cli.elementUI的Vue超简单入门小例子这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单 ...

shader04-简单的小星系

shader04-简单的小星系相关推荐

最新文章

热门文章