Three.js学习笔记(一)

Three.js学习笔记(一)

1.四大组建

1.场景

任何要显示的东西,放在场景的任何位置

一个页面可以有多个场景

实现方式

THREE.Scene = function()

2.相机

浏览器中所能看到的东西,就是由相机拍摄出来。即将相机能看到的内容显示在浏览器画面上

分类
1.透视相机

近大远小+灭点

2.正投影相机

远处和近处一样大,也称正交相机

参数
THREE.PerspectiveCamera = function(fov,aspect,near,far)

fov:视角,我的理解是以相机为中心,能看到的最高和最低之间的夹角,即 θ \theta θ

Three.js学习笔记(一)_第1张图片

aspect:近平面的宽度除以高度,即图中的 w h \frac{w}{h} hw

near:相机和近处截面的距离

far:相机和远处截面的距离

例子
var camera = new THREE.PerspectiveCamera(45,width/height,1,1000)
scene.add(camera)

3.渲染器

计算的过程称为渲染,即怎么将眼前的场景显示到屏幕上

代码:

THREE.WebGLRenderer()

4.几何体

显示在场景中的对象

2.例子


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../Js/three.js">script>  
	head>
	<body>
		<script>
			var scene =new THREE.Scene();
			
			var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000)//不懂为什么要这个大小,以后回来填坑
			
			var renderer = new THREE.WebGLRenderer();
			renderer.setClearColor("#ffffff");//背景颜色?填坑
			renderer.setSize(window.innerWidth,window.innerHeight);//不懂为什么要这个大小,以后回来填坑
			document.body.appendChild(renderer.domElement);
			
			var geometry = new THREE.CubeGeometry(2,2,2);
			var material = new THREE.MeshBasicMaterial({color:0xff0000});
			
			var cuba = new THREE.Mesh(geometry,material);
			
			scene.add(cuba);
			camera.position.z = 5;  //数值越大,图形越小,即离相机的距离越远
			function render(){
				requestAnimationFrame(render);
				cuba.rotation.x += 0.01;
				renderer.render(scene,camera);
			}
			render();
		script>
	body>
html>

3.遇到的坑

  • 不知道错误在哪里。这个问题很致命,因为前期不知道在哪里看报错,导致我一行一行地校验代码,效率极其低下。

    • 解决办法:在浏览器中使用F12进入浏览器检查页面,点击console,即可查看哪里出错

Three.js学习笔记(一)_第2张图片

4.关于使用软件问题:

1.HBuilder X轻量级,运行速度快,但代码补全和代码高亮这两块很头疼!
2.webstorm代码补全非常好,高亮也可以,但就是运行占用内存比较大
3.最近看到网上推荐atom,感觉挺好用的,有代码补全,界面看的也很舒适,最重要的是,atom可以实现实时预览!!!先用一段时间看看。

参考资料:Three.js教程,包含矩阵,着色器,模型加载,WebGL相关知识,学习用

小白入门,望各位大神多多包涵!!!

你可能感兴趣的:(three.js,webgl,three.js)