three.js入门

最新推荐文章于 2024-08-14 14:05:02 发布

言多_必失

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量990

点赞数

分类专栏： three.js/webgl

本文链接：https://blog.csdn.net/fly_xiaoyou2015/article/details/8796225

版权

three.js/webgl 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先看看百度怎么说。
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的3D引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。现在有了英文的指导文档，好多了，有一些英文基础，就可以看懂，学起来也很简单。
第一步:获取Three.js
要研究Three.js首先要获取它的代码。

Three.js的代码托管在github上面 https://github.com/mrdoob/three.js/
第二步我选择去试着做自己的第一个demo

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <script src="../build/three.min.js"></script>
</head>
<body>
   <script>
       //摄像机，场景，渲染器全局变量
       var camera, scene, renderer;

       //几何体，材质，网格全局变量
       var geometry, material, mesh;

       init();
       animate();

       function init() {//初始化，包括对相机，场景，渲染器，网格的初始化（对网格初始化，对其施加材质等）

           //下面设置一个透视相机 近剪裁面为1，远剪裁面为10000；垂直视域为75度角
           //根据窗口宽高设置左右剪裁面（对于透视相机视域的平截头体计算我整准备看呢，还不是太清//楚）希望大神给讲解下
           camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
           //设置相机在z轴位置为1000
           camera.position.z = 1000;
           //建立场景
           scene = new THREE.Scene();
           //建立一个立方体，长宽高依次为200,200,200,
           geometry = new THREE.CubeGeometry(200, 200, 200);
           //建立一个红色的材质，要注意,Three.js提供了很多的材质，其中这个MeshBasicMaterial材//质的颜色不会受到漫反射光的染色。
           material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

           //建立一个200,200,200的正方体网格，并施加为红色的基础材质
           mesh = new THREE.Mesh(geometry, material);

           //将网格加入场景，对象加入到场景后，如果不设定位置的话，默认的是在场景中心哦
           scene.add(mesh);


           //建立渲染器，这里Three.js提供了多种渲染器，WebGLRenderer等，具体差别还在学习中
           renderer = new THREE.CanvasRenderer();
           //设计渲染的范围
           renderer.setSize(window.innerWidth, window.innerHeight);
           //将渲染器加入到网页中，其实这里的render.dommElement是一个Canvas标签；
           document.body.appendChild(renderer.domElement);

       }
       //这是一个动画循环
       function animate() {

           // note: three.js includes requestAnimationFrame shim


           requestAnimationFrame(animate);
           //每次渲染让网格旋转一定角度
           mesh.rotation.x += 0.01;
           mesh.rotation.y += 0.02;
           //施加渲染
           renderer.render(scene, camera);

       }
</script>
</body>
</html>