Three.js - 学习之路（二） | 智伤帝的个人博客

第一部分的代码

创建场景、摄像机、渲染器

javascript


//一个三维场景需要包含 场景、摄像机、渲染器
            
//这行代码用来创建三维场景
var scene = new THREE.Scene();

//这行代码用来创建透视摄像机 
//参数分别代表 视场角（视野的范围 于焦距成关系） 摄像机的长宽比 近景裁剪 远景裁剪
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//使用Webgl渲染（如果当前环境不支持webgl，threejs会自动跳转其他的渲染方式）
var renderer = new THREE.WebGLRenderer();

//设置渲染的范围大小
//隐藏的第三个参数可以为false，写法如：
//setSize(window.innerWidth/2, window.innerHeight/2, false)
//false情况渲染分辨率减半
renderer.setSize( window.innerWidth, window.innerHeight );

//将渲染的内容添加到HTML中
document.body.appendChild( renderer.domElement );//这里可以附加到特定id的标签中

第二部分的代码

添加物体并将物体添加到场景中

javascript


//创建一个方块 参数分别是 长宽高
var geometry = new THREE.BoxGeometry( 1, 1, 1 );//创建模型构成数据

//创建一个材质 并且给予绿色
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );//创建模型材质数据

//创建方块（将上面的变量作为参数传递进去）
var cube = new THREE.Mesh( geometry, material );//将上面的数据绑定到一起

//给场景添加方块
scene.add( cube );

第三部分的代码

设置摄像机位置并添加刷新函数

javascript


//设置摄像机的位置（摄像机在0，0，0位置，看不见方块）
camera.position.z = 5;

//调整到其他位置的方法
// camera.position.y = 2;
// camera.position.x = 3;
// camera.lookAt(new THREE.Vector3(0, 0, 0));//让摄像机望向原点

function animate() {
    //确保每秒刷新60次场景
    requestAnimationFrame( animate );
    
    //实现方块自转
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    
    //通过camera的摄像机将场景渲染出来
    renderer.render( scene, camera );
}
animate();

官方的源代码

javascript


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( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

HTML 源码

html

<!DOCTYPE html>
<html>
	<head>
        <meta charset=utf-8>
        <!--本文件来自于官方文档-->
		<title>My first three.js app</title>
		<style>
            /*overflow:hidden取消滑动栏*/
			body { margin: 0;overflow: hidden }
			canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
        <!--引用three.js-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
        <script type="application/javascript">
            
            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( 1, 1, 1 );

            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

            var cube = new THREE.Mesh( geometry, material );

            scene.add( cube );

            camera.position.z = 5;
//            camera.position.y = 2;
//            camera.position.x = 3;
//            camera.lookAt(new THREE.Vector3(0, 0, 0));

            function animate() {

                requestAnimationFrame( animate );
                
                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;
                

                renderer.render( scene, camera );
            }
            animate();
        
        </script>
	</body>
</html>