本文介绍ThreeJS使用的大体流程。(由于水平有限,请大家多多指教。)
1.ThreeJS下载和引入:
(1)下载地址:https://github.com/mrdoob/three.js/archive/master.zip
(2)引入:<script type="text/javascript" src="~/Scripts/three.js"></script>
2.开始:
(1)定义canvas
<canvas id="canvas" width="1000" height="500"></canvas>
(2)//渲染器
var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("canvas"), }); renderer.setClearColor(0x000000);
(3)//场景
var scene = new THREE.Scene();
(4)//照相机
var camera = new THREE.OrthographicCamera(-5, 5, 2.5, -2.5, 0, 10); camera.position.set(1, 2, 5); camera.lookAt(new THREE.Vector3(0,0,0)); scene.add(camera);
(5)//物体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: 0xff0000 })); scene.add(cube);
(6)//灯光
var light = new THREE.DirectionalLight(); light.position.set(1,2,5); scene.add(light);
(7)//渲染
renderer.render(scene,camera);
3.运行代码,效果如下:
4.总结:
本文旨在感受ThreeJS。