threejs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 8196|回复: 0

05 Three.js一个好的结构书写

[复制链接]

227

主题

203

帖子

589

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
589
发表于 2021-1-3 10:47:05 | 显示全部楼层 |阅读模式


学习three.js也有两天了,现在也在不间断的学习相关知识,了解three.js的规则。也做了两个简单的案例,感受到了three.js的强大,研究了一些别人的代码,现在想找到一种适合自己的书写代码。
今天,还真的找到了一种感觉特别适合自己的方法,自己写js的时候貌似也这么写。但是由于学了两个月的WebGL的基础,学的有点懵逼,感觉自己书写正常js的能力都快忘记了。今天,看到这个案例,感觉自己的灵感直接来到了。
每个three.js案例基本上都会包括渲染器、相机、场景、光源和模型。我以后书写相关代码会把它们封装成一个个的方法,然后等待页面加载完后,调用一下即可。
下面是我自己定义的方法名:
初始化渲染器:initRender
初始化相机:initCamera
初始化场景:initScene
初始化灯源:initLight
初始化模型:initModel
动画:animate
绘制:draw
下面是一个案例,生成了42条线
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Three框架</title>
  6.     <script src="https://www.wjceo.com/lib/three.js"></script>
  7.     <style type="text/css">
  8.         html, body {
  9.             margin: 0;
  10.             height: 100%;
  11.         }

  12.         div#canvas-frame {
  13.             border: none;
  14.             cursor: pointer;
  15.             width: 100%;
  16.             height: 100%;
  17.             background-color: #EEEEEE;
  18.         }

  19.         canvas {
  20.             display: block;
  21.         }

  22.     </style>
  23.     <script>
  24.         //渲染器
  25.         var renderer,width,height;
  26.         function initRender() {
  27.             width = document.getElementById('canvas-frame').clientWidth;
  28.             height = document.getElementById('canvas-frame').clientHeight;
  29.             renderer = new THREE.WebGLRenderer({
  30.                 antialias: true
  31.             });
  32.             renderer.setSize(width, height);
  33.             document.getElementById('canvas-frame').appendChild(renderer.domElement);
  34.             renderer.setClearColor(0xffffff, 1.0);
  35.         }

  36.         //相机
  37.         var camera;
  38.         function initCamera() {
  39.             camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
  40.             camera.position.x = 0;
  41.             camera.position.y = 900;
  42.             camera.position.z = 0;

  43.             camera.lookAt(new THREE.Vector3(0,0,0));
  44.         }

  45.         //场景
  46.         var scene;
  47.         function initScene() {
  48.             scene = new THREE.Scene();
  49.         }

  50.         //光源
  51.         var light;
  52.         function initLight() {
  53.             light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
  54.             light.position.set(100, 100, 200);
  55.             scene.add(light);
  56.         }

  57.         //模型
  58.         function initModel() {

  59.             //轴辅助 (每一个轴的长度)
  60.             var object = new THREE.AxesHelper(500);
  61.             scene.add(object);

  62.             var geometry = new THREE.Geometry();
  63.             geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
  64.             geometry.vertices.push(new THREE.Vector3(500, 0, 0));

  65.             for (var i = 0; i <= 20; i++) {

  66.                 var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
  67.                 line.position.z = ( i * 50 ) - 500;
  68.                 scene.add(line);

  69.                 var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
  70.                 line.position.x = ( i * 50 ) - 500;
  71.                 line.rotation.y = 90 * Math.PI / 180;
  72.                 scene.add(line);

  73.             }

  74.             console.log(scene);
  75.         }

  76.         //绘制
  77.         function draw() {
  78.             initRender();
  79.             initCamera();
  80.             initScene();
  81.             initLight();
  82.             initModel();
  83.             renderer.render(scene, camera);
  84.         }

  85.         //生成随机颜色
  86.         function randomColor() {
  87.             var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
  88.                 strHex = "0x",
  89.                 index;
  90.             for (var i = 0; i < 6; i++) {
  91.                 index = Math.round(Math.random() * 15);
  92.                 strHex += arrHex[index];
  93.             }
  94.             return eval(strHex);
  95.         }


  96.     </script>
  97. </head>

  98. <body onload="draw();">
  99. <div id="canvas-frame"></div>
  100. </body>
  101. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|threejs论坛 ( 京ICP备18014583号 )

GMT+8, 2023-9-24 18:06 , Processed in 0.020953 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表