Three.js入门学习笔记01：建立简单立方体场景

最新推荐文章于 2023-08-14 15:46:27 发布

月亮实验室

最新推荐文章于 2023-08-14 15:46:27 发布

阅读量510

点赞数 2

分类专栏： Three.js 文章标签： javascript webgl js 前端

本文链接：https://blog.csdn.net/jbwhysy/article/details/104606906

版权

Three.js 专栏收录该内容

21 篇文章 8 订阅

订阅专栏

参考文章：
https://blog.csdn.net/qq_26822029/article/details/91353209
参考学习《Three.js入门指南》：
https://www.ituring.com.cn/book/1272

建立可旋转的三维立方体

在这里插入图片描述
我们要在页面里建立一个可以转动的三维小立方体，怎么来实现呢?
话不多说上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d</title>
    <script type="text/javascript" src="js/three.js"></script>
<style type="text/css"> 
    body{
        margin:0;
    }
    
    canvas{
        width:100%;
        height:100%;
    }
    
</style>
</head>
    
<body>
    <script type="text/javascript">
    //场景
        var scene = new THREE.Scene();
        
    //摄影机 innerWidth/innerHeight包括滚动条的视口宽和高
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1 ,1000);
        camera.position.z = 5;
    
    //渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
    //渲染器end
        
    //物体
       var geometry = new THREE.BoxGeometry(1, 1, 1);
       var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
       var material = new THREE.MeshBasicMaterial({color:0x00ff00});// MeshBasicMaterial 是不会对光源有反应的材质
       
       var material = new THREE.MeshLambertMaterial( { color:0x00ff00} );//MeshLambertMaterial 对灯光有反应的材质 MeshLambertMaterial 注意这个单词是Lambert而不是Lamber
       var cube = new THREE.Mesh( geometry, material );
       scene.add( cube ); 
     //物体end
        
    //渲染
      // renderer.render(scene, camera);不动的物体 
        
    //动画
        
       function animate() {
       cube.rotation.x += 0.01;
       cube.rotation.y += 0.01;
       renderer.render( scene, camera);
       requestAnimationFrame( animate );
       }
       animate();
        
    //光源
        
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        scene.add( spotLight );
        
    //光源end          
    </script>
</body>
</html>

1.背景知识

WebGL是基于OpenGL ES 2.0的Web标准，可以通过HTML5 Canvas元素作为DOM接口访问。可以把WebGL简单地认为是一种网络标准，定义了一些较底层的图形接口，Chrome，Firefox等浏览器实现了这些标准，通过JS代码，在网页上可以实现三维图形渲染。

Three.js封装了底层的图形接口，使学习者无需掌握太多图形学知识，也能简单的实现三维渲染。Three.js除了WebGL以外，还提供了基于Canvas，SVG标签的渲染器。

Three.js的作者Mr. doob，是Three.js项目发起人和主要贡献者之一，Three.js是Github上一个开源项目。

Three.js是基于MIT协议进行发布的。

2.引入Three.js

在three.js官网下载three.js的压缩包，在部分需要声明外部文件three.js，然后就能通过全局变量THREE访问到所有属性和方法。
https://threejs.org/

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

3.建立三维场景的要素

渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。
接下来分别来看每一部分。

a.Canvas元素

可手动在HTML里定义Canvas元素，或让Three.js帮你生成。
手动定义

<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
</body>

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

function init(){
}

问题：
我加了init()不好用，不知为什么

b.渲染器（Renderer）

渲染器将和Canvas元素进行绑定，如果之前的HTML中手动定义了id为mainCanvas的Canvas元素，那么

var renderer = new THREE.WebGLRenderer({
	canvas: document.getElementById("mainCanvas")
});

如果要three.js生成Canvas元素，在HTML中就不需要定义Canvas元素，在JS中可以如下这样写

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);

上面第二行表示，设置Canvas的宽为400px , 高300px. 第三行将渲染器对应的Canvas元素添加到中。

使用下面代码将背景色设置为黑色：

renderer.setClearColor(0x000000);

c.场景（Scene）

var scene = new THREE.Scene();

d.照相机（Camera）

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5); 
scene.add(camera);

e.几何体

创建x,y,z方向长度分别为1，2，3的长方体，并将其设为红色

var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
		new THREE.MeshBasicMaterial({
			color: 0xff0000
		})
);
scene.add(cube);

长度单位1的表示：
这里的长度是在物体坐标系中，其单位与屏幕分辨率等无关，就是一个虚拟空间的坐标系，1代表多少没有实际意义，而是一种相对长度。

f.渲染

定义了场景中的物体，设置好照相机后，可以渲染，调用渲染函数，使其渲染一次。

renderer.render(scene, camera);

4.书中完整代码

https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter1/1.2.1.html

5.我的版本

没有init()就好用

<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/three.js"></script>
</head>
<body>
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
<script type="text/javascript">
                // 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(45, 4 / 3, 1, 1000);
                camera.position.set(0, 0, 5);
                scene.add(camera);
                
                // a cube in the scene
                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                        new THREE.MeshBasicMaterial({
                            color: 0xff0000
                        })
                );
                scene.add(cube);
                
                // render
                renderer.render(scene, camera);
     
        </script>
</body>
</html>

效果：
在这里插入图片描述
加了动态

6.总结

前文提到的两种canvas绘制方式，手动生成：
需在body里定义，且在渲染器里绑定

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

<script>
//renderer
var renderer = new THREE.WebGLRenderer({
	canvas: document.getElementById("mainCanvas")
});
</script>

自动生成，不用定义，直接在渲染器里写
此处，视景体的宽高比应和渲染区域宽高比保持一致，否则画面会拉伸。

<script>
//renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(400,300);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
</script>

7.《Three.js入门指南》Three.js功能概览

https://www.ituring.com.cn/book/miniarticle/48067

Cameras（照相机，控制投影方式）

Camera
OrthographicCamera
PerspectiveCamera

Core（核心对象）

BufferGeometry
Clock（用来记录时间）
EventDispatcher
Face3
Face4
Geometry
Object3D
Projector
Raycaster（计算鼠标拾取物体时很有用的对象）

Lights（光照）

Light
AmbientLight
AreaLight
DirectionalLight
HemisphereLight
PointLight
SpotLight

Loaders（加载器，用来加载特定文件）

Loader
BinaryLoader
GeometryLoader
ImageLoader
JSONLoader
LoadingMonitor
SceneLoader
TextureLoader

Materials（材质，控制物体的颜色、纹理等）

Material
LineBasicMaterial
LineDashedMaterial
MeshBasicMaterial
MeshDepthMaterial
MeshFaceMaterial
MeshLambertMaterial
MeshNormalMaterial
MeshPhongMaterial
ParticleBasicMaterial
ParticleCanvasMaterial
ParticleDOMMaterial
ShaderMaterial
SpriteMaterial

Math（和数学相关的对象）

Box2
Box3
Color
Frustum
Math
Matrix3
Matrix4
Plane
Quaternion
Ray
Sphere
Spline
Triangle
Vector2
Vector3
Vector4

Objects（物体）

Bone
Line
LOD
Mesh（网格，最常用的物体）
MorphAnimMesh
Particle
ParticleSystem
Ribbon
SkinnedMesh
Sprite

Renderers（渲染器，可以渲染到不同对象上）

CanvasRenderer
WebGLRenderer（使用WebGL渲染，这是本书中最常用的方式）
WebGLRenderTarget
WebGLRenderTargetCube
WebGLShaders（着色器，在最后一章作介绍）

Renderers / Renderables

RenderableFace3
RenderableFace4
RenderableLine
RenderableObject
RenderableParticle
RenderableVertex

Scenes（场景）

Fog
FogExp2
Scene

Textures（纹理）

CompressedTexture
DataTexture
Texture

Extras

FontUtils
GeometryUtils
ImageUtils
SceneUtils

Extras / Animation

Animation
AnimationHandler
AnimationMorphTarget
KeyFrameAnimation

Extras / Cameras

CombinedCamera
CubeCamera

Extras / Core

Curve
CurvePath
Gyroscope
Path
Shape

Extras / Geometries（几何形状）

CircleGeometry
ConvexGeometry
CubeGeometry
CylinderGeometry
ExtrudeGeometry
IcosahedronGeometry
LatheGeometry
OctahedronGeometry
ParametricGeometry
PlaneGeometry
PolyhedronGeometry
ShapeGeometry
SphereGeometry
TetrahedronGeometry
TextGeometry
TorusGeometry
TorusKnotGeometry
TubeGeometry

Extras / Helpers

ArrowHelper
AxisHelper
CameraHelper
DirectionalLightHelper
HemisphereLightHelper
PointLightHelper
SpotLightHelper

Extras / Objects

ImmediateRenderObject
LensFlare
MorphBlendMesh

Extras / Renderers / Plugins

DepthPassPlugin
LensFlarePlugin
ShadowMapPlugin
SpritePlugin

Extras / Shaders

ShaderFlares
ShaderSprite

8.附上《Three.js入门指南》里第一个完整的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="../lib/three.js"></script>
        
        <script type="text/javascript">
            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(45, 4 / 3, 1, 1000);
                camera.position.set(0, 0, 5);
                scene.add(camera);
                
                // a cube in the scene
                var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                        new THREE.MeshBasicMaterial({
                            color: 0xff0000
                        })
                );
                scene.add(cube);
                
                // render
                renderer.render(scene, camera);
            }
        </script>
    </head>
    
    <body onload="init()">
        <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
    </body>
</html>