Three.js开发入门

leondon
370 阅读2分钟

官方示例代码

    var scene = new THREE.Scene();
    
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    var cube = new THREE.Mesh( geometry, material );
    scene.add(cube);
    camera.position.z = 5;
    
    var animate = function(){
        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        
        renderer.render( scene, camera );
    }
    
    animate();

scene-场景

 var scene = new THREE.Scene();

Camera-相机

  • PerspectiveCamera 透视相机
  • OrthographicCamera 正交相机

PerspectiveCamera参数

PerspectiveCamera(fov:Number,aspect:Number,near:Number,far:Number)

  • fov 摄影机视锥体垂直视野角度 （人眼视野180度，鸟视野360度）
  • aspect 摄影机视锥体长宽比 （画幅）
  • near 摄影机视锥体近端面 （对焦的）
  • far 摄影机视锥体远端面 （景深 虚焦的）

Render-渲染器

var renderer = new THREE.WebGLRenderer();


    //渲染尺寸限制
    renderer.setSize( window.innerWidth, window.innerHeight );
    //将renderer的dom元素 添加到HTML文档中
    document.body.appendChild( renderer.domElement );

Geometry-形状

    //创建立方体
    var geometry = new THREE.BoxGeometry();
    //创建材质
    var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
    //网格 具体概念在下面
    var cube = new THREE.Mesh( geometry, material );
    //将物体添加到(0,0,0)坐标
    scene.add(cube);
    //相机默认也是(0,0,0)坐标原点，让相机在z轴上平移一下，避免与物体重合
    camera.position.z = 5;

Mesh 网格

网格包含一个几何体以及作用在几何体上的材质。简单理解，就是有一个原木柜子，有一桶蓝色油漆，想要一个蓝色柜子需要将油漆刷上去，那么这个过程可以理解为Mesh。

渲染场景

//渲染循环
  var animate = function(){
        //requestAnimationFrame屏幕刷新 刷新率一般是60次每秒
        requestAnimationFrame( animate );
        
        //给物体的姿态(ratation)绕x轴增加0.01度
        cube.rotation.x += 0.01;
        //给物体的姿态(ratation)绕y轴增加0.01度
        cube.rotation.y += 0.01;
        
        //将场景和相机添加到渲染
        renderer.render( scene, camera );
    }
    
    animate();

整体关系

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js示例</title>
</head>
<body>
</body>
<script src="./lib/three102.js"></script>
<script>
    var scene = new THREE.Scene();
    
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial( {color: 0x19CAAD} );
    var cube = new THREE.Mesh( geometry, material );
    scene.add(cube);
    camera.position.z = 5;
    
    var animate = function(){
        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        
        renderer.render( scene, camera );
    }
    
    animate();
</script>
</html>

其他链接

b站视频

www.bilibili.com/video/BV1U5…

avatar
文章
阅读
粉丝