效果：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Grid</title>
<style>body{background:#eeeeee;margin:0;padding:0;}</style>
<script src="js/three.min.js"></script>
</head>
<body>
<script>
var width = window.innerWidth-3;
var height = window.innerHeight-3;
var scene = new THREE.Scene(); //创建场景
var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000); //创建相机（视角为45度，宽高比为width/height，近平面在1(离原点很近)，远平面在+1000/-1000）
camera.position.y = 1000; //设置相机的位置（默认添加到原点）
camera.up.z = 1; //设置相机的上为z轴正方向（使与x轴水平沿z轴排列的线，看上去一行一行排列）
camera.lookAt({x:0, y:0, z:0}); //设置相机的焦点在原点（相机默认添加到空间中的原点，方向向前，位移后物体可能不在视野内）
var geometry = new THREE.Geometry(); //创建geometry
geometry.vertices.push(new THREE.Vector3(-19*40/2, 0 ,0)); //添加顶点
geometry.vertices.push(new THREE.Vector3(19*40/2, 0, 0));
for(var i=0;i<20;i++){
//var mesh = new THREE.Mesh(geometry, material);
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0x0000ff})); //利用geometry和material创建line
line.position.z = i*40 - 19*40/2; //设置line的位置
scene.add(line); //将line添加到场景中
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0xff0000}));
line.position.x = i*40 - 19*40/2;
line.rotation.y = Math.PI/2; //绕y轴旋转90度
scene.add(line);
}
var renderer = new THREE.WebGLRenderer({antialias : true}); //创建渲染器（并设置抗锯齿属性）
renderer.setSize(width, height); //设置渲染器的大小
renderer.setClearColor(0xeeeeee, 1); //设置渲染器的背景
document.body.appendChild(renderer.domElement); //添加渲染器的DOM元素到body中
function render(){
//renderer.clear();
renderer.render(scene, camera); //进行渲染
}
render();
</script>
</body>
</html>
附注：笔者当前使用的three.js版本是r69。
相关推荐
**3D签到墙ThreeJS动画详解** Three.js是一个基于WebGL的JavaScript库，用于在浏览器中创建3D图形。这个“3D签到墙”项目利用Three.js的强大功能，为活动、年会等场合提供一种新颖且互动的签到体验。通过WebGL，它...
在本项目中，"threejs+shader平面扩散波（抗锯齿）.zip"是一个包含使用Three.js库和着色器实现的平面扩散波动画的示例。Three.js是一个广泛使用的JavaScript库，它允许开发者在浏览器中创建和展示3D图形。这个项目...
这个"ThreeJS中文API文档"是为开发者提供的一种详细、易懂的参考资源，旨在帮助他们更好地理解和使用THREE.JS库。以下是对这个API文档中可能包含的一些关键知识点的详细解释： 1. **对象和类**：THREE.JS中的所有...
在这个“WebGL/ThreeJS EdgesGeometry边缘几何体画一个立方体的边框demo”中，可能还包括了旋转、平移和缩放立方体，以及调整相机位置以查看边框效果的代码。开发者可能会使用`THREE.OrbitControls`来实现交互式的...
标题 "three.js-线上运动的光效" 指向的是一个使用 three.js 库创建的、关于在线环境中动态光线效果的项目。three.js 是一个流行的JavaScript库，用于在Web浏览器中创建3D图形，它利用 WebGL 技术提供丰富的三维渲染...
在本教程中，我们将深入探讨如何使用three.js库来创建一个简单的行星运转动画，模拟月球围绕地球的公转。three.js是一个强大的JavaScript库，专为WebGL提供3D图形渲染，使开发者能够轻松地在浏览器中构建丰富的3D...
WebGL和Three.js是Web开发中的重要技术，用于在浏览器中创建交互式的3D图形。WebGL是一种基于OpenGL标准的JavaScript API，它允许开发者在网页上实现硬件加速的3D图形渲染，而无需任何插件。Three.js是建立在WebGL...
1. **环境配置**：安装Three.js和Vue.js库，以及可能需要的其他依赖。 2. **创建场景**：在Vue组件中初始化Three.js的场景、相机和渲染器。 3. **添加对象**：根据太阳系的实际情况，创建太阳、行星及其轨道，并设置...
- **预设模型**：这些可能是用其他3D建模软件（如Blender或Maya）创建的模型，经过转换为Three.js兼容格式（通常是.js或.json）。每个模型文件通常包含几何数据、材质信息和动画数据。 - **加载器（Loader）**：...
"Three.js 源码及各种插件"这一标题表明这是一个关于Three.js库的资源集合，其中包含Three.js的核心源码以及一系列的插件。Three.js是一个广泛使用的JavaScript库，用于在Web浏览器中创建3D图形。它提供了丰富的API...
文件列表中的"说明.txt"可能包含了项目的部署指南和代码解释，而"vr"可能是主场景文件，包含了three.js的初始化、全景图加载、控制类实例化以及其他相关设置。分析这个文件可以帮助我们理解整个系统的实现细节。 ...
在"blander2.7版本threejs插件"中，我们可以理解为Blander 提供了一个特定的2.7版本，包含了一些专为Three.js设计的插件。这些插件可能包括额外的几何形状、粒子系统、动画控制器或者对特定文件格式的支持等，以帮助...
在"WebGL/ThreeJS项目初始化案例"中，我们通常会遇到以下几个关键知识点： 1. **环境设置**：首先，你需要确保你的浏览器支持WebGL，并且在HTML文件中引入Three.js库的标签。Three.js库可以从官方GitHub仓库或CDN...
本示例“ThreeJS创建纹理贴图demo”旨在教你如何利用Three.js库为你的3D对象添加丰富的视觉效果。Three.js是JavaScript的一个库，它简化了WebGL编程，使得在网页上创建交互式3D内容变得更加便捷。 WebGL是一种基于...
《使用three.js构建迷宫小游戏》 在当今的数字时代，3D图形技术已经成为了游戏开发中的重要一环。...学习和掌握three.js，不仅能够开发出有趣的迷宫游戏，还能为其他类型的3D Web应用打下坚实的基础。
在“donmccurdy-three-gltf-viewer-6c178f4”这个文件夹中，包含了项目的源代码和其他资源。开发者可以查看和学习这些代码，了解如何将拖放预览功能与three.js结合，以及如何处理glTF 2.0格式的数据。通过对这个项目...
在Expo Froggy Street这个项目中，开发者可能利用了Three.js的上述特性来创建游戏世界，包括角色、道路、障碍物和其他环境元素。游戏的代码结构可能包括场景设置、对象创建、动画循环、用户输入处理和碰撞检测等部分...
本项目“threejs-rectangle-mesh”专注于创建一个便于使用的矩形网格，特别适合与正交相机配合使用。 在3D图形中，网格（Mesh）是基本的构建块，它由几何形状（Geometry）和材质（Material）组成。矩形网格在很多...
在本文中，我们将深入探讨如何利用three.js库来创建一个城市交通车辆行人交通事故等场景的三维模拟。three.js是JavaScript中最流行的3D图形库之一，它允许开发者在Web浏览器中构建复杂的3D交互式场景。 首先，理解...