[WEBGL] 利用HTML5构筑物理模拟环境2.2

[复制链接]

奔跑的小兔

1602 主题	1 听众	2万积分

资深设计师

Rank: 7 Rank: 7 Rank: 7

纳金币: 24658
精华: 6

电梯直达

楼主

发表于 2012-8-17 15:01:44 |只看该作者 |倒序浏览

THREE.JS的动作确认
绘制一个长方体，顺便确认下 Three.js 的运行。启动文本编辑器、把下面的源代码拷贝&粘贴、并保存到工作目录下。
例１：TUTORIAL1.HTML（设置视点和光源、绘制立方体）

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Three.js チュートリアル１</title>

<script src="Three.js"></script>

<style type="text/css">

div#canvas-frame{

  border: none;

  cursor: pointer;

  width: 600px;

  height: 600px;

  background-color: #EEEEEE;

}

</style>

<script>

  var renderer;

  function initThree() {

width = document.getElementById('canvas-frame').clientWidth;

height = document.getElementById('canvas-frame').clientHeight;

renderer = new THREE.WebGLRenderer({antialias: ***e});

renderer.setSize(width, height );

document.getElementById('canvas-frame').appendChild(renderer.domElement);

renderer.setClearColorHex(0xFFFFFF, 1.0);

  }
  var camera;

  function initCamera() {

camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );

camera.position.x = 100;

camera.position.y = 20;

camera.position.z = 50;

camera.up.x = 0;

camera.up.y = 0;

camera.up.z = 1;

camera.lookAt( {x:0, y:0, z:0 } );

  }

  var scene;

  function initScene() {

scene = new THREE.Scene();

  }

  var light;

  function initLight() {

light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);

light.position.set( 100, 100, 200 );

scene.add(light);

  }

  var cube;

  function initObject(){

cube = new THREE.Mesh(

      new THREE.CubeGeometry(50,50,50),             //形状の設定

      new THREE.MeshLambertMaterial({color: 0xff0000}) //材質の設定

);

scene.add(cube);

cube.position.set(0,0,0);

  }

  function threeStart() {

initThree();

initCamera();

initScene();

initLight();

initObject();

renderer.clear();

renderer.render(scene, camera);

  }

</script>

</head>
<body onload="threeStart();">

<div id="canvas-frame"></div>

</body>

</html>执行的结果就象下面这样。使用支持WebGL的浏览器就可以看到一个红色的长方体被绘制出来了。