threejs-day1

最新推荐文章于 2024-06-13 17:30:12 发布

不流泪的机器猫

最新推荐文章于 2024-06-13 17:30:12 发布

阅读量55

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_40442609/article/details/131991181

版权

这篇文章演示了如何利用THREE.js库创建一个3D立方体，并应用透视相机、WebGL渲染器、BoxGeometry、MeshLambertMaterial以及光源。立方体进行旋转动画，并在场景中展示。

摘要由CSDN通过智能技术生成

官网例子

	import * as THREE from 'https://unpkg.com/three/build/three.module.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/2, window.innerHeight/2 );
			document.body.appendChild( renderer.domElement );
			
      		const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 ); //光源
			const geometry = new THREE.BoxGeometry( 1, 1, 1 );//几何体，以（0，0，0）为中心的长宽高为1的立方体
			const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );//
			const cube = new THREE.Mesh( geometry, material );//网格
			scene.add( cube );//场景添加物体
     		scene.add( light );//场景添加光源

			camera.position.z = 2; //x相机位置在z轴2位置

			function animate() {
				requestAnimationFrame( animate );//渲染器循环渲染
				cube.rotation.x += 0.01;  //物体沿x轴和y轴旋转
				cube.rotation.y += 0.01;
				renderer.render( scene, camera );
			}

			animate();