Getting to know three.js and simple exercises

Official website documentation three.js docs

First, create the scene scene camera camera renderer render must first import the three.js js file according to the official website

const scene = new THREE.Scene(); //创建场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 

const renderer = new THREE.WebGLRenderer();//创建渲染器对象
renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染区尺寸
document.body.appendChild( renderer.domElement );//body中插入canvas对象

/*

three.js has several different cameras

* 1.js has several cameras, what are they? [ a. Four cameras: PerspectiveCamera (perspective camera), OrthographicCamera (orthographic projection camera), CubeCamera (cube camera or panoramic camera) and StereoCamera (3D camera)]

*

* 2. What are the parameters of the camera? [

* a. Perspective camera: PerspectiveCamera( fov, aspect, near, far ) fov: viewing angle size, aspect: aspect ratio, near: near cropping plane, far: far cropping plane

* b. Orthogonal projection camera: OrthographicCamera( left, right, top, bottom, near, far ) left: left boundary of viewing frustum, right: right boundary of viewing frustum, top: upper boundary of viewing frustum, bottom: viewing frustum body lower boundary, near: near plane, far: far plane

* c. Cube camera: CubeCamera( near, far, cubeResolution ) near: near cut plane, far: far cut plane, cubeResolution: cube texture resolution

* d.3D camera: StereoCamera( fov, aspect, near, far ) fov: viewing angle size, aspect: aspect ratio, near: near cropping plane, far: far cropping plane

* ]

*

* 3. How is the position of the camera set? [

* a. The position of the camera is set by the camera's position property Camera.position.set(x,y,z);

* ]

* 4. How is the direction of the camera set? [

* a. The direction of the camera is set by the camera's lookAt method Camera.lookAt(0,0,0);

* b. By default, the camera looks like the -z axis from the positive z axis (the camera lens shoots in the direction of the -z axis), as if looking from the outside of the screen to the inside of the screen (simulating the visual effect of the human eye)

* ]

* 5. How is the field of view of the camera set? [

* a. Which field of view the camera takes as the top is set by the up method

* b.Camera.up.set(x,y,z); The default is that the y-axis is up, which is the difference between you holding the camera lying down, lying down or sideways, or looking up, looking down, Turn your head to see the difference.

* ]

*/

According to the official website example

add cube

const geometry = new THREE.BoxGeometry(); //立方体图形
//材质对象material 这里表示给材质对象添加颜色,颜色仅支持十六进制的0x色彩
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );//网格模型对象添加到场景中

camera.position.z = 5;//相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

render scene

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

Add an animation function to make the object rotate

Add the following code above the call to renderer.render in the animate() function :

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

The whole code is as follows

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		body { margin: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
</head>
<body>
	<script type="text/javascript" src="js/three.js"></script>
	<script type="text/javascript">
		// 场景
		var scene = new THREE.Scene();
 
		// 摄像机
		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.MeshBasicMaterial( { color: 0x00ff00} );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );
       // 动画
function animate() {
 
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.01;
 renderer.render( scene, camera );

 requestAnimationFrame( animate );
}
animate();
		// 物体 end
 // 光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );
// 光源 end
// 物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 物体 end
renderer.setClearColor(new THREE.Color(0x000000, 1.0));
renderer.shadowMap.enabled = true; 
cube.castShadow = true; //投射阴影
plane.receiveShadow = true; //地面接收阴影
spotLight.castShadow = true;
	</script>
</body>
</html>

The effect is as follows: a cube that rotates up and down, left and right

personal practice code

Be sure to introduce the three.js file, otherwise the rendering will not be displayed on the white screen

Here I am using the three.main.js external vue project in the remote warehouse, you can download the package by yourself according to the official website


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ffff;   /* 背景色只能是hash模式 */
				margin: 0;
				overflow: hidden; /* 隐藏body窗口区域滚动条 */
			}
		</style>
	</head>
	<body>
        <!-- 起步 
        创建three.js文件在官网找到three.js代码粘贴进去 并导入到html文件中(必须引入three.js) 
    2.导入在线cdn的three.main.js链接

       -->
        <script type="text/javascript" src="../js/three.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
		<script>
			var camera, scene, renderer;
			var geometry, material, mesh;
            // 此处声明了相机 场景
			function init() {

				scene = new THREE.Scene();  //创建场景对象
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 12 );
				camera.position.z = 3; //相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

				scene.background = new THREE.Color( 0xffffff );

           // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
				geometry = new THREE.SphereGeometry( 1,12,12 );
                 //材质对象Material，这里只是单单的给赋值颜色采用的是 十六进制的0x色彩
				material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );
               

				mesh = new THREE.Mesh( geometry, material );//网格模型对象
				scene.add( mesh ); //网格模型对象添加到场景中

				renderer = new THREE.WebGLRenderer( { antialias: true } ); //创建渲染器对象
				renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染区尺寸
				document.body.appendChild( renderer.domElement );	//body中插入canvas对象			
				
			}
           //定义动画
			function animate( time ) {

				mesh.rotation.x = time * 0.0005;
				mesh.rotation.y = time * 0.001;

				renderer.render( scene, camera );//执行渲染操作 指定场景,相机作为参数
				requestAnimationFrame( animate );

			}
    //    此demo声明函数仅仅是为了便捷
			init();
			requestAnimationFrame( animate );

		</script>
	</body>
</html>

The effect picture is as follows: a rotating sphere

I just got in touch with three, and it's just my initial understanding.

Getting to know three.js and simple exercises

Guess you like