JSFIDDLE 助力 Threejs 功能探秘，jsfiddlethreejs

JSFIDDLE 助力 Threejs 功能探秘，jsfiddlethreejs

JSFIDDLE 助力 WebGL 功能探秘

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

本文遵循“署名-非商業用途-保持一致”創作公用協議

轉載請保留此句：太陽火神的美麗人生 -  本部落格專註於 敏捷開發及移動和物聯裝置研究：iOS、Android、Html5、Arduino、pcDuino，否則，出自本部落格的文章拒絕轉載或再轉載，謝謝合作。

以下樣本能產生基本幾何體的陰影投射，還有另一份代碼，是無法投射的，和本份能投射的代碼，相差不多，但確始終不得其法，需進一步核對，才能知道具體差異在哪裡，哪些關鍵的部位起了陰影投射的作用。

還是靜下心來，把每一行代碼搞清楚吧，這才是捷徑！

往往追求捷徑的結果，就是盲人摸象，最後，越摸越離譜，連最初的無意識界都沒有了。

所以佛祖告誡我們，要追求本真，象孩童一樣。

其實，就是去除妄念和猜測，實事求是地按事情本來的面目去考慮問題，才不會被妄端猜測出來的東西影響你的心緒，以至偏離正途，生出事端來。

在中流傳的一條資訊，大概意思是，只要你想了，就會去不知不覺地做，做了就會產生效果，效果持續久了，就會變成習慣，習慣多了就形成性格，而性格決定著命運。

所以，要想改變，首先從想法開始改變。

這不算是唯心主義論吧，有時侯感覺，純粹的唯物主義，往往讓人們忽略和人的思維和潛意識對物質世界的改變。

而人類之所以區別於動物，最概本的就在於，人類是可以通過思維來改變其自身世界的狀態，當然了，這狀態，也是物質世界固有存在的多種選擇之一，但至少是可以選擇的。

而我們如果不加以掌控的話，就會變成了隨機播放，物質世界的狀態有好有壞，隨機播放的結果可想而知，完全是不好狀態的可能也不是沒有。

綜上所述，人類的進階，就在於，可以通過思考指導行動，最終改變預設的選擇項，而優先選擇有利的選項。

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

var SCREEN_WIDTH = window.innerWidth - 100;var SCREEN_HEIGHT = window.innerHeight - 100;var camera, scene;var canvasRenderer, webglRenderer;var container, mesh, geometry, plane;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;init();animate();function init() {    container = document.createElement('div');    document.body.appendChild(container);    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);    camera.position.x = 1200;    camera.position.y = 1000;    camera.lookAt({        x: 0,        y: 0,        z: 0    });    scene = new THREE.Scene();        var groundMaterial = new THREE.MeshPhongMaterial({        color: 0x6C6C6C    });    plane = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), groundMaterial);    plane.rotation.x = -Math.PI / 2;    plane.receiveShadow = true;    scene.add(plane);    // LIGHTS    scene.add(new THREE.AmbientLight(0x666666));    var light;    light = new THREE.DirectionalLight(0xdfebff, 1.75);    light.position.set(300, 400, 50);    light.position.multiplyScalar(1.3);    light.castShadow = true;    light.shadowCameraVisible = true;    light.shadowMapWidth = 512;    light.shadowMapHeight = 512;    var d = 200;    light.shadowCameraLeft = -d;    light.shadowCameraRight = d;    light.shadowCameraTop = d;    light.shadowCameraBottom = -d;    light.shadowCameraFar = 1000;    light.shadowDarkness = 0.2;    scene.add(light);        var boxgeometry = new THREE.CubeGeometry(100, 100, 100);    var boxmaterial = new THREE.MeshLambertMaterial({        color: 0x0aeedf    });    var cube = new THREE.Mesh(boxgeometry, boxmaterial);    cube.castShadow = true;    cube.position.x = 0;    cube.position.y = 100;    cube.position.z = 0;    scene.add(cube);    // RENDERER    webglRenderer = new THREE.WebGLRenderer();    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);    webglRenderer.domElement.style.position = "relative";    webglRenderer.shadowMapEnabled = true;    webglRenderer.shadowMapSoft = true;    container.appendChild(webglRenderer.domElement);    window.addEventListener('resize', onWindowResize, false);}function onWindowResize() {    windowHalfX = window.innerWidth / 2;    windowHalfY = window.innerHeight / 2;    camera.aspect = window.innerWidth / window.innerHeight;    camera.updateProjectionMatrix();    webglRenderer.setSize(window.innerWidth, window.innerHeight);}function animate() {    var timer = Date.now() * 0.0002;    camera.position.x = Math.cos(timer) * 1000;    camera.position.z = Math.sin(timer) * 1000;    requestAnimationFrame(animate);    render();}function render() {    camera.lookAt(scene.position);    webglRenderer.render(scene, camera);}