网页3D：three.js入门

C、添加渲染器。渲染器是用来设定渲染的结果会在页面的什么元素上面呈现，以及按什么规则来渲染。这里使用的是CSS3DRenderer渲染器。

three.js渲染器

  1. /*
  2.  * 添加渲染器
  3.  */
  4. renderer = new THREE.CSS3DRenderer(); // 定义渲染器
  5. renderer.setSize( window.innerWidth, window.innerHeight ); // 定义尺寸
  6. document.body.appendChild( renderer.domElement ); // 将场景到加入页面中

D、创建正方体。立方体全景图有6个面，我们需要定义每个面贴图的背景图片，3D位置，旋转角度（默认的6个面都是朝着我们的，我们需要定义朝坐标轴的各个方向做90度的旋转，才可以搭建成一个立方体）。

正方体演示

  1. /**
  2.  *正方体的6个面的资源及相关（坐标、旋转等）设置
  3.  */
  4. var flipAngle = Math.PI, // 180度
  5.     rightAngle = flipAngle / 2, // 90度
  6.     tileWidth = 512;
  7. var sides = [{
  8.     url: "images/panorama.right.jpg", //right
  9.     position: [-tileWidth, 0, 0],
  10.     rotation: [0, rightAngle, 0]
  11. }, {
  12.     url: "images/panorama.left.jpg", //left    
  13.     position: [tileWidth, 0, 0],
  14.     rotation: [0, -rightAngle, 0]
  15. }, {
  16.     url: "images/panorama.top.jpg", //top
  17.     position: [0, tileWidth, 0],
  18.     rotation: [rightAngle, 0, Math.PI]
  19. }, {
  20.     url: "images/panorama.bottom.jpg", //bottom
  21.     position: [0, -tileWidth, 0],
  22.     rotation: [-rightAngle, 0, Math.PI]
  23. }, {
  24.     url: "images/panorama.front.jpg", //front
  25.     position: [0, 0, tileWidth],
  26.     rotation: [0, Math.PI, 0]
  27. }, {
  28.     url: "images/panorama.back.jpg", //back
  29.     position: [0, 0, -tileWidth],
  30.     rotation: [0, 0, 0]
  31. }];
  33. for ( var i = 0; i < sides.length; i ++ ) {
  34.     var side = sides[ i ];
  35.     var element = document.getElementById("bg_section_"+i);
  36.     element.width = 1026;
  37.     element.height = 1026; // 2 pixels extra to close the gap.
  38.     // 添加一个渲染器
  39.     var object = new THREE.CSS3DObject( element );
  40.     object.position.fromArray( side.position );
  41.     object.rotation.fromArray( side.rotation );
  42.     scene.add( object );
  43. }

E、实时渲染函数。这里我们用的是Threejs的 实时渲染 ：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。

其中一个重要的函数是requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数，这样通过上面animate中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让animate()再执行一次，就形成了我们通常所说的渲染循环了。

  1. /**
  2.  * 实时渲染函数
  3.  */
  4. function animate() {
  5.     requestAnimationFrame(animate);
  6.     // lon = Math.max(-180, Math.min(180, lon));//限制固定角度内旋转
  7.     // lon += 0.1;//自动旋转
  8.     lat = Math.max(-85, Math.min(85, lat)); //限制固定角度内旋转
  9.     phi = THREE.Math.degToRad(85 - lat);
  10.     theta = THREE.Math.degToRad(lon+180);
  11.     target.x = Math.sin(phi) * Math.cos(theta);
  12.     target.y = Math.cos(phi);
  13.     target.z = Math.sin(phi) * Math.sin(theta);
  14.     camera.lookAt( target );
  15.     camera.updateProjectionMatrix();
  16.     isDeviceing == false ? initMouseControl() : deviceControl.update();
  17.     renderer.render(scene, camera);
  18. }

F、窗口改变时对camera焦点的处理。

  1. /**
  2.  * 窗体大小改变
  3.  */
  4. function onWindowResize() {
  5.     camera.aspect = window.innerWidth / window.innerHeight;
  6.     camera.updateProjectionMatrix();
  7.     renderer.setSize( window.innerWidth, window.innerHeight );
  8. }

G、相机焦点跟着鼠标或手指的操作移动。

  1. /*
  2. 相机焦点跟着鼠标或手指的操作移动
  3.  */
  4. function onDocumentMouseDown( event ) {
  5.     event.preventDefault();
  6.     document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  7.     document.addEventListener( 'mouseup', onDocumentMouseUp, false );
  9. }
  11. function onDocumentMouseMove( event ) {
  12.     var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
  13.     var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
  14.     lon -= movementX * 0.1;
  15.     lat += movementY * 0.1;
  16. }
  18. function onDocumentMouseUp( event ) {
  19.     document.removeEventListener( 'mousemove', onDocumentMouseMove );
  20.     document.removeEventListener( 'mouseup', onDocumentMouseUp );
  21. }
  23. /**
  24.  * 鼠标滚轮改变相机焦距
  25.  */
  26. function onDocumentMouseWheel( event ) {
  27.     camera.fov += event.deltaY * 0.05;
  28.     camera.updateProjectionMatrix();
  29. }
  31. function onDocumentTouchStart( event ) {
  32.     event.preventDefault();
  33.     var touch = event.touches[ 0 ];
  34.     touchX = touch.screenX;
  35.     touchY = touch.screenY;
  37. }
  39. function onDocumentTouchMove( event ) {
  40.     event.preventDefault();
  41.     var touch = event.touches[ 0 ];
  42.     lon -= ( touch.screenX - touchX ) * 0.1;
  43.     lat += ( touch.screenY - touchY ) * 0.1;
  44.     touchX = touch.screenX;
  45.     touchY = touch.screenY;
  46. }
1 2 3
你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！