<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Three组成</title>
<style type="text/css">
html,
body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
<script src="./lib/three.js"></script>
<script src="./lib/js/controls/OrbitControls.js"></script>
<script src="./lib/js/libs/stats.min.js"></script>
<script src="./lib/js/libs/dat.gui.min.js"></script>
<script>
var renderer, camera, scene,gui,lingt,stats,controls;
// 渲染
function initRender(){
renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)// 尺寸
renderer.setClearColor('#fffffff',0)
renderer.shadowMap.enabled = true;//阴影效果
renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 默认的是,没有设置的这个清晰
renderer.setPixelRatio(window.devicePixelRatio)// 分辨率
document.body.appendChild(renderer.domElement);
}
//相机
function initCamera(){
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(0,40,50)
}
//场景
function initScene(){
scene = new THREE.Scene();
}
function initGui(){
gui={};
var datGui = new dat.GUI();
}
// 灯光
function initLight(){
scene.add(new THREE.AmbientLight('#ffffff'))
light = new THREE.SpotLight('#000000')
light.position.set(-40,60,10);
light.castShadow = true;
scene.add(light)
}
//内容
function initModel(){
// 辅助工具
var helper = new THREE.AxesHelper(50);
scene.add(helper);
// 地板
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 10000 ), new THREE.MeshPhongMaterial( { color: 0x009688, depthWrite: false } ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add( mesh );
//添加地板割线
var grid = new THREE.GridHelper( 2000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.1;
grid.material.transparent = true;
scene.add( grid );
}
//初始化性能插件
function initStats(){
stats = new Stats();
document.body.appendChild(stats.dom)
}
//交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放
function initControls(){
controls = new THREE.OrbitControls(camera,renderer.domElement)
// 如果使用animate方法时,将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转 意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
// controls.rotateSpeed = .5;
//是否自动旋转
controls.autoRotate = false;
controls.autoRotateSpeed = .5;
//设置相机距离原点的最远距离
controls.minDistance = 1;
//设置相机距离原点的最远距离
controls.maxDistance = 2000;
//是否开启右键拖拽
controls.enablePan = true;
}
function render(){
renderer.render(scene,camera)
}
//动画
function animate(){
render()//更新控制器
stats.update()//更新性能插件
controls.update()
requestAnimationFrame(animate)
}
//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function draw() {
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}
</script>
</body>
</html>
ThreeJS基础模板
最新推荐文章于 2024-05-30 17:57:45 发布