three.js学习:三维空间下的直线
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <script src="js/three.min.js"></script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; /*background-color: blue;*/ } </style> </head> <body> <canvas></canvas> </body> <script src="js/chapter2.1.js"></script> </html>
chapter2.1.js
1、步骤概述:初始化渲染器 > 初始化相机 > 初始化场景 > 建立几何图形并添加到场景中 > 渲染
function threeStart() { initThree(); initCamera(); initScene(); initObject(); renderer.clear(); renderer.render(scene, camera); } threeStart();
2、初始化渲染器
var canvas = document.querySelector("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var renderer; function initThree() { renderer = new THREE.WebGLRenderer({ canvas : canvas, antialias : true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xffffff, 1); }
3、初始化相机
var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 1000; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt(0, 0, 0); }
4、初始化场景
var scene; function initScene () { scene = new THREE.Scene(); }
5、生成几何图行并添加到场景中
var line; function initObject() { //定义两个顶点 var p1 = new THREE.Vector3(-100, -100, 0); var p2 = new THREE.Vector3(100, 100, 0); var geometry = new THREE.Geometry(); var material = new THREE.LineBasicMaterial({vertexColors:THREE.VertexColors }); geometry.vertices.push(p1); geometry.vertices.push(p2); var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 ); geometry.colors.push(color1, color2); line = new THREE.Line(geometry, material, THREE.LineSegments); scene.add(line); }
执行效果:
因为实例化材质的时候,用了vertexColors:THREE.VertexColors参数,因此直线的颜色是根据顶点的颜色渐变的。
6、直线进阶:网格线
var canvas = document.body.querySelector("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var renderer; function initThree() { renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xFFF000, 1.0); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 1000; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt(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(10, 10, 20); scene.add(light); } var cube; function initObject() { 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: 0x000000, opacity: 0.2})); line.position.y = (i * 50) - 500; scene.add(line); var line2 = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: 0x000000, opacity: 0.2})); line2.position.x = (i * 50) - 500; line2.rotation.z = 90 * Math.PI / 180; scene.add(line2); } } function threeStart() { initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene, camera); } threeStart();
three.js学习:三维空间下的直线的更多相关文章
- Three.js 学习笔记(1)--坐标体系和旋转
前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library ...
- 【温故知新】——BABYLON.js学习之路·前辈经验(二)
前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- Android学习——windows下搭建NDK_r9环境
1. NDK(Native Development Kit) 1.1 NDK简介 Android NDK是一套允许开发人员使用本地代码(如C/C++)进行Android APP功能开发的工具,通过这个 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- 【入门必备】最佳的 Node.js 学习教程和资料书籍
Web 开发人员对 Node.js 的关注日益增多,更多的公司和开发者开始尝试使用 Node.js 来实现一些对实时性要求高,I/O密集型的业务.这篇文章中,我们整理了一批优秀的资源,你可以得到所有你 ...
随机推荐
- java zip 压缩文件
zip压缩:ZipOutputStream.ZipFile.ZipInputStream 三个类的作用 一段 java zip 压缩的代码: File dir = new File("C ...
- nginx下js文件修改后访问不更新问题解决
今天遇到一个问题,nginx下js修改后不更新,加版本号,刷新浏览器缓存都不行,重启服务器才行,修改后又不更新了而且加载的js文件会有乱码或者文件加载不全的问题. 解决办法:修改nginx.conf, ...
- 编写第一个python selenium-webdriver程序(二)
上节介绍了如何搭建selenium 系统环境,那么本节来讲一下如何开始编写第一个自动化测试脚本. Selenium2.x 将浏览器原生的API封装成WebDriver API,可以直接操作浏览器页面里 ...
- Github使用说明 --整理者米米
打开百度搜索Git官网下载对应的windows版本 傻瓜式默认安装,点击完成 PS:安装的过程比较慢 安装完成后打开命令行窗口(cmd) 查看版本号------git --version 安装成功 ...
- 编写dll时的内存分配策略
前一篇文章介绍了为何要共用内存管理器,有人要问可不可以在编写dll时更通用一些,可以兼顾其它编译器(如果是其它编译器的话,Delphi写的dll不能与其它语言共用内存管理器),采用一定的策略来避免在d ...
- system.Data.Entity.Infrastructure.DbUpdateConcurrencyException: Store update, insert, or delete statement affected an unexpected number of rows (0) 问题
页面控件没有做限制.提交后还可以继续点击,造成了在短时间内的多次请求.查看日志两次错误在200ms之内. 错误信息 system.Data.Entity.Infrastructure.DbUpdate ...
- DS图--最小生成树
题目描述 根据输入创建无向网.分别用Prim算法和Kruskal算法构建最小生成树.(假设:输入数据的最小生成树唯一.) 输入 顶点数n n个顶点 边数m m条边信息,格式为:顶点1 顶点2 权值 P ...
- elasticsearch 口水篇(4)java客户端 - 原生esClient
上一篇(elasticsearch 口水篇(3)java客户端 - Jest)Jest是第三方客户端,基于REST Api进行调用(httpClient),本篇简单介绍下elasticsearch原生 ...
- Ubuntu 14.10 下使用IDEA开发Spark应用
1 环境准备 1.1 下载IDEA,可在官网下载 1.2 IDEA与Eclipse有点不同,IDEA中的New Projects相当于Eclipse中的workspace,New Module才是新建 ...
- python调用有道翻译api实现翻译
通过调用有道翻译的api,实现中译英.其他语言译中文 代码: # coding=utf-8 import urllib import urllib2 import json import time i ...