You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.8 KiB
146 lines
3.8 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
html, body, div {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script src="./three/three.min.js"></script>
|
|
<script src="./three/GLTFLoader.js"></script>
|
|
<script src="./three/OrbitControls.js"></script>
|
|
</head>
|
|
<body onload="draw();">
|
|
<div></div>
|
|
</body>
|
|
<script>
|
|
let renderer, camera, scene, gui, stats, ambientLight, directionalLight, control;
|
|
const w = document.querySelector("div");
|
|
|
|
function initRender() {
|
|
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
|
renderer.setSize(w.clientWidth, w.clientHeight);
|
|
//告诉渲染器需要阴影效果
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
|
|
w.appendChild(renderer.domElement);
|
|
}
|
|
|
|
function initCamera() {
|
|
camera = new THREE.PerspectiveCamera(1, w.clientWidth / w.clientHeight, 0.1, 1000);
|
|
camera.position.set(0, 100, 200);
|
|
camera.lookAt(new THREE.Vector3(0, 0, 0));
|
|
}
|
|
|
|
function initScene() {
|
|
scene = new THREE.Scene();
|
|
}
|
|
|
|
function initGui() {
|
|
//声明一个保存需求修改的相关数据的对象
|
|
gui = {};
|
|
|
|
var datGui = new dat.GUI();
|
|
//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
|
|
}
|
|
|
|
function initLight() {
|
|
ambientLight = new THREE.AmbientLight("#111111");
|
|
scene.add(ambientLight);
|
|
|
|
directionalLight = new THREE.DirectionalLight("#ffffff");
|
|
directionalLight.position.set(40, 60, 10);
|
|
|
|
directionalLight.shadow.camera.near = 1; //产生阴影的最近距离
|
|
directionalLight.shadow.camera.far = 400; //产生阴影的最远距离
|
|
directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置
|
|
directionalLight.shadow.camera.right = 50; //最右边
|
|
directionalLight.shadow.camera.top = 50; //最上边
|
|
directionalLight.shadow.camera.bottom = -50; //最下面
|
|
|
|
//这两个值决定生成阴影密度 默认512
|
|
directionalLight.shadow.mapSize.height = 1024;
|
|
directionalLight.shadow.mapSize.width = 1024;
|
|
|
|
//告诉平行光需要开启阴影投射
|
|
directionalLight.castShadow = true;
|
|
|
|
scene.add(directionalLight);
|
|
}
|
|
|
|
function initModel() {
|
|
|
|
//底部平面
|
|
// var planeGeometry = new THREE.PlaneGeometry(100, 100);
|
|
// var planeMaterial = new THREE.MeshLambertMaterial({color: 0xaaaaaa, side: THREE.DoubleSide});
|
|
// var plane = new THREE.Mesh(planeGeometry, planeMaterial);
|
|
// plane.rotation.x = -0.5 * Math.PI;
|
|
// plane.position.y = -.1;
|
|
// plane.receiveShadow = true; //可以接收阴影
|
|
// scene.add(plane);
|
|
|
|
//创建gltf加载器
|
|
var loader = new THREE.GLTFLoader();
|
|
loader.load("./1.glb", function(gltf) {
|
|
gltf.scene.scale.set(20, 20, 20);
|
|
scene.add(gltf.scene);
|
|
});
|
|
|
|
}
|
|
|
|
function initStats() {
|
|
stats = new Stats();
|
|
document.body.appendChild(stats.dom);
|
|
}
|
|
|
|
function initControl() {
|
|
control = new THREE.OrbitControls(camera, renderer.domElement);
|
|
}
|
|
|
|
function render() {
|
|
|
|
control.update();
|
|
control.autoRotate = true;
|
|
control.enabled = false;
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
function onWindowResize() {
|
|
camera.aspect = w.clientWidth / w.clientHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(w.clientWidth, w.clientHeight);
|
|
|
|
}
|
|
|
|
function animate() {
|
|
//更新控制器
|
|
render();
|
|
|
|
//更新性能插件
|
|
//stats.update();
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
function draw() {
|
|
// initGui();
|
|
initRender();
|
|
initScene();
|
|
initCamera();
|
|
initLight();
|
|
initModel();
|
|
// initStats();
|
|
|
|
initControl();
|
|
|
|
animate();
|
|
window.onresize = onWindowResize;
|
|
}
|
|
</script>
|
|
</html>
|