<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../demo1/libs/three.js"></script>
<script src="../demo1/libs/controls/OrbitControls.js"></script>
<style>
body {
/* 邊距設(shè)置為0,設(shè)置溢出隱藏，完整的使用整個(gè)頁面 */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 將在div里面輸出畫面 -->
<div id="webgl-output"></div>
<script>
function init() {
// 創(chuàng)建場景
var scene = new THREE.Scene();
// 設(shè)置攝像機(jī)
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
// 創(chuàng)建渲染器
var renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染器的初始顏色
renderer.setClearColor(new THREE.Color(0xeeeeee));
// 設(shè)置輸出canvas畫面的大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 設(shè)置渲染物體陰影
renderer.shadowMap.enabled = true;
// 顯示三維坐標(biāo)系
var axes = new THREE.AxesHelper(20)
// 添加坐標(biāo)系到場景中
scene.add(axes);
// 創(chuàng)建地面的幾何體
var planeGeometry = new THREE.PlaneGeometry(60, 20);
// 給地面物體上色
var planeMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc });
// 創(chuàng)建地面
var plane = new THREE.Mesh(planeGeometry, planeMaterial)
// 物體移動(dòng)位置
// plane.rotation.x = -0.5 * Math.PI;
// plane.position.x = 15;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
plane.castShadow = true;
// 接收陰影
plane.receiveShadow = true;
// 將地面添加到場景中
scene.add(plane);
// 添加立方體
var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 0;
cube.position.y = 4;
cube.position.z = 2;
// 對象是否渲染到陰影貼圖當(dāng)中
cube.castShadow = true;
scene.add(cube)
// 球體
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var spherMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
var sphere = new THREE.Mesh(sphereGeometry, spherMaterial)
sphere.position.x = 10;
sphere.position.y = 4;
sphere.position.z = 0;
// 對象是否渲染到陰影貼圖當(dāng)中
sphere.castShadow = true;
scene.add(sphere)
// 創(chuàng)建聚光燈
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(130, 130, -130);
spotLight.castShadow = true;
spotLight.angle = Math.PI / 4;
spotLight.shadow.penumbra = 0.05
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.innerHeight = 1024;
// 添加聚光燈
scene.add(spotLight)
// 定位相機(jī)，并且指向場景中心
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position)
// 將渲染器輸出添加html元素中
document.getElementById('webgl-output').appendChild(renderer.domElement);
renderer.render(scene, camera)
// 創(chuàng)建controls對象;
var controls = new THREE.OrbitControls(camera, renderer.domElement)
// 監(jiān)聽控制器的鼠標(biāo)事件，執(zhí)行渲染內(nèi)容
controls.addEventListener('change', () => {
renderer.render(scene, camera)
})
//定制渲染函數(shù)
let T0 = new Date() //設(shè)置時(shí)間差
function render(){
let T1 = new Date()
let t = T1 -T0 //獲取時(shí)間間隔
T0 = T1
renderer.render(scene,camera)
//旋轉(zhuǎn)立方體,每次繞y軸旋轉(zhuǎn)0.01弧度，每一秒渲染0.001弧度
cube.rotateY(0.001*t)
window.requestAnimationFrame(render) //避免掉幀，就是一幀接一幀，逐幀，預(yù)備加載下一幀
}
//setInterval(render,16) 電腦1s渲染60幀，1ms = 16幀
//一般為了性能考慮，不建議使用setInterval函數(shù)，會(huì)出現(xiàn)掉幀
//使用請求動(dòng)畫幀函數(shù)
window.requestAnimationFrame(render)
}
window.onload = init
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
