|
学习three.js也有两天了,现在也在不间断的学习相关知识,了解three.js的规则。也做了两个简单的案例,感受到了three.js的强大,研究了一些别人的代码,现在想找到一种适合自己的书写代码。
今天,还真的找到了一种感觉特别适合自己的方法,自己写js的时候貌似也这么写。但是由于学了两个月的WebGL的基础,学的有点懵逼,感觉自己书写正常js的能力都快忘记了。今天,看到这个案例,感觉自己的灵感直接来到了。
每个three.js案例基本上都会包括渲染器、相机、场景、光源和模型。我以后书写相关代码会把它们封装成一个个的方法,然后等待页面加载完后,调用一下即可。
下面是我自己定义的方法名:
初始化渲染器:initRender
初始化相机:initCamera
初始化场景:initScene
初始化灯源:initLight
初始化模型:initModel
动画:animate
绘制:draw
下面是一个案例,生成了42条线- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Three框架</title>
- <script src="https://www.wjceo.com/lib/three.js"></script>
- <style type="text/css">
- html, body {
- margin: 0;
- height: 100%;
- }
- div#canvas-frame {
- border: none;
- cursor: pointer;
- width: 100%;
- height: 100%;
- background-color: #EEEEEE;
- }
- canvas {
- display: block;
- }
- </style>
- <script>
- //渲染器
- var renderer,width,height;
- function initRender() {
- width = document.getElementById('canvas-frame').clientWidth;
- height = document.getElementById('canvas-frame').clientHeight;
- renderer = new THREE.WebGLRenderer({
- antialias: true
- });
- renderer.setSize(width, height);
- document.getElementById('canvas-frame').appendChild(renderer.domElement);
- renderer.setClearColor(0xffffff, 1.0);
- }
- //相机
- var camera;
- function initCamera() {
- camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
- camera.position.x = 0;
- camera.position.y = 900;
- camera.position.z = 0;
- camera.lookAt(new THREE.Vector3(0,0,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);
- }
- //模型
- function initModel() {
- //轴辅助 (每一个轴的长度)
- var object = new THREE.AxesHelper(500);
- scene.add(object);
- var geometry = new THREE.Geometry();
- geometry.vertices.push(new THREE.Vector3(-500, 0, 0));
- geometry.vertices.push(new THREE.Vector3(500, 0, 0));
- for (var i = 0; i <= 20; i++) {
- var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
- line.position.z = ( i * 50 ) - 500;
- scene.add(line);
- var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: randomColor(), opacity: 1}));
- line.position.x = ( i * 50 ) - 500;
- line.rotation.y = 90 * Math.PI / 180;
- scene.add(line);
- }
- console.log(scene);
- }
- //绘制
- function draw() {
- initRender();
- initCamera();
- initScene();
- initLight();
- initModel();
- renderer.render(scene, camera);
- }
- //生成随机颜色
- function randomColor() {
- var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
- strHex = "0x",
- index;
- for (var i = 0; i < 6; i++) {
- index = Math.round(Math.random() * 15);
- strHex += arrHex[index];
- }
- return eval(strHex);
- }
- </script>
- </head>
- <body onload="draw();">
- <div id="canvas-frame"></div>
- </body>
- </html>
复制代码
|
|