<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/three.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 创建一个盒子 -->
<div id="demo"></div>
<script>
init()
//初始化
function init(){
//创建一个场景
var scene = new THREE.Scene();
//设置摄像机 摄像机角度 长宽比 最近能看到的画面 最远能看到的画面 一般设置成0.1和2000
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
//创建渲染器
var renderer = new THREE.WebGL1Renderer();
// 设置渲染器的初始颜色
renderer.setClearColor(new THREE.Color(0xEEEEEE))
//设置输出canvas画面的大小
renderer.setSize(window.innerWidth,window.innerHeight)
// 设置渲染物体的阴影
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
/**
* 创建三维坐标系
* */
//显示三维坐标
var axes = new THREE.AxisHelper(20);
// 添加坐标系到场景中
scene.add(axes)
// 创建一个平面的几何体 宽高60,20
var planeGeometry = new THREE.PlaneGeometry(120, 120);
// 给地面物体上色
var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc})
/**
* 创建地面
*/
// 创建地面 讲平面的几何和材质颜色结合在一起
var plane = new THREE.Mesh(planeGeometry,planeMaterial)
// 地面添加阴影
// plane.castShadow = true;
// 地面接收阴影
plane.receiveShadow = true;
// 物体移动位置
plane.rotation.x = -0.5 * Math.PI
plane.position.x = 0
plane.position.y = 0
plane.position.z = 0
// 将地面添加到场景中
scene.add(plane)
/**
* 创建立方体
*/
// 创建立方体 设置长宽高
var cubeGeometry = new THREE.BoxGeometry(4,4,4)
// 设置材质 MeshLambertMaterial 网格材质
var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000})
// 将立方体和材质拼在一起
var cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
cube.rotation.y = 0.4
cube.position.x = 0;
cube.position.y = 3;
//对象是否渲染到阴影贴图中
cube.castShadow = true
// 将立方体添加到场景中
scene.add(cube);
/**
* 创建球体
*/
// 创建球体 球体半径 球体位置
var spherGeometry = new THREE.SphereGeometry(4,20,20)
var spherMaterial = new THREE.MeshLambertMaterial({color:0xffff00})
var sphere = new THREE.Mesh(spherGeometry,spherMaterial)
sphere.castShadow = true;
sphere.position.y = 6;
sphere.position.x = 12;
scene.add(sphere)
/**
* 添加聚光灯
*/
// 创建聚光灯
var spotLigth = new THREE.SpotLight(0xffffff);
// 设置灯的位置 x y z
spotLigth.position.set(130,130,-30)
// 设置阴影
spotLigth.castShadow = true
// 将灯添加到场景中
scene.add(spotLigth);
// 定位星际,并且指向场景中心
camera.position.x = 30;
camera.position.y = 30;
camera.position.z = 30;
camera.lookAt(scene.position)
// 将渲染器输出到HTML元素中
document.querySelector("#demo").appendChild(renderer.domElement)
//将场景和相机渲染出来
renderer.render(scene,camera)
// 旋转函数
function render(){
renderer.render(scene,camera)
cube.rotateY(0.01)
// 请求动画帧
requestAnimationFrame(render);
}
render()
}
</script>
</body>
</html>
threejs入门练习---旋转的正方形
最新推荐文章于 2024-03-08 10:51:29 发布