• 初识three.js与简单练习

     官网文档 three.js docs

    首先要创建 场景scene 相机camera 渲染器render 一定要先根据官网引入three.js的js文件

    1. const scene = new THREE.Scene(); //创建场景
    2. const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
    3.  
    4. const renderer = new THREE.WebGLRenderer();//创建渲染器对象
    5. renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染区尺寸
    6. document.body.appendChild( renderer.domElement );//body中插入canvas对象

    /*

    three.js有几种不同的相机

    * 1.js有几种相机,分别是什么? [ a.四种相机: PerspectiveCamera （ 透视 相机） 、OrthographicCamera （ 正交投影 相机）、CubeCamera （ 立方体 相机 或全景 相机）和StereoCamera （3D相机）]

      *

      * 2.相机的参数分别是什么? [

      *        a.透视相机: PerspectiveCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

      *        b.正交投影相机: OrthographicCamera( left, right, top, bottom, near, far ) left: 视锥体左边界, right: 视锥体右边界, top: 视锥体上边界, bottom: 视锥体下边界, near: 近裁面, far: 远裁面

      *        c.立方体相机: CubeCamera( near, far, cubeResolution ) near: 近裁面, far: 远裁面, cubeResolution: 立方体纹理分辨率

      *        d.3D相机: StereoCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

      * ]

      *

      * 3.相机的位置是怎么设置的? [

      *        a.相机的位置通过相机的position属性来设置的  相机.position.set(x,y,z);

      * ]

      * 4.相机的方向是怎么设置的?[

      *        a.相机的方向通过相机的lookAt方法来设置的    相机.lookAt(0,0,0);

      *        b．相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍） 就像是由屏幕外向屏幕内看一样 (模拟人眼的视觉效果)

      * ]

      * 5.相机的视野是怎么设置的?[

      *        a.相机以哪个视野为上方通过up方法来设置的

      *        b.相机.up.set(x,y,z); 默认是y轴向上 就是你拿着相机是躺着拍，趴着拍还是侧着拍的区别，或是抬头看，低头看，扭头看的区别。

      * ]

    */

    根据官网例子

     添加立方体

    1. const geometry = new THREE.BoxGeometry(); //立方体图形
    2. //材质对象material 这里表示给材质对象添加颜色,颜色仅支持十六进制的0x色彩
    3. const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    4. const cube = new THREE.Mesh( geometry, material );
    5. scene.add( cube );//网格模型对象添加到场景中
    6.  
    7. camera.position.z = 5;//相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

    渲染场景

    1. function animate() {
    2. 	requestAnimationFrame( animate );
    3. 	renderer.render( scene, camera );
    4. }
    5. animate();

    添加动画函数,使物体转动

    将下列代码添加到animate()函数中renderer.render调用的上方：

    1. cube.rotation.x += 0.01;
    2. cube.rotation.y += 0.01;

    全部代码如下

    1. html>
    2. <html>
    3. <head>
    4. 	<title>testtitle>
    5. 	<style type="text/css">
    6. 		body { margin: 0; }
    7. 		canvas { width: 100%; height: 100%; }
    8. 	style>
    9. head>
    10. <body>
    11. 	<script type="text/javascript" src="js/three.js">script>
    12. 	<script type="text/javascript">
    13. 		// 场景
    14. 		var scene = new THREE.Scene();
    15.  
    16. 		// 摄像机
    17. 		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    18. 		camera.position.z = 5;
    19. 		
    20. 		// 渲染器
    21. 		var renderer = new THREE.WebGLRenderer();
    22. 		renderer.setSize( window.innerWidth, window.innerHeight );
    23. 		document.body.appendChild( renderer.domElement );
    24. 		// 渲染器 end
    25. 		
    26. 		// 物体
    27. 		var geometry = new THREE.BoxGeometry(1, 1, 1);
    28. 		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
    29. 		var cube = new THREE.Mesh( geometry, material );
    30. 		scene.add( cube );
    31.        // 动画
    32. function animate() {
    33.  
    34.  cube.rotation.x += 0.01;
    35.  cube.rotation.y += 0.01;
    36.  renderer.render( scene, camera );
    37.  
    38.  requestAnimationFrame( animate );
    39. }
    40. animate();
    41. 		// 物体 end
    42.  // 光源
    43. var spotLight = new THREE.SpotLight( 0xffffff );
    44. spotLight.position.set( -40, 60, -10 );
    45. scene.add( spotLight );
    46. // 光源 end
    47. // 物体
    48. var geometry = new THREE.BoxGeometry(1, 1, 1);
    49. var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
    50. var cube = new THREE.Mesh( geometry, material );
    51. scene.add( cube );
    52. // 物体 end
    53. renderer.setClearColor(new THREE.Color(0x000000, 1.0));
    54. renderer.shadowMap.enabled = true; 
    55. cube.castShadow = true; //投射阴影
    56. plane.receiveShadow = true; //地面接收阴影
    57. spotLight.castShadow = true;
    58. 	script>
    59. body>
    60. html>

    效果如下 上下左右旋转的一个正方体

    个人练习代码

    一定要引入three.js文件否则会白屏不会显示渲染

    这里我使用的是远程仓库的three.main.js外联 vue项目可根据官网自行下载包

    1.  
    2. html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="utf-8">
    6. 		<style>
    7. 			body {
    8. 				background-color: #ffff;   /* 背景色只能是hash模式 */
    9. 				margin: 0;
    10. 				overflow: hidden; /* 隐藏body窗口区域滚动条 */
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15.         
    16.         <script type="text/javascript" src="../js/three.js">script>
    17. 		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js">script>
    18. 		<script>
    19. 			var camera, scene, renderer;
    20. 			var geometry, material, mesh;
    21.             // 此处声明了相机 场景
    22. 			function init() {
    23.  
    24. 				scene = new THREE.Scene();  //创建场景对象
    25. 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 12 );
    26. 				camera.position.z = 3; //相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理
    27.  
    28. 				scene.background = new THREE.Color( 0xffffff );
    29.  
    30.            // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    31. 				geometry = new THREE.SphereGeometry( 1,12,12 );
    32.                  //材质对象Material，这里只是单单的给赋值颜色采用的是 十六进制的0x色彩
    33. 				material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );
    34.                
    35.  
    36. 				mesh = new THREE.Mesh( geometry, material );//网格模型对象
    37. 				scene.add( mesh ); //网格模型对象添加到场景中
    38.  
    39. 				renderer = new THREE.WebGLRenderer( { antialias: true } ); //创建渲染器对象
    40. 				renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染区尺寸
    41. 				document.body.appendChild( renderer.domElement );	//body中插入canvas对象			
    42. 				
    43. 			}
    44.            //定义动画
    45. 			function animate( time ) {
    46.  
    47. 				mesh.rotation.x = time * 0.0005;
    48. 				mesh.rotation.y = time * 0.001;
    49.  
    50. 				renderer.render( scene, camera );//执行渲染操作 指定场景,相机作为参数
    51. 				requestAnimationFrame( animate );
    52.  
    53. 			}
    54.     //    此demo声明函数仅仅是为了便捷
    55. 			init();
    56. 			requestAnimationFrame( animate );
    57.  
    58. 		script>
    59. 	body>
    60. html>

    效果图如下 一个旋转的球体

     刚接触three,仅是个人初步了解.

  • 相关阅读:
    Java毕业设计-校园活动赞助与宣传管理系统
    【Git】Git下载安装&环境配置 下载速度慢的解决方案
    十二、Docker的简介
    Linux (一) 基础复习
    【信号处理】基于CNN的心电（ECG）信号分类典型方法实现（tensorflow）
    从I/O的视角看DPU
    IRIS的镜像配置(2)
    SpringBoot原理篇
    [附源码]java毕业设计学生宿舍管理系统设计
    硬件性能评估指标-DMIPS、MFLOPS、MAC、TOPS
  • 原文地址：https://blog.csdn.net/weixin_68531033/article/details/127687738