ThreeJs創(chuàng)建一個旋轉的3D立方體
發(fā)布日期：2022/1/18 22:27:54 瀏覽量：
下面這個例子來自Three.js官方文檔，創(chuàng)建了一個旋轉的 3D 立方體。
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script>
//創(chuàng)建場景和相機
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//創(chuàng)建渲染器，設置尺寸為窗口尺寸，并將渲染后的元素添加到body
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//創(chuàng)建一個Mesh（綠色的3D立方體），并添加到場景中
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//設置照相機的位置
camera.position.z = 5;
//瀏覽器每次渲染的時候更新立方體的旋轉角度
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
業(yè)務實施流程 馬上咨詢： 如果您有業(yè)務方面的問題或者需求，歡迎您咨詢！我們帶來的不僅僅是技術，還有行業(yè)經(jīng)驗積累。
QQ: 39764417/308460098 Phone: 13 9800 1 9844 / 135 6887 9550 聯(lián)系人：石先生/雷先生