JSFIDDLE 助力 Threejs 功能探秘

JSFIDDLE 助力 WebGL 功能探秘

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、HTML5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

以下示例能产生基本几何体的阴影投射，还有另一份代码，是无法投射的，和本份能投射的代码，相差不多，但确始终不得其法，需进一步核对，才能知道具体差异在哪里，哪些关键的部位起了阴影投射的作用。

还是静下心来，把每一行代码搞清楚吧，这才是捷径！

往往追求捷径的结果，就是盲人摸象，最后，越摸越离谱，连最初的无意识界都没有了。

所以佛祖告诫我们，要追求本真，象孩童一样。

其实，就是去除妄念和猜测，实事求是地按事情本来的面目去考虑问题，才不会被妄端猜测出来的东西影响你的心绪，以至偏离正途，生出事端来。

在微信中流传的一条信息，大概意思是，只要你想了，就会去不知不觉地做，做了就会产生效果，效果持续久了，就会变成习惯，习惯多了就形成性格，而性格决定着命运。

所以，要想改变，首先从想法开始改变。

这不算是唯心主义论吧，有时侯感觉，纯粹的唯物主义，往往让人们忽略和人的思维和潜意识对物质世界的改变。

而人类之所以区别于动物，最概本的就在于，人类是可以通过思维来改变其自身世界的状态，当然了，这状态，也是物质世界固有存在的多种选择之一，但至少是可以选择的。

而我们如果不加以掌控的话，就会变成了随机选择，物质世界的状态有好有坏，随机选择的结果可想而知，完全是不好状态的可能也不是没有。

综上所述，人类的高级，就在于，可以通过思考指导行动，最终改变默认的选择项，而优先选择有利的选项。

http://jsfiddle.NET/4Txgp/13/embedded

[javascript] view plain copy

print?

1. var SCREEN_WIDTH = window.innerWidth - 100;  
2. var SCREEN_HEIGHT = window.innerHeight - 100;  
3.   
4. var camera, scene;  
5. var canvasRenderer, webglRenderer;  
6.   
7. var container, mesh, geometry, plane;  
8.   
9. var windowHalfX = window.innerWidth / 2;  
10. var windowHalfY = window.innerHeight / 2;  
11.   
12. init();  
13. animate();  
14.   
15. function init() {  
16.   
17.     container = document.createElement('div');  
18.     document.body.appendChild(container);  
19.   
20.     camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);  
21.     camera.position.x = 1200;  
22.     camera.position.y = 1000;  
23.     camera.lookAt({  
24.         x: 0,  
25.         y: 0,  
26.         z: 0  
27.     });  
28.   
29.     scene = new THREE.Scene();  
30.       
31.     var groundMaterial = new THREE.MeshPhongMaterial({  
32.         color: 0x6C6C6C  
33.     });  
34.     plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);  
35.     plane.rotation.x = -Math.PI / 2;  
36.     plane.receiveShadow = true;  
37.   
38.     scene.add(plane);  
39.   
40.     // LIGHTS  
41.     scene.add(new THREE.AmbientLight(0x666666));  
42.   
43.     var light;  
44.   
45.     light = new THREE.DirectionalLight(0xdfebff, 1.75);  
46.     light.position.set(300, 400, 50);  
47.     light.position.multiplyScalar(1.3);  
48.   
49.     light.castShadow = true;  
50.     light.shadowCameraVisible = true;  
51.   
52.     light.shadowMapWidth = 512;  
53.     light.shadowMapHeight = 512;  
54.   
55.     var d = 200;  
56.   
57.     light.shadowCameraLeft = -d;  
58.     light.shadowCameraRight = d;  
59.     light.shadowCameraTop = d;  
60.     light.shadowCameraBottom = -d;  
61.   
62.     light.shadowCameraFar = 1000;  
63.     light.shadowDarkness = 0.2;  
64.   
65.     scene.add(light);  
66.       
67.     var boxgeometry = new THREE.CubeGeometry(100, 100, 100);  
68.     var boxmaterial = new THREE.MeshLambertMaterial({  
69.         color: 0x0aeedf  
70.     });  
71.     var cube = new THREE.Mesh(boxgeometry, boxmaterial);  
72.     cube.castShadow = true;  
73.     cube.position.x = 0;  
74.     cube.position.y = 100;  
75.     cube.position.z = 0;  
76.   
77.     scene.add(cube);  
78.   
79.     // RENDERER  
80.     webglRenderer = new THREE.WebGLRenderer();  
81.     webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);  
82.     webglRenderer.domElement.style.position = "relative";  
83.     webglRenderer.shadowMapEnabled = true;  
84.     webglRenderer.shadowMapSoft = true;  
85.   
86.     container.appendChild(webglRenderer.domElement);  
87.     window.addEventListener('resize', onWindowResize, false);  
88. }  
89.   
90. function onWindowResize() {  
91.     windowHalfX = window.innerWidth / 2;  
92.     windowHalfY = window.innerHeight / 2;  
93.   
94.     camera.aspect = window.innerWidth / window.innerHeight;  
95.     camera.updateProjectionMatrix();  
96.   
97.     webglRenderer.setSize(window.innerWidth, window.innerHeight);  
98. }  
99.   
100. function animate() {  
101.     var timer = Date.now() * 0.0002;  
102.     camera.position.x = Math.cos(timer) * 1000;  
103.     camera.position.z = Math.sin(timer) * 1000;  
104.     requestAnimationFrame(animate);  
105.     render();  
106. }  
107.   
108. function render() {  
109.     camera.lookAt(scene.position);  
110.     webglRenderer.render(scene, camera);  
111. }