版本:108
非常基础的代码,能了解ThreeJs各个基础参数
代码解释直接看注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一章-画面</title>
<style>
//以下CSS根据自己的需求来写
body{
color: #FF8C00;
font-family: monospace;
font-size: 13px;
text-align: center;
padding: 0;
margin: 0;
}
#info{
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
}
#container{
width: 100%;
height: 800px;
}
a{
color: red;
}
</style>
</head>
<body>
//此DIV作为ThreeJs画图的容器
<div id="container"></div>
<div id="info">webgl-threeJs</div>
<script src="../../js/three.js"></script>
<!-- <script src="../../js/WEBGL.js"></script>-->
<script>
//判断浏览器是否支持WEBGL
/*if ( !WEBGL.isWebGLAvailable() ) {
alert("浏览器不支持WEBGL!");
}*/
//渲染器、相机、场景、灯光、几何图形
var renderer,camera,scene,light;
var cube;
//渲染器函数
function initRenderer() {
//获取容器的长宽
width = document.getElementById("container").clientWidth;
height = document.getElementById("container").clientHeight;
// alert(width+'--'+height);
//实例化渲染器
renderer = new THREE.WebGLRenderer({
//抗锯齿(消耗性能,效果好)
antialias:true
});
//设置渲染器大小
renderer.setSize(width,height);
//渲染进容器中
document.getElementById('container').appendChild(renderer.domElement);
//设置颜色及其透明度(0-1之间的浮点数)
renderer.setClearColor('#7fffa7',1.0);
}
//相机
function initCamera() {
//实例化相机(参数:fov(视野角度)、aspect(长/高比例)、near(摄像机视近端面距离)、far:(摄像机视远端面距离))
camera = new THREE.PerspectiveCamera(45,width / height ,0.1 ,2000);
//设置相机位置
//相机中心位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 50;
//相机快门位置
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//相机镜头的朝向
camera.lookAt(1,0,0);
}
//场景
function initScene() {
scene = new THREE.Scene();
}
//灯光,这里使用环境光
function initLight() {
//参数:颜色、强度
light = new THREE.AmbientLight('#446cff',1.0);
//添加到场景中
scene.add(light);
}
function initObject() {
//实例化一个正方式,参数:长、宽
var geometry = new THREE.BoxGeometry(10,10);
//实例化基础网格材质(这种材质不受光照的影响),参数:颜色
var material = new THREE.MeshBasicMaterial({color:'#FF8C00'});
//实例化mesh构造器,参数:geometry、material
cube = new THREE.Mesh(geometry,material);
//添加到场景中
scene.add(cube);
}
function animation() {
//告诉渲染器清除颜色、深度或模板缓存
renderer.clear();
//像渲染器中添加场景和相机
renderer.render(scene,camera);
}
function start() {
initRenderer();
initCamera();
initScene();
initLight();
initObject();
animation();
}
start();
</script>
</body>
</html>