three.js中各种场景的使用方法:
当然首先要先引入three.js库;其次,手动定义一个 canvas 标签。
<script type="text/javascript" src="../bower_components/three/three.js"></script>
<canvas id="test1" width="400" height="300"></canvas>
1. 创建渲染器renderer:
var renderer = new THREE.WebGLRenderer({
canvas:document.getElementById("test1")
});
renderer.setClearColor('#000');
2. 创建场景:
var scene = new THREE.Scene();
3. 创建照相机
(创建透视照相机):
var camera = new THREE.PerspectiveCamera(45,4/3,0.1,6000);
camera.position.set(0,0,8);
scene.add(camera);
(创建正交照相机):
var camera = new THREE.OrthographicCamera(-2,2,1.5,-1.5,1,10);
camera.position.set(4,3,5);
camera.lookAt(scene.position);
4.创建模型:
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
new THREE.MeshBasicMaterial({
color :'#ccc',
wireframe:true
})
);
5.将创建的对象添加到场景中:
scene.add(cube);
renderer.render(scene,camera);