[html] view plain copy
[html] view plain copy<!DOCTYPE html>
<html>
<head>
<title>example 01.01</title>
<script type="text/javascript" src="./libs/three.js"></script>
<script type="text/javascript" src="./libs/jquery.js"></script>
<script type="text/javascript" src="./libs/stats.min.js"></script>
<script type="text/javascript" src="./libs/AsciiEffect.js"></script>
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output"></div>
<script type="text/javascript">
$(function(){
var stats1=initStats();
//THREE.Scene 一个容器，用于保存并跟踪我们想要渲染的物体
//THREE.PerspectiveCamera camera定义了我们能够在渲染好的scene里面看到什么
// THREE.WebGLRenderer renderer对象负责计算指定相机角度下浏览器中scene的样子，WebGLRenderer：使用计算机上的显卡来渲染场景
var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var renderer=new THREE.WebGLRenderer();
//设置背景颜色
renderer.setClearColor(0xEEEEEE);
//将scene渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//需要生成阴影，这里设置后，还需要设置接收阴影的面，产生阴影的物体与光源
renderer.shadowMapEnabled=true;
//创建坐标轴并加入到scene
var axes=new THREE.AxisHelper(20);
scene.add(axes);
//平面大小，宽60（x），高20（z）
var planeGeometry=new THREE.PlaneGeometry(60,20,1,1);
//平面外观，MeshBasicMaterial：不会对照射有反应，使用MeshLambertMaterial、MeshPhongMaterial试试
var planeMaterial=new THREE.MeshPhongMaterial({color:0xcccccc});
var plane=new THREE.Mesh(planeGeometry,planeMaterial);
//生成阴影
plane.receiveShadow=true;
//平面位置
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15;
plane.position.y=0;
plane.position.z=0;
//加入到scene
scene.add(plane);
//wireframe:true 网格，false 实体表面？
var cubeGeometry=new THREE.CubeGeometry(4,4,4);
var cubeMaterial=new THREE.MeshLambertMaterial({color:0xff0000, wireframe:false});
var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
//生成阴影
cube.castShadow=true;
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
scene.add(cube);
var sphereGeometry=new THREE.SphereGeometry(4,20,20);
var sphereMaterial=new THREE.MeshLambertMaterial({color:0x7777ff, wireframe:false});
var sphere=new THREE.Mesh(sphereGeometry,sphereMaterial);
//生成阴影
sphere.castShadow=true;
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
scene.add(sphere);
camera.position.x=-30;
camera.position.y=40;
camera.position.z=30;
camera.lookAt(scene.position);
//添加光源
var spotLight=new THREE.SpotLight(0xffffff);
spotLight.position.set(-40,60,-10);//照射位置
//这个光源可以产生阴影
spotLight.castShadow=true;
scene.add(spotLight);
var step=0;
//ascii效果
var effect=new THREE.AsciiEffect(renderer);
effect.setSize(window.innerWidth,window.innerHeight);
$("#WebGL-output").append(effect.domElement);
// $("#WebGL-output").append(renderer.domElement);
//renderer.render(scene,camera);
renderScene();
//添加动画，持续渲染
function renderScene(){
stats1.update();
//绕坐标轴旋转的红色方块
cube.rotation.x+=0.02;
cube.rotation.y+=0.02;
cube.rotation.z+=0.02;
//让蓝色球弹跳
step+=0.1;
sphere.position.x=20+(10*(Math.cos(step)));
sphere.position.y=2+(10*Math.abs(Math.sin(step)));
requestAnimationFrame(renderScene);
effect.render(scene,camera);
// renderer.render(scene,camera);
}
//统计fps
function initStats(){
var stats=new Stats();
stats.setMode(0);
stats.domElement.style.position='absolute';
stats.domElement.style.left='0px';
stats.domElement.style.right='0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
});
</script>
</body>
</html>
宁波双眼皮整形医院http://www.iyestar.com/ybzx/syp/