Three.js(3)
第一个项目：
在<title>下面添加 js 源文件
在<title>下面添加 js 源文件
<script type="text/javascript" src="three.js"></script>
然后是<script></script>中添加js代码:
function init() {
// renderer
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas') });
renderer.setClearColor(0x000000); // black
// scene
var scene = new THREE.Scene();
// camera
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5); scene.add(camera);
// a cube in the scene
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({ color: 0xff0000 }) );
scene.add(cube);
// render
renderer.render(scene, camera);
}
在<body onload="init()">里添加<canvas>画布<canvas id="mainCanvas" widh="400px" height="300px"></canvas>运行结果如下：
解释说明：
在<body>中， onload 会载入在<script>里定义的 function。
一般来说，three.js 包含4个部分：render（渲染器）scene（场景）camera（照相机）物体说明：
场景：scene，用来包含物体。创建方法：
var scene = new THREE.Scene(); // 场景
照相机：camera 这里的照相机采用和opengl相同的方向，即 右--X正向， 上--Y正向， 穿出屏幕
向外--Z正向，创建方法：
var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);
物体：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
new THREE.MeshBasicMaterial({ color: 0xff0000 }) );
scene.add(cube);
渲染器：render，这里是在body中定义了canvas之后的设置方法。并将背景色设置为黑色。
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas') });
renderer.setClearColor(0x000000); // black
最后，将场景和摄像机添加到渲染器中：
renderer.render(scene, camera);
没有评论:
发表评论