Three.js 学习之路（一）

1.一个友好的编辑器可以提高工作效率，webstrom,vscode是开发three.js的不错选择。

2.快速学习Three.js，可以从官网https://threejs.org/ 下载源码，查阅常用API，关注threejs分享案例。中文手册http://techbrood.com/threejs/docs/

3.快速构建一个通用的Three.js框架：

　　首先引入下载的three.js源文件到我们的项目中,接着创建必须的三个对象

（1）.scence ：存放所有3d场景中的对象，可通过scence.children快速拿到所有场景对象的信息（基于对象命名的索引，So命名规范极其重要）；

（2）.camera：摄像机包括透视摄像机（正交摄像机，立方体摄像机）；

　　　　屏幕中心为世界三维坐标系原点，屏幕向外为Z，屏幕右方为X，屏幕上方为Y
（3）.renderer:渲染器包括webgl和canvas，canvas是2d渲染的回退。通过渲染器把摄像机视口渲染到我们的网页中;

　　现在我们需要添加一个简单的3d模型，光源和一个render（）实时渲染函数，一个3D Web Demo就可以完美运行了。

示例:

<!DOCTYPE html>

<html>

<head>

<title>My first three.js 框架</title>

body {

margin: 0px;

border: none;

cursor: pointer;

width: 100%;

height: 100vh;/* //800px */

overflow: hidden;

}

</style>

var renderer,scene,camera,cube;

function Init(){

scene= new THREE.Scene();

renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);//可自定义画布大小

renderer.setClearColor(0x000000, 1.0);//设置画布背景色

document.body.appendChild(renderer.domElement);//画布

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机

camera.position.set(0,4,10);

camera.up = { x: 0, y: 1, z: 0 };//自身up向量的朝向

camera.lookAt({ x: 0, y: 0, z: 0 });//聚焦

var pointlight = new THREE.PointLight(0xffffff);

pointlight.position.set(0, 0, 0);

scene.add(pointlight);

var cubegeometry = new THREE.BoxGeometry(1, 1, 1);//保存顶点数据

var cubematerial = new THREE.MeshBasicMaterial({color:0x00ff00});//材质对象

cube = new THREE.Mesh(cubegeometry, cubematerial);//网格对象

cube.rotation.x = 1.57;

scene.add(cube);

}

function update() {

cube.rotation.y += 0.05;//弧度自身旋转但自身轴向不变

renderer.render(scene, camera);//每一帧的渲染

requestAnimationFrame(update);//下一帧执行一次参数中的函数

}

function start(){

Init();

update();

}

</script>

</head>

</body>

</html>

转载于:https://www.cnblogs.com/JiSight/p/7729236.html

Three.js 学习之路（一）相关推荐

node.js学习之路（1）
node.js 属于后台语言,后台语言还有php,java等. 优势:1.性能好 node.js VS php 86倍 2.跟前台JS配合方便 3.node.js便于前端学习 https:// ...
JS学习之路，菜鸟总结的注意事项及错误更正
JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...
Node.js学习之路--npm包管理工具操作汇总
因为在学习使用Express(第三方Web开发框架)时需要下载这个包,所以使用npm包管理工具这个相关的操作,现在将其相关的操作进行汇总. npm命令在cmd或者powershell中进行;注意:使用 ...
babylon 画线_【温故知新】——BABYLON.js学习之路·前辈经验（一）
前言:公司用BABYLON作为主要的前端引擎,同事们在长时间的项目实践中摸索到有关BABYLON的学习路径和问题解决方法,这里只作为温故知新. 一.快速学习BABYLON 二.需要掌握的基本技能 1. ...
Node.js学习之路24——Express框架的app对象
1.express() 基于Node.js平台,快速.开放.极简的web开发框架. 创建一个Express应用.express()是一个由express模块导出的入口top-level函数. cons ...
Node.js学习之路09——Path基本介绍
Path 1. normalize()将非标准路径字符串转换为标准路径字符串解析路径字符串中的..和.字符串,返回解析后的标准路径将多个斜杠字符串转换为一个斜杠字符串,例如将\\转换为\ 将win ...
JS学习之路之JavaScript match() 方法
match() 方法,在字符串内找到相应的值并返回这些值,()内匹配字符串或者正则表达式. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. d ...
Vue.js学习之路（五）控制页面元素显示和隐藏
在HTML中国我们通常是直接使用display的属性值,来控制元素的显示与隐藏,在vue中就主要通过两种方式v-if和v-show 两者都是通过对引号中的值或者表达式进行true或false进行判断实 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...

Three.js 学习之路（一）

Three.js 学习之路（一）相关推荐

最新文章

热门文章