Three.js入门系列之 —— 创建一个场景

最新推荐文章于 2025-03-20 20:28:21 发布

原创最新推荐文章于 2025-03-20 20:28:21 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#three #创建一个场景

Three 专栏收录该内容

2 篇文章

订阅专栏

一个典型的Three.js程序至少包含渲染器、场景、照相机以及场景中创建的物体，这些是构建程序的基本要素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>创建一个场景</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100% }
  </style>

</head>
<body>
<script src="../../build/three.js"></script>
<script>
	//创建一个场景
	var scene = new THREE.Scene();
	//创建摄影机
	//第一个属性是视野角度（FOV），第二个属性是长宽比，第三个是近剪界面，第四个是远剪界面
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	//创建渲染器
	var renderer = new THREE.WebGLRenderer();
	//设置渲染器的宽高
	renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
	//将渲染器这个元素添加到文档中
	document.body.appendChild( renderer.domElement );

	//创建一个box
	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	//创建一个MeshBasicMaterial材质
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	//创建一个Mesh(网格)，网格是包含有一个几何体以及应用在此几何体上的材质的对象。
	var cube = new THREE.Mesh( geometry, material );
	//添加box到场景中，
	scene.add( cube );
	//默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
	camera.position.z = 5;

	function animate() {
		requestAnimationFrame( animate );
		//每次刷新改变一下rotation的值，可以让box动起来
		cube.rotation.x += 0.01;
		cube.rotation.y += 0.01;
		//渲染场景
		renderer.render( scene, camera );
	}
	animate();
</script>
</body>
</html>

scene