Three.JS(1)直线
2016-07-05 19:31
337 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src="js/build/Three.js" data-ke-src="js/Three.js"></script> <script src="js/examples/js/renderers/CanvasRenderer.js"></script> <script src="js/examples/js/renderers/Projector.js"></script> <style type="text/css"> div#canvas-frame { border: none; cursor: pointer; width: 100%; 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.CanvasRenderer({ antialias : true });//在3D世界中是没有单位的概念的,Linewidth设置为100,webgl也不知道应该在屏幕中占据多少像素。 WebGLRenderer是不支持线宽度的,所以如果要画线并设置宽度请用CanvasRenderer,它是用二维canvas画布模拟3D效果,所以能够设置宽度。 renderer.setSize(width, height); document.getElementById('canvas-frame').appendChild(renderer.domElement); renderer.setClearColor(0xFFFFFF, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); camera.position.x = 0; camera.position.y = 1000; camera.position.z = 0; 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 cube; function initObject() { var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors, linewidth: 100} ); var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); // 线的材质可以由2点的颜色决定 var p1 = new THREE.Vector3( -100, 0, 100 ); var p2 = new THREE.Vector3( 100, 0, -100 ); geometry.vertices.push(p1); geometry.vertices.push(p2); geometry.colors.push( color1, color2 ); var line = new THREE.Line( geometry, material, THREE.LinePieces ); scene.add(line); } function render() { renderer.clear(); renderer.render(scene, camera); requestAnimationFrame(render); } function threeStart() { initThree(); initCamera(); initScene(); initObject(); render(); } </script> </head> <body onload="threeStart();"> <div id="canvas-frame"></div> </body> </html>
相关文章推荐
- OpenLayers 2 源码解读(2) Class.js
- ExtJs5.1.1使用中问题集锦
- Javascript 面向对象编程封装问题
- js中clearInterval无效,以及setInterval中断后重新执行
- js中json例子
- 正则表达式的部分替换 $1~$99
- javascript 创建对象的几种方式
- 总结javascript面向对象编程7种对象模型
- js中用prototype实现继承
- javascript中parseInt函数的用法
- [Effective JavaScript 笔记]第57条:使用结构类型设计灵活的接口
- js找出数组 arr 中重复出现过的元素
- 复选框的全选和全部选
- javaScript--04 JavaScript基础&DOM 上
- 用html5的canvas和JavaScript创建一个绘图程序
- 分享我对JS插件开发的一些感想和心得
- 面向对象的JavaScript-009-闭包
- 空间数据类型转化——geometry转geoJson转geoShape
- JSBinding / Code Snippets
- javascript内建对象String,Array,Math,Date()