<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CubeGeometry</title>
<script type="text/javascript" src="../../build/three.js"></script>
</head>
<body>
</body>
<script>
let scene = new THREE.Scene();//创建画布
//创建相机，并设置相机位置
let camera = new THREE.PerspectiveCamera( 75, 2, 0.1, 200 );//相机 夹角 宽高比例 最小看到多少 最大看到多少
camera.position.z = 10;
//camera.position.y=10;
//camera.position.set( 10, 5, 20 );
//渲染器
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth , window.innerHeight);
//渲染器添加到元素上
document.body.appendChild( renderer.domElement );
//设置渲染器的背景色
renderer.setClearColor("#FFFFFF");
//绘制图形的材质
let material = new THREE.MeshBasicMaterial({color:"red"});
//创建方形图形
let geometry = new THREE.BoxGeometry(1,2,3);//CubeGeometry
let cube = new THREE.Mesh(geometry,material);//网格对象
scene.add(cube);
//渲染画布
function render(){
renderer.render( scene , camera);
requestAnimationFrame(render);//调用函数 渲染完一帧后调用
cube.rotation.x+=0.01;
//cube.rotation.y+=0.1;
}
render();
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
