three.js入门3

为什么要用three.js

Three.js为我们封装了底层的WebGl接口,使我们在无需掌握繁冗的图形学知识的基础下可以轻松的创建三维场景。相比较使用底层的WebGL我们可以使用更少的代码,大大的降低了学习成本,使开发变的更高效。

新建HTML页面

首先新建一个HTML页面,引入Three.js文件。

<!DOCTYPE html>
<html>  

    <head>
        <meta charset="UTF-8">
        <title>three.js</title>
    </head>
    <body>
        <script type="text/javascript" src="js/Three/three.js"></script>
        <script> 

        </script>
    </body> 

</html> 
 

创建一个三维场景

  var scene = new THREE.Scene();

添加一个渲染器

Three.js为我们提供了如:canvas,SVG,CSS3..众多渲染器,但是WebGL渲染器相较比较灵活,所以均以WebGL为例。

    var render = new THREE. THREE.WebGLRenderer({
                    //抗锯齿属性,WebGLRenderer常用的一个属性
                    antialias: true
                });  

        //设置背景色为白色(0xffffff)
        render.setClearColor(0xffffff);  

        //设置渲染尺寸为页面大小
        render.setSize(window.innerWidth, window.innerHeight); 

        //使用WebGLRenderer生成canvas元素。
        document.body.appendChild(render.domElement);  

当然也可以自己定义一个canvas

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

并将WebGLRenderer定义改为

var render = new THREE.WebGLRenderer({
canvas: document.getElementById(‘myCanvas‘),
antialias: true
});

三维场景中重要的组件

三维场景中重要的组件包括 camera,light,object

three.js使用的右手坐标系

camera

camera(相机),决定了你开始看到三维场景的位置,朝向和角度等信息。

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);  

       //设置相机朝向位置为(20,0,20)
        camera.lookAt(new THREE.Vector3(20, 0, 20));  

light

light(光源),决定了你的场景拥有的光源类型和会产生的光照效果。

    var light = new THREE.AmbientLight(0xffffff);

        //使用 Scene()的add方法将light添加到Scene中
        scene.add(light);

object

object(物体),你想要添加到场景中的各式各样的物体。

    //物体三维图形
    var geometry = new THREE.CubeGeometry(4, 4, 4); 

    //物体材质
    var material = new THREE.MeshBasicMaterial({
                    color: 0x4d6dad
                });  

    //生成三维物体
    var mesh = new THREE.Mesh(geometry, material);  

        mesh.position.set(10, 0, 10);  

        //使用 Scene()的add方法将mesh添加到Scene中
        scene.add(mesh);  

渲染场景

定时刷新场景,调用WebGLRenderer的render函数刷新场景。

    function render() {

            requestAnimationFrame(render);
            renderer.render(scene, camera);

           }  

添加动画

我们可以通过在render()函数中对object(物体)的position(位置),rotation(旋转)和scale(缩放)属性进行控制来实现简单地动画效果。渲染的FPS为60,也就意味着一秒钟会变化60次。

   mesh.rotation.y += Math.PI / 180 * 1; 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>three-basic</title>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>

    <body>
        <script type="text/javascript" src="libs/three.js"></script>
        <script>
            var scene, renderer, camera, mesh;
            function init() {
                scene = new THREE.Scene();
                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setClearColor(0xffffff);
                renderer.setSize(window.innerWidth, window.innerHeight);
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.lookAt(new THREE.Vector3(20, 0, 20));
                var light = new THREE.AmbientLight(0xffffff);
                scene.add(light);
                var geometry = new THREE.CubeGeometry(4, 4, 4);
                var material = new THREE.MeshBasicMaterial({
                    color: 0x4d6dad
                });
                mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(10, 0, 10);
                scene.add(mesh);
                document.body.appendChild(renderer.domElement);
                render();
            }
            function render() {
                mesh.rotation.y += Math.PI / 180 * 1;
                renderer.render(scene, camera);
                requestAnimationFrame(render);
            }
            init();
        </script>
        <script type="text/javascript" src="../js/cjy_info.js"></script>
    </body>

</html>


原文https://chenjy1225.github.io/2016/08/08/three-js-basic/

时间: 2024-10-21 08:47:08

three.js入门3的相关文章

【 D3.js 入门系列 --- 9.6 】 打包图的制作

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 打包图( Pack ),用于包含与被包含的关系,也表示各个对象的权重,通常用一圆套一圆来表示前者,用圆的大小来表示后者. 先看本节所使用的数据:  city2.json 这是各城市所属关系的数据.我们现在要用 D3 的 layout 来转换数据,使其容易进行可视化处理. var pack = d3.layout.pack() .size([ width, heigh

Node.js入门:前后端模块的异同

通常有一些模块可以同时适用于前后端,但是在浏览器端通过script标签的载入JavaScript文件的方式与Node.js不同.Node.js在载入到最终的执行中,进行了包装,使得每个文件中的变量天然的形成在一个闭包之中,不会污染全局变量.而浏览器端则通常是裸露的JavaScript代码片段.所以为了解决前后端一致性的问题,类库开发者需要将类库代码包装在一个闭包内.以下代码片段抽取自著名类库underscore的定义方式. 1 (function () { 2 // Establish the

Node.js入门:异步IO

异步IO 在操作系统中,程序运行的空间分为内核空间和用户空间.我们常常提起的异步I/O,其实质是用户空间中的程序不用依赖内核空间中的I/O操作实际完成,即可进行后续任务. 同步IO的并行模式 多线程单进程    多线程的设计之处就是为了在共享的程序空间中,实现并行处理任务,从而达到充分利用CPU的效果.多线程的缺点在于执行时上下文交换的开销较大,和状态同步(锁)的问题.同样它也使得程序的编写和调用复杂化. 单线程多进程 为了避免多线程造成的使用不便问题,有的语言选择了单线程保持调用简单化,采用启

Node.js入门:包结构

JavaScript缺少包结构.CommonJS致力于改变这种现状,于是定义了包的结构规范(http://wiki.commonjs.org/wiki/Packages/1.0 ).而NPM的出现则是为了在CommonJS规范的基础上,实现解决包的安装卸载,依赖管理,版本管理等问题.require的查找机制明了之后,我们来看一下包的细节. 一个符合CommonJS规范的包应该是如下这种结构: 一个package.json文件应该存在于包顶级目录下 二进制文件应该包含在bin目录下. JavaSc

Node.js入门:文件查找机制

文件查找流程图 从文件模块缓存中加载 尽管原生模块与文件模块的优先级不同,但是都不会优先于从文件模块的缓存中加载已经存在的模块. 从原生模块加载 原生模块的优先级仅次于文件模块缓存的优先级.require方法在解析文件名之后,优先检查模块是否在原生模块列表中.以http模块为例,尽管在目录下存在一个http/http.js/http.node/http.json文件,require("http")都不会从这些文件中加载,而是从原生模块中加载. 原生模块也有一个缓存区,同样也是优先从缓存

Node.js入门:模块机制

CommonJS规范  早在Netscape诞生不久后,JavaScript就一直在探索本地编程的路,Rhino是其代表产物.无奈那时服务端JavaScript走的路均是参考众多服务器端语言来实现的,在这样的背景之下,一没有特色,二没有实用价值.但是随着JavaScript在前端的应用越来越广泛,以及服务端JavaScript的推动,JavaScript现有的规范十分薄弱,不利于JavaScript大规模的应用.那些以JavaScript为宿主语言的环境中,只有本身的基础原生对象和类型,更多的对

Node.js入门:事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现

Node.js入门:Node.js&amp;NPM的安装与配置

Node.js安装与配置  Node.js已经诞生两年有余,由于一直处于快速开发中,过去的一些安装配置介绍多数针对0.4.x版本而言的,并非适合最新的0.6.x的版本情况了,对此,我们将在0.6.x的版本上介绍Node.js的安装和配置.(本文一律以0.6.1为例,0.6的其余版本,只需替换版本号即可.从http://nodejs.org/#download可以查看到最新的二进制版本和源代码). Windows平台下的Node.js安装 在过去,Node.js一直不支持在Windows平台下原生

《Node.js入门》Windows 7下Node.js Web开发环境搭建笔记

近期想尝试一下在IBM Bluemix上使用Node.js创建Web应用程序.所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是Windows下的搭建方法,使用CentOS 的小伙伴请參考:<Node.js入门>CentOS 6.5下Node.js Web开发环境搭建笔记 Node.js是什么? 我们看看百科里怎么说的? JavaScript是一种执行在浏览器的脚本,它简单,轻巧.易于编辑,这样的脚本通经常使用于浏览器的前端编程.可是一位开发人员Ryan有一天发现这样的前端式

Ember.js入门教程、博文汇总

第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properties) Ember.js 入门指南——观察者(observer) Ember.js 入门指南——绑定(bingding) Ember.js 入门指南——枚举(enumerables) Ember.js 入门指南之七第一章对象模型小结 第二章 模板 Ember.js 入门指南——handlebars基