2013年1月5日 星期六
WebGL(3)--torus demo
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample Three.js</title>
<style>
#container {
background: #FFF;
width: 800px;
height: 600px;
margin-left:auto; margin-right:auto; //css水平置中
}
</style>
</head>
<body>
<div id="container"> //canvas物件所在位置
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/Three.js"></script> //Three.js 3D物理建構套件
<script type="text/javascript">
// set the scene size
var WIDTH = 800,
HEIGHT = 600;
// set some camera attributes
var VIEW_ANGLE = 80, //視角80度
ASPECT = WIDTH/HEIGHT*0.4 , //長寬比5:2
NEAR = 0.01,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
color: 0xCCFFFF
});
var torusMaterial = new THREE.MeshLambertMaterial(
{
color: 0x10F9FF
});
var torus2Material = new THREE.MeshLambertMaterial(
{
color: 0x356957
});
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
var radius2 = 2000, tube=900, segmentsR = 1024, segementsT = 1024;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, rings),
sphereMaterial);
var torus= new THREE.Mesh(
new THREE.TorusGeometry( 100, 10, 256,256 ), torusMaterial);
//建立torus物件 半徑100 壺圈寬度10 內半徑256個 外半徑256個
var torus2= new THREE.Mesh(
new THREE.TorusGeometry( 110, 10, 256,256 ), torus2Material);
// add the sphere to the scene
scene.add(sphere);
scene.add(torus);
scene.add(torus2);
// and the camera
scene.add(camera);
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 500;
pointLight.position.y = 600;
pointLight.position.z = 400;
// add to the scene
scene.add(pointLight);
// draw!
renderer.render(scene, camera);
</script>
</html>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言