image.png
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<canvas id="webglCanvas"></canvas>
</body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var webglCanvas = document.getElementById("webglCanvas");
//创建渲染器并添加到canvas中
var renderer = new THREE.WebGLRenderer({canvas:webglCanvas,antialias:true});//antialias设置，使渲染的物体边缘平滑避免呈现锯齿
renderer.setSize(window.innerWidth, window.innerHeight);//设置视口尺寸
// renderer.setSize(webglCanvas.width, webglCanvas.height);//设置视口尺寸
renderer.setClearColor(0xeeeeee);// 设置背景颜色 (default color is black)
//创建场景；场景允许您设置Three.js将呈现的内容和位置。这是放置物体，灯光和相机的地方。
var scene = new THREE.Scene();
//相机，除了PerspectiveCamera，还有其他选择；
//前两个参数分别指定摄像机的视野角和纵横比。最后两个参数表示此摄像机将渲染的对象的截止距离。
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//75度视野角，宽高比，近裁切平面（视口），远裁切平面
//可以选择设置摄像机的位置或者设置网格的位置，使能够观察到物体
// camera.position.x = -0.7;
// camera.position.y = 0.1;
// camera.position.z = 20;
//网格包括一个几何形状(geomtry)和一个材质（material）
var geometry = new THREE.BoxGeometry(10, 10, 10);//three.js 提供了一系列现成的几何形状对象，不必像原生webgl那样繁琐绘制一个图形
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry, material);
//可以选择设置摄像机的位置或者设置网格的位置，使能够观察到物体
cube.rotation.x = Math.PI/5;
cube.rotation.y = Math.PI/5;//旋转角度
cube.position.z = -18;
//把网格添加到场景中
scene.add(cube);
renderer.render(scene, camera);
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</html>
