<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene(); //創建場景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);//創建相機
var renderer = new THREE.WebGLRenderer();//創建渲染器
renderer.setClearColor('#FFFFFF');//設置場景的顏色
renderer.setSize(window.innerWidth, window.innerHeight);//設置渲染區域
document.body.appendChild(renderer.domElement);//添加
var geometry = new THREE.CubeGeometry(2, 2, 2);//創建一個立方體
var material = new THREE.MeshBasicMaterial({color: 0xff0000});//填充的材質
var cube = new THREE.Mesh(geometry, material);//網格繪製
scene.add(cube);//場景添加網格
camera.position.z = 10;//相機的位置
//渲染
function render() {
requestAnimationFrame(render);//動畫循環
cube.rotation.x+=0.01;//旋轉的方向
renderer.render(scene,camera);//繪製
}
render();
</script>
</body>
</html>three.js 創建一個立方體
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.