前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >three.js 初步

three.js 初步

作者头像
用户4793865
发布2023-01-12 14:43:48
4.8K0
发布2023-01-12 14:43:48
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第23天,活动详情查看:8月更文挑战

我也是个初学者,大家就当这是我的笔记看,如果理解不正确请大家指正。首先推荐大家一个学习网站Tress.js中文网。 首先我们需要先引入tree.js

代码语言:javascript
复制
链接:https://pan.baidu.com/s/1SLQL6RChecY8gE7e-Jfn1g  
密码:n4h8
代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style> 
    </head>
    <body>
    //根据文件的位置,我放在了跟html文件放到了js的统计目录
        <script src="js/three.js"></script> 
        <script>
            //我们主要渲染代码都写到这儿
        </script>
    </body>
</html>

这张图很重要,或许现在不理解等,读上代码就知道了

在这里插入图片描述
在这里插入图片描述

我们先往下看。

创建一个场景,我们需要以下几个对象:场景、相机和渲染器

  • 一个场景:把这个看做一个舞台,然后将所有需要的对象添加上去。
  • 一个相机:在这个案例中我们创建一个透视摄像机,但它也可能是投影相机。也就是我们拍摄物体的位置。
  • 一个渲染器:渲染器将会使用WebGL渲染场景中的所有的物体。
  • 一个或多个物体:如图的飞机和圆柱都是物体。它们分别在各自的网格模型(Mesh)当中。mesh需要包含几何体参数(几何体形状)和材质(包括:颜色、贴图、透明度)等参数。
代码语言:javascript
复制
 var mesh = new THREE.Mesh(geometry,material);
  • 一个或多个光源:可以使用不同样式的光源。 注意xyz轴哦,有助于理解。

如图:

在这里插入图片描述
在这里插入图片描述

我们读段代码看看:效果是一个旋转的正方体

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src='../js/three.js'></script>
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      // 场景
      var scene = new THREE.Scene();
      // 立方体  参数分别是长宽高
      var geometry = new THREE.BoxGeometry(100,100,100);
      //材质 MeshLambertMaterial
      var material = new THREE.MeshLambertMaterial({
        color : 0x0000ff
      });
      //网格 包括几何体和材质(颜色,材质,透明度)
      var mesh = new THREE.Mesh(geometry,material);
      //网格 添加到场景
      scene.add(mesh);
      //
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400,200,300);
      scene.add(point);
      //
      var ambient = new THREE.AmbientLight(0x444444);
      console.log(scene);
      // 屏幕的宽
      var width = window.innerWidth;
      // 屏幕的高
      var height = window.innerHeight;
      // 屏幕的宽高比
      var k = width/height;
      var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
    
    //创建一个相机,相机有多种。这里用的是OrthographicCamera
    //参数 1--视野角度 2--长宽比根据屏幕长宽 3--远剪切面 4--近剪切面
      var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
      camera.position.set(200,300,200);
      camera.lookAt(scene.position);

      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width,height);
      renderer.setClearColor(0xb9d3ff,1);
      document.body.appendChild(renderer.domElement);
      function render(){
        requestAnimationFrame(render);
        renderer.render(scene,camera);
        mesh.rotation.x +=0.1;
        mesh.rotation.y +=0.2;
      }
      render();
    </script>
  </body>
</html>

scene:场景,就像拍摄现场的密闭空间,装着演员和摄像机。场景里包含着网格模型,每一个网格模型里有一个几何体,而几何体是不能被渲染的,只有几何体和材质结合成网格才能被渲染到屏幕上。如下代码就是这个意思。

代码语言:javascript
复制
 var mesh = new THREE.Mesh(geometry,material);

再分别说一下几何体和材质: 几何体会有形状和尺寸属性,如下代码BoxGeometry是立方体,三个参数分别是长宽高,三个参数不相等就成了长方体了。

代码语言:javascript
复制
 var geometry = new THREE.BoxGeometry(100,100,100);

既然有立方体还有什么别的几何体呢?

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-08-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档