<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{margin:auto;
overflow: hidden;
}
</style>
</head>
<script src='../libs/three.js'></script>
<script src="../libs/TrackballControls.js"></script>
<body>
<div id='webgl'>
</div>
<script>
function init(){
var renderer=new THREE.WebGLRenderer(45,window.innerWidth,window.innerHeight);
var camera=new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,1000);
var track=new THREE.TrackballControls(camera);
//旋转速度
track.rotateSpeed = 5;
//变焦速度
track.zoomSpeed = 3;
//平移速度
track.panSpeed = 0.8;
//是否不变焦
track.noZoom = false;
//是否不平移
track.noPan = false;
//是否开启移动惯性
track.staticMoving = false;
//动态阻尼系数 就是灵敏度
track.dynamicDampingFactor = 0.3;
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(new THREE.Color(0x000000))
renderer.shadowMapEnabled=true
var scene=new THREE.Scene();
//添加平面
var planeGmometry=new THREE.PlaneBufferGeometry(70,70);
var planeMaterial=new THREE.MeshPhongMaterial(0xc0c0c0);
var plane=new THREE.Mesh(planeGmometry,planeMaterial);
plane.rotation.x=-0.5*Math.PI
plane.position.set(0,0,0);
plane.receiveShadow=true;
scene.add(plane);
//添加聚光灯
var sposLight=new THREE.SpotLight(0xffffff);
sposLight.position.set(0,40,45);
sposLight.castShadow=true
scene.add(sposLight)
//添加环境光
var ambientLight=new THREE.AmbientLight(0x444444);
scene.add(ambientLight)
//添加球体
var sphereGeometry=new THREE.SphereGeometry(10,50,50);
var sphereMaterial=new THREE.MeshPhongMaterial({color:0xff3333});
var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(15,10,0)
scene.add(sphere);
//添加正方体
var boxGeometry=new THREE.BoxGeometry(10,10,10);
var boxMaterial=new THREE.MeshPhongMaterial({color:new THREE.Color(0x00ff00)});
var box=new THREE.Mesh(boxGeometry,boxMaterial);
box.castShadow=true;
box.position.set(-10,5,0);
scene.add(box)
camera.position.set(10,40,50);
camera.lookAt(scene.position);
renderer.render(scene,camera);
document.getElementById('webgl').appendChild(renderer.domElement);
requestAnimationFrame(render)
function render(){
renderer.render(scene,camera)
track.update()
requestAnimationFrame(render)
}
//监听窗口大小变化
window.onresize=function(){
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.render(scene,camera)
renderer.setSize(window.innerWidth,window.innerHeight);
}
}
window.onload=init
</script>
</body>
</html>
