実現したいこと
ここに実現したいことを箇条書きで書いてください。
もしくは使用上不可能ですか？
文字数の関係でぐらいスケールシェーダーの書いてあるファイルは省略しています。
該当のソースコード
Three.js
1ソースコード
2<!DOCTYPE html>
3<html>
4
5<head>
6 <title>test vr</title>
7 <script type="text/javascript" src="../libs/three.js"></script>
8
9 <script type="text/javascript" src="../libs/stats.js"></script>
10 <script type="text/javascript" src="../libs/dat.gui.js"></script>
11 <script type="text/javascript" src="../libs/controls/OrbitControls.js"></script>
12 <script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script>
13 <script type="text/javascript" src="../libs/shaders/CopyShader.js"></script>
14
15 <script type="text/javascript" src="../libs/postprocessing/EffectComposer.js"></script>
16
17 <script type="text/javascript" src="../libs/postprocessing/MaskPass.js"></script>
18 <script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script>
19 <script type="text/javascript" src="custom-shader.js"></script>
20
21 <script type="text/javascript" src="../libs/postprocessing/RenderPass.js"></script>
22
23 <script type="text/javascript" src="../libs/postprocessing/GlitchPass.js"></script>
24 <script type="text/javascript" src="../libs/shaders/DigitalGlitch.js"></script>
25
26
27 <!-- vr -->
28 <script type="text/javascript" src="../libs/WebVR.js"></script>
29 <script type="text/javascript" src="../libs/effects/VREffect.js"></script>
30 <script type="text/javascript" src="../libs/controls/VRControls.js"></script>
31 <!-- for cardboard-->
32 <script type="text/javascript" src="../libs/effects/CardboardEffect.js"></script>
33 <script type="text/javascript" src="../libs/controls/DeviceOrientationControls.js"></script>
34
35 <style>
36 body {
37 /* set margin to 0 and overflow to hidden, to go fullscreen */
38 margin: 0;
39 overflow: hidden;
40 }
41 </style>
42</head>
43<body>
44
45<div id="Stats-output">
46</div>
47<!-- Div which will hold the Output -->
48<div id="WebGL-output">
49</div>
50
51<!-- Javascript code that runs our Three.js examples -->
52<script type="text/javascript">
53 // for webvr
54 //if (WEBVR.isLatestAvailable() === false) {
55 // document.body.appendChild(WEBVR.getMessage());
56 //}
57
58 // once everything is loaded, we run our Three.js stuff.
59 function init() {
60
61 var stats = initStats();
62
63 // create a scene, that will hold all our elements such as objects, cameras and lights.
64 var scene = new THREE.Scene();
65
66 // create a camera, which defines where we're looking at.
67 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
68
69 // create a render and set the size
70 var webGLRenderer = new THREE.WebGLRenderer();
71 webGLRenderer.setClearColor(new THREE.Color(0x000));
72 webGLRenderer.setSize(window.innerWidth, window.innerHeight);
73 webGLRenderer.shadowMap.enabled = true;
74
75 var raycaster = new THREE.Raycaster();
76
77 //地球
78 var earth = createEarthMesh(new THREE.SphereGeometry(10, 80, 80));
79 earth.position.y = -10;
80 scene.add(earth);
81
82 var selectedDebri;
83
84 // position and point the camera to the center of the scene
85
86 camera.position.y = 15;
87
88 //camera.lookAt(new THREE.Vector3(0, 0, 0));
89
90 //camera.position.x = -30;
91 //camera.position.y = 40;
92 //camera.position.z = 30;
93 camera.lookAt(scene.position);
94
95 // vr
96 // for webvr
97 //var controls = new THREE.VRControls(camera);
98 //var effect = new THREE.VREffect(webGLRenderer);
99 var clock = new THREE.Clock();
100 if (WEBVR.isAvailable() === true) {
101 document.body.appendChild(WEBVR.getButton(effect));
102 }
103 // for cardboard
104 var controls = new THREE.DeviceOrientationControls(camera);
105 var effect = new THREE.CardboardEffect(webGLRenderer);
106
107 var orbitControls = new THREE.OrbitControls(camera);
108 orbitControls.autoRotate = false;
109
110 //基本の光
111 var ambi = new THREE.AmbientLight(0x181818);
112 scene.add(ambi);
113
114 //無限遠光源
115 var directionalLight = new THREE.DirectionalLight(0xffffff);
116 directionalLight.position.set(100, 0, 150);
117 earth.add(directionalLight);
118
119 //無限遠光源（反対）
120 var directionalBackLight = new THREE.DirectionalLight(0xffffff);
121 directionalBackLight.position.copy(directionalLight.position.clone().negate());
122 directionalBackLight.intensity = 0.7;
123 earth.add(directionalBackLight);
124
125 var spotLight = new THREE.DirectionalLight(0xffffff);
126 spotLight.position.set(550, 100, 550);
127 spotLight.intensity = 0.6;
128
129 scene.add(spotLight);
130
131 //html属性を出力
132 document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);
133
134 var renderPass = new THREE.RenderPass(scene, camera);
135
136 var effectGlitch = new THREE.GlitchPass(64);
137 effectGlitch.renderToScreen = true;
138
139 var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
140 effectCopy.renderToScreen = true;
141 var shaderPass = new THREE.ShaderPass(THREE.CustomGrayScaleShader);
142 shaderPass.enabled = true;
143 var bitPass = new THREE.ShaderPass(THREE.CustomBitShader);
144 bitPass.enabled = true;
145
146 var composer = new THREE.EffectComposer(webGLRenderer);
147 composer.addPass(renderPass);
148 composer.addPass(shaderPass);
149 composer.addPass(bitPass);
150 composer.addPass(effectCopy);
151 composer.addPass(effectGlitch);
152
153
154 webGLRenderer.domElement.addEventListener('click', function() {
155 if (!document.mozFullScreen && !document.webkitIsFullScreen) {
156 var canvas = webGLRenderer.domElement;
157 var requestFullScreen = canvas.mozRequestFullScreen || canvas.webkitRequestFullScreen;
158 requestFullScreen.bind(canvas)();
159 }
160 }.bind(this));
161 window.addEventListener('resize', onWindowResize, false);
162 function onWindowResize() {
163 camera.aspect = window.innerWidth / window.innerHeight;
164 camera.updateProjectionMatrix();
165 effect.setSize(window.innerWidth, window.innerHeight);
166 }
167
168
169
170 var step = 0;
171
172 render();
173
174 //地球
175 function createEarthMesh(geom) {
176 var textureLoader = new THREE.TextureLoader();
177 var planetTexture = textureLoader.load("../assets/textures/planets/Earth.png");
178 var specularTexture = textureLoader.load("../assets/textures/planets/EarthSpec.png");
179 var normalTexture = textureLoader.load("../assets/textures/planets/EarthNormal.png");
180
181
182 var planetMaterial = new THREE.MeshPhongMaterial();
183 planetMaterial.map = planetTexture;
184 planetMaterial.specularMap = specularTexture;
185 planetMaterial.normalMap = normalTexture;
186
187 planetMaterial.normalScale = new THREE.Vector2(5, 5);
188 planetMaterial.shininess = 100;
189 planetMaterial.specular = new THREE.Color(0x4444aa);
190 planetMaterial.emissive = new THREE.Color(0x181818);
191
192 // create a multimaterial
193 var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
194
195 return mesh;
196 }
197
198
199 function render() {
200
201 var delta = clock.getDelta();
202 //orbitControls.update(delta);
203 controls.update(delta);
204 //controls.update();
205
206 earth.rotation.z -= 0.001;
207
208 // render using requestAnimationFrame
209 requestAnimationFrame(render);
210 // vr
211 //webGLRenderer.render(scene, camera);
212 effect.render(scene, camera);
213 //composer.render(delta);
214
215 }
216
217 function initStats() {
218
219 var stats = new Stats();
220 stats.setMode(0); // 0: fps, 1: ms
221
222 // Align top-left
223 stats.domElement.style.position = 'absolute';
224 stats.domElement.style.left = '0px';
225 stats.domElement.style.top = '0px';
226
227 document.getElementById("Stats-output").appendChild(stats.domElement);
228
229 return stats;
230 }
231 }
232 window.onload = init;
233</script>
234</body>
235</html>
Q&A
