<!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 创建一个立方体
最新推荐文章于 2024-05-14 16:44:50 发布