Three.js入门 第二章 牛刀小试-旋转的立方体

Three.js入门 第二章 牛刀小试-旋转的立方体

首页角色扮演代号立方体更新时间:2024-06-09

接下来我们要搭建一个场景,这个场景里面有一个旋转的立方体。

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