three.js正投影相机OrthographicCamera

<!-- https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>正投影相机OrthographicCamera</title><style> body { margin: 0; /* 隐藏body窗口区域滚动条 */ overflow: hidden; } </style><!--引入three.js三维引擎--><script src="three.js"></script><script src="OrbitControls.js"></script>
</head>
<body>
<script>/*** 【第一步】: 创建场景对象Scene*/var scene = new THREE.Scene();/*** 【第二步】: 创建网格模型*///创建一个球体几何对象// var geometry = new THREE.SphereGeometry(60, 40, 40);//创建一个立方体几何对象Geometryvar geometry = new THREE.BoxGeometry(10, 10, 10);// 【第三步】: 创建材质对象Material，这里只是单单的给复制颜色var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });for(var i=-9;i<10;i++) {// 创建网格模型对象Meshvar mesh = new THREE.Mesh(geometry, material);// 设置模型位置 X 轴mesh.position.set(i*20, 0, 10);// 将网格模型添加到场景中scene.add(mesh);}for(var i=-9;i<10;i++) {// 网格模型对象Meshvar mesh = new THREE.Mesh(geometry, material);// 设置模型位置 Y 轴mesh.position.set(0, i*20, 10);// 将网格模型添加到场景中scene.add(mesh);}for(var i=-9;i<10;i++) {// 创建网格模型对象Meshvar mesh = new THREE.Mesh(geometry, material);// 设置模型位置 Z 轴mesh.position.set(0, 0, i*20);// 将网格模型添加到场景中scene.add(mesh);}/*** 【第四步】:光源设置*/// 4-1 创建点光源var point = new THREE.PointLight(0xffffff);// 点光源位置point.position.set(400, 200, 300);// 点光源添加到场景中scene.add(point);// 4-2 环境光var ambient = new THREE.AmbientLight(0x444444);// 将环境光添加到场景中scene.add(ambient);/*** 【第五步】: 相机设置 及 创建相机对象*/// 创建正交投影相机对象 // https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera// 设置窗口的宽度为浏览器窗口宽度var width = window.innerWidth; // 设置窗口的高度为浏览器窗口高度var height = window.innerHeight;// 正交投影相机OrthographicCamera参数为 var camera=new THREE.OrthographicCamera(width/2,   // left摄像机视锥体左侧面-width/2,  // right摄像机视锥体右侧面height/2,  // top摄像机视锥体上侧面-height/2, // bottom摄像机视锥体下侧面0.1,       // near摄像机视锥体近端面1000       // far摄像机视锥体远端面);// 设置相机位置camera.position.set(0, 0, 200);// 设置相机方向(指向的场景对象)camera.lookAt(scene.position);/*** 【第六步】创建WebGL渲染器对象*/// antialias为true开启抗锯齿var renderer = new THREE.WebGLRenderer({antialias:true});// 设置渲染区域尺寸renderer.setSize(width, height);// 设置背景颜色renderer.setClearColor(0xb9d3ff, 1);// body元素中插入canvas对象document.body.appendChild(renderer.domElement);/*** 【第七步】创建轨道控制器，实现用鼠标交互 旋转、平移，缩放* 关于OrbitControls轨道控制器的使用说明* http://www.yanhuangxueyuan.com/doc/Three.js/OrbitControls.html*/var controlStore = new THREE.OrbitControls(camera, renderer.domElement);// 动态阻尼系数 就是鼠标拖拽旋转灵敏度controlStore.dampingFactor = 0.5;// 视角最小距离controlStore.minDistance = 0;// 视角最远距离controlStore.maxDistance = 2000;// 最大角度controlStore.maxPolarAngle = Math.PI / 2.2;function animate() {renderer.render(scene, camera);requestAnimationFrame(animate);}animate();//执行渲染操作 指定场景、相机作为参数
</script>
</body>
</html>

DEMO下载

更多参考》

three.js正投影相机OrthographicCamera相关推荐

Three.js漫游相机控制器/three.js第三人称视角漫游/three.js第一人称视角漫游
Three.js三维可视化引擎没有实现第三人称漫游控制器,第一人称实现的也很一般,大部分满足不了需求,需要自己手动去写一个.以下是模仿其它平台写的第三人称视角漫游,也可以简便的改写成第一人称. 下面是 ...
Libgdx之正交相机 OrthographicCamera
本翻译自Libgdx Wiki 本文主要介绍OrthographicCamera相机类和用法.OrthographicCamera是正交相机,用在2D游戏开发中,无论游戏物体放在游戏世界中的那个位置, ...
30 Three.js的相机飞行控件FlyControls
简介 FlyControls是相机的控件,飞行模拟器控件,用键盘和鼠标控制相机移动和旋转.这个控件使用可以把相机想象成是无人机的摄像头. 案例查看地址:http://www.wjceo.com/blo ...
正交相机OrthographicCamera在GDX中的使用
这里写自定义目录标题 OrthographicCamera简述学习资料主要函数属性的设置绘制.显示 OrthographicCamera 源码实例 OrthographicCamera简述 C ...
h5+js调取相机做取景框_Ps绘制超复杂逼真相机图标
来源:优设作者:吃喝玩乐团团长喜欢这些拟物图标么?想不想自己画出这些精致的拟物图标呢! 不用羡慕!你也可以!一起来练吧!今天这篇教程包含了大量基础的拟物绘制套路,临摹完保证让你恍然大悟. 前段 ...
h5+js调取相机做取景框_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
前端js调用相机实现拍照，下载照片功能
样式-定义取相框的大小 <style>.camera_vedio,canvas,img {width: 500px;height: 500px;border: 1px solid #ccc ...
h5 调起相机_H5+js调用相机 - osc_e61ersei的个人空间 - OSCHINA - 中文开源技术交流社区...
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
three.js入门到实战
学习之前示例演示参考资料 api查询:http://www.webgl3d.cn/threejs/docs/index.html# 代码地址:https://github.com/mrdoob/t ...

three.js正投影相机OrthographicCamera

three.js正投影相机OrthographicCamera相关推荐

最新文章

热门文章