webGL,Three.js初识 欢迎大家一起参与讨论...
2015-03-07 09:47
489 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tween</title>
<!--请去网上下载-->
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
//1.渲染器
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
//渲染器
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}
//2.相机
var camera;
function initCamera() {
//90为90度视角
camera = new THREE.PerspectiveCamera(90, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 800;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//相机的视野中心
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
//3.场景
var scene;
function initScene() {
scene = new THREE.Scene();
}
//4.灯光
var light;
function initLight() {
//方向光
light = new THREE.DirectionalLight(0xFF0000, 0.5);
light.position.set(100, 100, 200);
scene.add(light);
//点光源
light = new THREE.PointLight(0xFF0000);
light.position.set(10,0,300); //放的位置
scene.add(light);
//环境光
light = new THREE.AmbientLight(0x00FF00);
light.position.set(100, 100, 200);
scene.add(light);
}
//5.物体
var cube;
var mesh;
function initObject() {
//几何体
var geometry = new THREE.CylinderGeometry(100,150,400);
//var geometry = new THREE.Bezier(1,1);
//使用材质 兰伯特材质
var material = new THREE.MeshLambertMaterial({color:0xFF0000});
//Mesh 几何体 材质
mesh = new THREE.Mesh(geometry,material);
mesh.position = new THREE.Vector3(0,0,0); //点位置
scene.add(mesh);
}
//6.开始
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
initTween();
animation();
}
/*****Tween.js******/
//1.渲染声明
function initTween(){
new TWEEN.Tween(camera.position).to({x:300,y:400},3000).repeat(Infinity).start();
}
//2.函数重复执行
function animation(){
renderer.render(scene,camera);
requestAnimationFrame(animation);
TWEEN.update();
}
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tween</title>
<!--请去网上下载-->
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
//1.渲染器
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
//渲染器
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}
//2.相机
var camera;
function initCamera() {
//90为90度视角
camera = new THREE.PerspectiveCamera(90, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 800;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//相机的视野中心
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
//3.场景
var scene;
function initScene() {
scene = new THREE.Scene();
}
//4.灯光
var light;
function initLight() {
//方向光
light = new THREE.DirectionalLight(0xFF0000, 0.5);
light.position.set(100, 100, 200);
scene.add(light);
//点光源
light = new THREE.PointLight(0xFF0000);
light.position.set(10,0,300); //放的位置
scene.add(light);
//环境光
light = new THREE.AmbientLight(0x00FF00);
light.position.set(100, 100, 200);
scene.add(light);
}
//5.物体
var cube;
var mesh;
function initObject() {
//几何体
var geometry = new THREE.CylinderGeometry(100,150,400);
//var geometry = new THREE.Bezier(1,1);
//使用材质 兰伯特材质
var material = new THREE.MeshLambertMaterial({color:0xFF0000});
//Mesh 几何体 材质
mesh = new THREE.Mesh(geometry,material);
mesh.position = new THREE.Vector3(0,0,0); //点位置
scene.add(mesh);
}
//6.开始
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
initTween();
animation();
}
/*****Tween.js******/
//1.渲染声明
function initTween(){
new TWEEN.Tween(camera.position).to({x:300,y:400},3000).repeat(Infinity).start();
}
//2.函数重复执行
function animation(){
renderer.render(scene,camera);
requestAnimationFrame(animation);
TWEEN.update();
}
</script>
</body>
</html>
相关文章推荐
- 欢迎大家一起讨论一下pb界面中的问题
- 把遇到过的对.Net线程的一些问题和误解集中起来和大家分享,也希望大家能一起补充,热烈欢迎讨论
- 一起参与Ember.js讨论、问答社区。
- ASP.NET 动态转静态页面的两种方法总结:(欢迎大家一起讨论)
- 今天起持续半年记录DPI产品的研发过程,欢迎大家一起讨论(1)
- 谈谈内存池 (欢迎大家一起讨论,欢迎拍砖)
- 智捷公开课马上开始了-欢迎大家一起讨论学习-第一系列读《Swift开发指南(修订版) 》看Swift视频教程
- Android开发核心分析系列教程(欢迎大家一起讨论学习)
- MaxWit Linux 详细介绍, 欢迎大家参与讨论!!
- 关于认证的看法,欢迎大家一起讨论
- CSDN问答频道上线测试,欢迎大家一起参与
- 智捷公开课马上开始了-欢迎大家一起讨论学习-第一系列读《Swift开发指南(修订版) 》看Swift视频教程
- 自动化测试-小公司,UI设计想法,欢迎大家留言,一起讨论,有最好的办法去实现
- 欢迎大家访问,参与讨论,并提出批评、建议、修改
- 现在的你必须作出未来的预想,欢迎大家参与讨论、交流
- 把遇到过的对.Net线程的一些问题和误解集中起来和大家分享,也希望大家能一起补充,热烈欢迎讨论(转)
- 发布一个刚开始着手做的blog系统,希望大家能一起参与进来,共同讨论,共同提高.
- 把遇到过的对.Net线程的一些问题和误解集中起来和大家分享,也希望大家能一起补充,热烈欢迎讨论(引)
- Ansible UI web 界面搭建 ----欢迎大家一起讨论研究
- 【讨论】程序员的发展道路如何规划,欢迎大家加入讨论