接下来我们要搭建一个场景,这个场景里面有一个旋转的立方体。
1.建立一个HTML文件,引入three 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>牛刀小试p</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://unpkg.com/three/build/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>
2.创建一个场景。
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 );
我们现在建立了场景、相机和渲染器,对于其中参数的意思,可以去官网查阅文档。
3.创建立方体。
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
4.在连续渲染方法里旋转立方体。
animate()
function animate() {
requestAnimationFrame( animate );
cube.rotation.x = 0.01;
cube.rotation.y = 0.01;
renderer.render( scene, camera );
};
祝贺你!你现在已经成功完成了你的第一个Three.js应用程序。
虽然它很简单,但现在你已经有了一个入门的起点。
Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved