threejs中创建场景与渲染场景

最新推荐文章于 2023-10-31 21:34:03 发布

可乐加冰^

最新推荐文章于 2023-10-31 21:34:03 发布

阅读量621

点赞数

文章标签： javascript 前端 3d

本文链接：https://blog.csdn.net/m0_54399030/article/details/125788258

版权

1.创建场景

为了能够用three.js实际显示任何东西，我们需要三样东西：场景、相机和渲染器，这样我们就可以用相机渲染场景。

// 设置场景
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 );
renderer.setClearColor('#ffffff')// 修改背景颜色
document.body.appendChild( renderer.domElement );

new THREE.PerspectiveCamera(场景范围，宽度/高度，near，far);

除了创建渲染器实例之外，我们还需要设置我们希望它渲染我们的应用程序的大小。使用我们的应用程序要填充的区域的宽度和高度是个好主意——在这种情况下，是浏览器窗口的宽度和高度。对于性能密集型应用程序，您还可以提供setSize较小的值，例如和，这将使应用程序以四分之一大小呈现。window.innerWidth/2``window.innerHeight/2

要创建一个立方体，我们需要一个BoxGeometry. 这是一个包含立方体的所有点 ( vertices) 和填充 ( ) 的对象。

除了几何形状，我们还需要一种材质来为它着色。使用MeshBasicMaterial。

我们需要的第三件事是Mesh. 网格是一个对象，它采用几何图形并为其应用材质，然后我们可以将其插入到场景中并自由移动。

默认情况下，当我们调用时，我们添加的东西会被添加到坐标中。这将导致相机和立方体在彼此内部。为了避免这种情况，我们只需将相机移开一点。scene.add()``(0,0,0)

// 创建立方体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建网格材质 用来着色
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建网格
const cube = new THREE.Mesh( geometry, material );// 几何，材料
scene.add( cube );

camera.position.z = 5; // 调整相机位置

2.渲染场景

创建完场景后我们要进行渲染，使用requestAnimationFrame有很多优势。当用户导航到另一个浏览器选项卡时它会暂停，因此不会浪费他们宝贵的处理能力和电池寿命。

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

对立方体进行旋转

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

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			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 );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

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

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

渲染效果
在这里插入图片描述
这样我们就完成了一个最基础的带有旋转立方体的场景