THREE.js 第二部分 canvas_camera_effect.html 内容分析

来源：互联网发布：sql注入用户名密码编辑：程序博客网时间：2024/06/14 00:38

相对于第一部分，这个的例子看起来会容易一些。

贴代码：

var stats;        var container;        var camera;        //用来控制显示的大小        var frustumSize = 1000;        var scene;        var renderer;        init();        animate();        function init() {            //创建container            container = document.createElement('div');            document.body.appendChild(container);            var info = document.createElement('div');            info.style.position = 'absolute';            info.style.top = '10px';            info.style.width = '100%';            container.appendChild(info);            //镜头所在位置            var aspect = window.innerWidth / window.innerHeight;            camera = new THREE.OrthographicCamera(frustumSize * aspect / - 2,                frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000);            camera.position.y = 400;            scene = new THREE.Scene();            scene.background = new THREE.Color(0xf0f0f0);            //网格 网格大小 划分个数            var gridHelper = new THREE.GridHelper(1000, 20);            scene.add(gridHelper);            //正方体            var geometry = new THREE.BoxGeometry(50, 50, 50);            //表面材质            var material = new THREE.MeshLambertMaterial({color : 0xffffff, overdraw : 0.5});            //循环遍历将正方体放入场景中            for (var i = 0; i < 100; i++) {                var cube = new THREE.Mesh(geometry, material);                cube.scale.y = Math.floor(Math.random() * 2 + 1);                cube.position.x = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;                cube.position.y = (cube.scale.y * 50) / 2;                cube.position.z = Math.floor((Math.random() * 1000 - 500) / 50) * 50 + 25;                scene.add(cube);            }            //环境光            var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);            scene.add(ambientLight);            //平行光光源            var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);            directionalLight.position.x = Math.random() - 0.5;            directionalLight.position.y = Math.random() - 0.5;            directionalLight.position.z = Math.random() - 0.5;            directionalLight.position.normalize();            scene.add(directionalLight);            //创建并且引入监控器            stats = new Stats();            container.appendChild(stats.dom);            //渲染器            renderer = new THREE.CanvasRenderer();            renderer.setPixelRatio(window.devicePixelRatio);            renderer.setSize(window.innerWidth, window.innerHeight);            container.appendChild(renderer.domElement);            window.addEventListener('resize', onWindowResize, false);        }        //缩放效果        function onWindowResize() {            var aspect = window.innerWidth / window.innerHeight;            camera.left = - frustumSize * aspect / 2;            camera.right = frustumSize * aspect / 2;            camera.top = frustumSize / 2;            camera.bottom = - frustumSize / 2;            //更新照相机下的材质            camera.updateProjectionMatrix();            renderer.setSize(window.innerWidth, window.innerHeight);        }        //动画        function animate() {            //固定格式            requestAnimationFrame(animate);            stats.begin();            render();            stats.end();        }        //渲染        function render() {            var timer = Date.now() * 0.0001;            //镜头位置            camera.position.x = Math.cos(timer) * 800;            camera.position.z = Math.sin(timer) * 800;            camera.lookAt(scene.position);            renderer.render(scene, camera);        }

这次用到的动画效果还是比较简单，即镜头的旋转产生旋转的效果，总体来看就是用到了网格，正方体，平行光源，环境光。

阅读全文

0 0