【webGL】threejs入门 ---创建一个简单立方体

时间：2022-04-13 16:57:13

开发环境

Three.js是一个JavaScript库，所以，你可以使用平时开发JavaScript应用的环境开发Three.js应用。如果你没什么偏好的话，我会推荐Komodo IDE。

调试建议使用Chrome或者Firefox浏览器。如果你使用的是Firefox，那么Firebug会是你必不可少的插件；如果你使用的是Chrome，那么直接使用控制台调试即可。这些和JavaScript的调试是相同的，因此本书不作进一步展开。

下载

首先，我们需要在Github下载Three.js的代码。

在https://github.com/mrdoob/three.js/tree/master/build可以看到three.js和three.min.js两个文件，前者是没有经过代码压缩的，因此适用于调试阶段；后者是经过代码压缩的，调试起来会不太方便，但文件较小，适用于最终的发布版。保存一个文件到本地，这里我们可以选择three.js。

引用

在使用Three.js之前，我们需要在HTML文件中引用该文件：

<script type="text/javascript" src="three.js"></script>

然后就能通过全局变量THREE访问到所有属性和方法了。

开始工作

接下来，我们终于要真正使用Three.js了！

首先，在HTML的<head>部分，需要声明外部文件three.js。

<head>

    <script type="text/javascript" src="js/three.js"></script>

</head>

<body onload="init()">

    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>

</body>

在JavaScript代码中定义一个init函数，在HTML加载完后执行：

一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。这些话题将在后面几章中进一步展开，这里我们将介绍如何快速地使用这些东西。

渲染器（Renderer）

渲染器将和Canvas元素进行绑定，如果之前在HTML中手动定义了id为mainCanvas的Canvas元素，那么Renderer可以这样写：

var renderer = new THREE.WebGLRenderer({

    canvas: document.getElementById('mainCanvas')

});

而如果想要Three.js生成Canvas元素，在HTML中就不需要定义Canvas元素，在JavaScript代码中可以这样写：

var renderer = new THREE.WebGLRenderer();

renderer.setSize(, );

document.getElementsByTagName('body')[].appendChild(renderer.domElement);

上面代码的第二行表示设置Canvas的宽400像素，高300像素。第三行将渲染器对应的Canvas元素添加到<body>中。

我们可以使用下面的代码将背景色（用于清除画面的颜色）设置为黑色：threejs使用的0x颜色

renderer.setClearColor(0x000000);

场景（Scene）

在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景里没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

var scene = new THREE.Scene();

照相机（Camera）

在介绍照相机设置前，我们先来简单了解下坐标系。WebGL和Three.js使用的坐标系是右手坐标系，看起来就是这样的：

【webGL】threejs入门 ---创建一个简单立方体

这里，我们定义了一个透视投影的照相机，具体原理将在下一章中展开。

var camera = new THREE.PerspectiveCamera(,  / , , );

camera.position.set(, , );

scene.add(camera);

长方体

我们要创建一个x、y、z方向长度分别为1、2、3的长方体，并将其设置为红色。

var cube = new THREE.Mesh(new THREE.CubeGeometry(, , ),

        new THREE.MeshBasicMaterial({

            color: 0xff0000

        })

);

scene.add(cube);

那么这里长度为1的单位是什么呢？这里的长度是在物体坐标系中的，其单位与屏幕分辨率等无关，简单地说，它就是一个虚拟空间的坐标系，1代表多少并没有实际的意义，而重要的是相对长度。

渲染

在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。这时候，我们只需要调用渲染器的渲染函数，就能使其渲染一次了。

renderer.render(scene, camera);

完整代码

function init() {

    // renderer

    var renderer = new THREE.WebGLRenderer({

        canvas: document.getElementById('mainCanvas')

    });

    renderer.setClearColor(0x000000); // black

    // scene

    var scene = new THREE.Scene();

    // camera

    var camera = new THREE.PerspectiveCamera(,  / , , );

    camera.position.set(, , );

    scene.add(camera);

    // a cube in the scene

    var cube = new THREE.Mesh(new THREE.CubeGeometry(, , ),

            new THREE.MeshBasicMaterial({

                color: 0xff0000

            })

    );

    scene.add(cube);

    // render

    renderer.render(scene, camera);

}

附上链接http://runjs.cn/detail/xtj5fstx

可能有的同学说看起来不像一个立方体

那现在调整一下参数,现在是不是看的出来了

// camera

    var camera = new THREE.PerspectiveCamera(,  / , , );

    camera.position.set(, , );

    camera.lookAt(new THREE.Vector3(, , ));

    scene.add(camera);

 // a cube in the scene

    var cube = new THREE.Mesh(new THREE.CubeGeometry(, , ),

            new THREE.MeshBasicMaterial({

                color: 0xff0000,

                wireframe: true

            })

    );

【webGL】threejs入门 ---创建一个简单立方体的更多相关文章

  1. （转）Web Service入门简介&lpar;一个简单的WebService示例&rpar;

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  2. Web Service入门简介&lpar;一个简单的WebService示例&rpar;

    Web Service入门简介 一.Web Service简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从I ...

  3. 一个先进的App框架&colon;使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  4. BitAdminCore框架应用篇：（二）创建一个简单的增删改查模块

    NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...

  5. 我的第一个activiti实例 （代码方式） ctiviti入门列子一个简单的activiti请假流程

    转: (activiti入门列子一个简单的activiti请假流程) 我的第一个activiti实例 2017年05月31日 14:29:45 chf_mixueer 阅读数:1223   整个项目的 ...

  6. Unity 2D游戏开发高速入门第1章创建一个简单的2D游戏

    Unity 2D游戏开发高速入门第1章创建一个简单的2D游戏 即使是如今,非常多初学游戏开发的同学.在谈到Unity的时候.依旧会觉得Unity仅仅能用于制作3D游戏的. 实际上.Unity在2013 ...

  7. 如何创建一个简单 APT 仓库

    0. 无废话版本 需求: 有一堆 .deb 包,想把它们做成一个 APT 仓库,这样就可以用apk install pkgname进行安装了,这样一方面自己可以规避 dpkg -i xxx.deb 时 ...

  8. 通过创建一个简单的骰子游戏来探究 Python

    在我的这系列的第一篇文章 中, 我已经讲解如何使用 Python 创建一个简单的.基于文本的骰子游戏.这次,我将展示如何使用 Python 模块 Pygame 来创建一个图形化游戏.它将需要几篇文章才 ...

  9. 在 Visual Studio 中创建一个简单的 C&num; 控制台应用程序

    转载:https://blog.csdn.net/qq_43994242/article/details/87260824 快速入门:使用 Visual Studio 创建第一个 C# 控制台应用 h ...

随机推荐

  1. pip 安装插件慢的解决方法

    有的时候在服务器上使用pip3安装插件比较慢. 本人非常痛苦,后经指点使用国内的源就好了...效果杠杠的... 以下为使用方法: pip3 install paramiko -i http://mir ...

  2. SpringMVC&plus;Mybatis&plus;Spring整合

    Maven引入需要的JAR包 pom.xml <properties> <!-- spring版本号 --> <spring.version>4.0.2.RELEA ...

  3. poj-1314 Finding Rectangles

    题目地址: http://poj.org/problem?id=1314 题意: 给出一串的点,有些点可以构成正方形,请按照字符排序输出. 因为这道题的用处很大, 最近接触的cv 中的Rectangl ...

  4. JavaScript常用小技巧

    1.获取访问地址URL的参数 <script type="text/javascript"> var param = ""; var nowUrl ...

  5. java poi read write xlsx

    package myjava; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce ...

  6. Web Service测试利器 Postman

    利器推荐,下载地址 https://github.com/a85/POSTMan-Chrome-Extension 在chrome的扩展商店中安装失败 所以下载zip文件下来再导入到chrome扩展

  7. docker articles&amp&semi;videos

    https://github.com/docker/docker https://channel9.msdn.com/Blogs/containers?page=2 https://blog.dock ...

  8. 兰勃特投影C&num;实现

    兰勃特投影是等面积投影. static double PI = 3.1415926; //------------------------------------------------------- ...

  9. json字符串转JSONObject，输出JSONObject问题

    json架包:json-lib-2.4-jdk15.jar json字符串(存在null值)转JSONObject 后return JSONObject对象的时候会报错 例如: String str= ...

  10. Day14 html简介

    初识html <!DOCTYPE html> <html lang="en"> <head> <!--自闭合标签--> <me ...

相关文章