JSFIDDLE 动力 Threejs 功能探秘

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);
}