文档章节

three.js绘制过程(二)

李勇2
 李勇2
发布于 2015/03/02 09:38
字数 307
阅读 19
收藏 0
点赞 0
评论 0

同一个场景中可以有多个摄像机,同一个屏幕缓冲区可以分块绘制不同的物体。


WeblGLRender 中autoClear 设定为false之后, 每次绘制不会清空缓冲区;

setSize 设定canvas的大小

setViewport 设定绘制的位置的大小

clear() 手动清空绘制缓冲区


例如有两个摄像机A B;

将autoClear设定为false,

在绘制函数中 

开始手动清空缓冲区clear()

setViewport (0 0, Width/2, height) 左侧可以绘制第一个摄像机的看到的场景,

render() 

setViewport(width/2, 0, width/2, height) 右侧可以绘制第二个摄像机的场景

render()


这样就可以在一个屏幕上绘制两个摄像机的看到的场景。


CameraHelper:

THREE 中有 CameraHelper类可以帮助确定场景中摄像机的位置,和可视见范围, 本质上是一个场景节点。

CameraHelper 本身是一个Object3D, 可以作为摄像机的子节点, 这样就可以保证和摄像机一起移动。

CameraHelper的update函数, 当观察的摄像机参数改变, 比如fov, far平面, 则需要更新helper的状态。


构造函数 CameraHelper(camera) 传入要观察的摄像机

  


本文转载自:http://blog.csdn.net/liyong748/article/details/7927310

共有 人打赏支持
李勇2

李勇2

粉丝 45
博文 188
码字总数 62209
作品 0
广州
程序员
SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 WebGL 的网站来认识下 WebGL 的魅力吧~ 温馨提示:浏览以下网页需要浏览...

keke ⋅ 2017/10/19 ⋅ 0

微信小游戏three.js开发

如何用three.js开发微信小游戏 首先我们先用微信开发者工具创建一个模块,然后先将里面不需要的内容删除,将three.js放到我们的项目中,并且在main.js都将其引入: 这里我用一个3D游戏中比较...

yidboy ⋅ 04/13 ⋅ 0

three.js绘制过程(二)

同一个场景中可以有多个摄像机,同一个屏幕缓冲区可以分块绘制不同的物体。 WeblGLRender 中autoClear 设定为false之后, 每次绘制不会清空缓冲区; setSize 设定canvas的大小 setViewport ...

李勇2 ⋅ 2012/09/18 ⋅ 0

WebVR开发教程——标准入门

WebVR即web + VR的体验方式,我们可以戴着头显享受沉浸式的网页,新的API标准让我们可以使用js语言来开发。本文将介绍如何快速开发一个WebVR网页,在此之前,我们有必要了解WebVR的体验方式。...

YoneChen ⋅ 01/09 ⋅ 0

three.js简介 —— 3D框架

threejs 随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.js在这些基础接口之上又做了一层封装。 原文链接 特点 Three.js...

bestvist ⋅ 2017/12/26 ⋅ 0

three.js 画一个旋转的立方体

试想一下,如果我们的周围的事物都是静止的,那将是多么无聊的一个世界;同样的,我们创建出的场景如果是静止的,只能满足我们一时的视觉体验,时间一长会让我们感觉到枯燥无聊,所以要营造好...

qq_37338983 ⋅ 2017/11/19 ⋅ 0

three.js基础几何体:立方体,球,圆柱的绘制

作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性...

qq_37338983 ⋅ 2017/11/18 ⋅ 0

【three.js学习笔记】03 物体的运动

在上一章中,我们已经完成场景,物体的创建并且添加光影,在这一章中我们尝试让物体运动起来 众所周知动画是一帧帧的静态图像构成的,因此在浏览器中的3d绘制也是类似的,每一帧中物体位置、...

towrabbit ⋅ 05/04 ⋅ 0

Three.js 初探 - 微场景制作

最近在捣鼓 Three.js 相关, 觉得做一个微场景是一个很不错的选择,结果做下来发现效果还可以。 下面放几张不同角度的效果图 预览地址 https://luosijie.github.io/threejs-examples/mini-cit...

JesseLuo ⋅ 2017/11/10 ⋅ 0

Three.js 初探 - 微场景制作

最近在捣鼓 Three.js 相关, 觉得做一个微场景是一个很不错的选择,结果做下来发现效果还可以。 下面放几张不同角度的效果图 微场景-斜视 微场景-正面 微场景-背面 预览地址 luosijie.github....

JesseLuo ⋅ 2017/11/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

x64: TITLE Add and Subtract (AddSub.asm) ; This program adds and subtracts 32-bit integers. ; Last update: 2/1/02 ;.MODEL flat,stdcall x64 not su......

simpower ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 昨天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 昨天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部